1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

A ghost is :hovering where it shouldn't be...

Discussion in 'CSS' started by mlg5454, Sep 24, 2007.

  1. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,399
    Likes Received:
    1,875
    Best Answers:
    245
    Trophy Points:
    515
    #21
    Almost, but you'd have to change the source order and even then the two on the same line is not entirely possible without floats or inline-tricks. That, or resort to absolute positioning like you were originally.
    SEMrush
    It would be 'ok' to absolute position them inside the UL, using the UL's box to preserve flow - but that can cost a little render time. It's always better to rely on flow for something simple like this as it's just less headaches.

    As to a link to describe flow - I can't really think of any... It all boils down to the box model and the natural ordered placement of elements on the page... I've been doing this for long enough I think in box model, and I've never found any of the tutorials or books on the subject to be worth a damn since I've been computing for three decades.

    Can someone else suggest a good reference on the subject of layout?
     
    deathshadow, Sep 26, 2007 IP
    SEMrush
  2. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #22
    well, i'm back, deathshadow.

    i tried applying the code you gave me. and obviously it worked for the page i was using, but all the code you took out in the css page was for several other pages, as i was trying to use one css page for several pages...

    anyhow, i was working with the about page, and i'm wondering what the best way to center this div + h3 + p, here. i would have absolutely positioned it, but i suspect you'll say that's unnecessary. so here's the page, what do you think i should do?

    i want it to look like the other pages (click free stuff to see what i mean), so what's the best way to do this??

    http://www.minusthemasses.com/about.html
     
    mlg5454, Oct 6, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #23
    Free stuff? There's Free Music and Buy Stuff. But I assume you mean the words About, We're a Record Label, blah blah blah?

    Those could all sit in a div box and be floated left. It will sit next to the part where the artists' list is because ul is block element... you'd have to give it also the big top padding like everything else too. Edit* I see it's in a div called "center", which is great. Every page will have something in that div, even though it will say different things, right? The one CSS page can just deal with a div called "center" and it will work for every page. But your css:
    
    #center {
    	float: left;
    	width: 300px;
            add the margins and padding needed to place it where you want--- the beauty of css
    }
    
    Code (markup):
    (I can't visualise stuff like deathshadow does so in order to know what padding and margins I'd need to build the site on my computer too and play with it)


    Or did you mean the words that show up when clicking Free Music? You want those words elsewhere?
     
    Stomme poes, Oct 8, 2007 IP
  4. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #24
    cool, thanks.

    i used float, but when i messed with the margin-bottom tag it moved the picture below it. instead i've resorted to using "position: relative." is there any ... flow problem, or any other kind of problem with that?
     
    mlg5454, Oct 8, 2007 IP
  5. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #25
    i've also found another problem, how the #bottom div is moved if i change the line height of my p tag... why is that, and should i position the bottom div absolutely?

    is it even necessary for the bottom image to be in a div, should i just make it a positioned image?
     
    mlg5454, Oct 8, 2007 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #26
    Hmmm... I'm going to have to build this after all (your mostly-empty-space page looks kinda neat, something I may use someday). If I do this at work, am I to assume that where the About and the text in Free Music are where you want them? Otherwise make an image of what you want it to look like.

    The general rule of thumb for images is, if the image just pretty like a border or an arrow on a menu, it sits in the css; if you've got a page about disabled people, photos of the disabled people would be sitting in the html because they're really part of the content.

    Images that are covering text which is necessary, like a title, could go either way, so long as you keep the title text somewhere in the html as everyone (even people without images) should be able to read the title of the page.

    *edit I'll actually have to look at what deathshadow did first before changing stuff around... because my first thought was using absolute positioning for only the title as and h1 should come first in the document but visually you have it at the bottom... lemme look.

    Flow as I've understood it referred to how a pasic page should look like when it's just text (html). Like, for instance, in a newspaper front-page, there's a normal order of things... you pick up a Chinese newspaper and you could probably still tell me where the name of the paper is, which text is the main headline, the byline, the caption of the photograph... In many or most html pages, you've got the doctype and head stuff, an h1 with the title, h2(s) for sub-headings, a header, main body content, maybe a sidebar or two, and a footer if necessary... though many pages don't do this for artistic reasons (like yours, actually).

    Normally, someone with Jaws or Lynx coming to your page for the first time should first hear the name of the page "minus the masses" and then the list of gnu-bok links. For styling purposes you have that name at the bottom, which would be "against" the so-called normal document flow if in the html the h1/title was sitting at the top of your htmlpage.
     
    Stomme poes, Oct 8, 2007 IP
  7. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #27
    what should i do about the bottom div moving around though?
     
    mlg5454, Oct 9, 2007 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #28
    After I get it built on my machine I expect to see why it does that, or how no to do that. Hopefully later today : )
     
    Stomme poes, Oct 9, 2007 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #29
    Ah, actually, could you post an image or something of how exactly you want it to look? Because the text is generally in the center now... Then I could see what you're doing that's making the bottom move.

    *Edit aaaaaand I thought floats would bump up against divs already in place and that's not so. I tried putting a div around the goat menu but it didn't matter. Trying to float and move around the div id="center" would totally break the individual li's and scatter them about the page. Even not floating the center makes it goof with the page. Whatever's in that ul should stay in place, but they don't.
     
    Stomme poes, Oct 10, 2007 IP
  10. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #30
    ... well. the index page... that's without text there.

    with the text. now floating, the bottom image moves. i don't care what it looks like really, i just want it to be consistent. with all the suggestions made thus far it's just messed up.

    i feel as if i came here and deathshadow said "ho ho ho well that code is not adhering to THIS standard," but it worked fine in both firefox and IE, and since i listened to him now there's a problem but essentially the only problem i had was that the artists link was in the wrong place... i'm confused now. i dont' think there was really anything that wrong with my coding.
     
    mlg5454, Oct 12, 2007 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #31
    Well, he's right about absolute positioning being a great way to break a page.

    While I still couldn'ty move the about text around, I know (I think) why your title is being pushed down-- relative positioning does that.

    For instance, I have a page with
    Doctype etc
    head etc
    <div id="header">
    Header stuff
    </div>
    <div id="maincontent">
    main content stuff... if I start adding more and more stuff to the content and the content box starts getting longer (growing to fit the content), it will push anything underneath it further down.
    </div>
    <div id="footer">
    This footer, if relatively positioned, sits under the content and as the content grows, the footer is pushed further down.
    </div>
    end body html etc


    That's kindof what flow means, usually assuming a "typical" page with header on top, content in the middle, footer at the bottom. If you don't say anything in the CSS about how it's positioned, the browser assumes the default of position:static, meaning it stays in the order of how it's written in the html. Div boxes and other "block" elements stack atop each other.; inline elements and floats stack side-by-side so long as there's room to do so.

    Relative positioning isn't always the best option either, true. If the image of the name/title is being pushed down, one thing you would do is remove any margin or padding on top, and if that still wasn't far enough, having a negative top margin could still bring that image up.

    Since your site is so scarce on text, I could be okay with poisition absolute for the image itself. What deathshadow has made for the menu is definitely more flexible depending on what text size people have.

    Here's an example of absolute positioning used on EVERYTHING. In my browser's default font setting (normal), the text is too big. I have to shrink it down two times to make everything fit. Then the text is so friggin tiny that I can barely read it. Forget about older people who are taking care of their kids or grandkids:
    http://www.denationalecrechetest.nl/

    Absolute positioning should be used for something that, no matter what the content is, no matter how much it grows or shrinks, no matter the text size or browserwindow size, the thing sits in the same place as if you'd taped a piece of paper with the thing on the user's monitor. And you usually don't want that for boxes on a page. Makes a page incredibly inflexible and difficult for multiple browsers to see the same thing.
     
    Stomme poes, Oct 14, 2007 IP
  12. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #32
    k.. i've gone ahead and started going at it from what i've learned here and from what i know works, and there may be some flaws, i guess, but i'm checking FF and IE and if it works in both, and when it works when i reduce to 800 by 600, i'm just not going to worry about it. if the code looks unorganized, well at least i can read it. i'm not coding for others to read anyway.
     
    mlg5454, Oct 14, 2007 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #33
    I gotta say, your page is unusual enough that maybe do whatever you need to do for this one, but if you ever build another, more "traditional" webpage, it will work better to use the so-called "right way." Your page doesn't follow the header, sidebar, content, footer idea. Better to play around with different styles of positioning with one of those.

    Anyway, good luck.
     
    Stomme poes, Oct 14, 2007 IP
  14. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #34
    sure, it doesn't follow the conventional border box model, but how many people who will be attracted to my page will actually be viewing it without css capabilities? how many people aren't using IE and FF now?

    "enough people for it to matter, noob!"

    not really. i might lose what, 5 people? 10? if that?

    i'm i really that off here??
     
    mlg5454, Oct 15, 2007 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #35
    It's partly a question of preference. If someone's going to be a web page builder and they're going to be making many pages, then we'd want them to follow the W3C "standards" (which have no teeth really, so are really "guidelines"). Some people on this forum are more sticklers for that than others here. I personally would rather that a page is semantically written blah blah, but I've seen beautiful pages that aren't. and popular (but I would never touch them) pages like Yahoo. Actually, Yahoo.com is a wonderful example of what not to do and why. Look at their code and try making a small change or correction. Hello overtime.

    Now if this is like your only website, and it's really just yours, and you really only worry about IE and FF, eh. You're right. You will probably never get a blind visitor or someone with CSS turned off. But if a page is built for a business which is a customer, the minimum to have is that the page works whether there is CSS or not, images or not, etc. So while I was saying have an h1 behind the image name, sure, 99.999999% of your visitors wouldn't notice if there was one or not. It's only for pure accessibility that you'd have words there hidden behind the image (so there's always a title for your page, CSS/images or not).

    deathshadow and a few others here are big sticklers for the "right way" (which isn't just one way). If you wander around this forum, you'll see him and Dan Schultz and soulscratch etc. telling people what they've told you.
    If you'd rather not learn this whole new "box model"etc with this page, it is your choice, because it's your website. It's not ours.

    And No! I'm not saying make your page more traditional. It's definitly a neat design for a record label.

    All I'm saying is, your page is really not a good type of page to begin learning what deathshadow was talking about. So first, doing it his way, esp for the first time, is harder than what you were trying before (bouncing links aside). So no, I'm not going to blast you. I'm having trouble moving stuff around in your page too. deathshadow's been doing this for years and years and years. He's a Crusty Old Guy Who Knows Stuff.

    If anyone blasts you for not getting it on your first try, then they need to also help you with the page. So I meant it when I said Good Luck. And I'm also still dinking with your page because I've learned something new about floats I didn't know before.

    If you're a design-type (and your cool page makes it look like you are) you might like to browse [url="http://www.csszengarden.com]here[/url] to see an interesting project whose point was to have one HTML page, and let designers try to make different designs using only CSS. It isn't the best-written HTML page ever, and is actually a bit bloated so people could be more creative with it, but it's there to give a good idea what CSS and box model means to people who use it.

    May I PM you if I think I get your About page right? I will have it on my server to give you a link.
     
    Stomme poes, Oct 15, 2007 IP
  16. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #36
    that would be awesome.

    at this point i'm trying to make it sit well with safari, and to be somewhat friendly to 800/600 resolution.

    i didn't mean to come off harshly, i'm just being defensive because we have a few people behind this record label idea and for the most part i'm spending ALL DAY everyday learning and making code while they watch movies and get drunk. TMI, i know, but it's just very frustrating to be pressured to have this done and find that on many levels it just isn't a sound page to work with.

    but overall i think this is a fine experience. it's like sudoku with a little bit of russian roulette mixed in.

    but anyway, yeah, anything you do with the page i'd be honored for you to offer some suggestions.
     
    mlg5454, Oct 16, 2007 IP
  17. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #37
    why did deathshadow choose to use top padding for the goat_nav links? i don't really see how that's necessary, then again i rarely use padding at all...
     
    mlg5454, Oct 16, 2007 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #38
    ^probably to push them down.

    Try adding yo your css for the #goat_nav either (temporarily)
    border: 1px solid red;
    or
    background-color: red; <--- considered the better choice
    and you'll see that the top of the goat nav is still touching the top of the page.

    With positioning, it's like Perl: There's More Than One Way To Do It.


    Also, if you decide you'd like to keep building webpages, here's a great book (check the library): Build Your Own Web Site The Right Way with HTML and CSS by Ian Lloyd.
    That book sure answered a ton of my questions, and you learn by building an actual site. The positioning section's pretty short, but gets the basics across. It also helps explain what deathshadow means about flow (letting the order of the html do as much positioning work as possible).
     
    Stomme poes, Oct 17, 2007 IP
  19. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #39
    at this point i think i get it, actually...

    when i look at most pages now, compared to mine, it seems simple.

    header at top. header has a list. list is inline. list is the nav bar for the site.

    two or three divs floating in the center. left has some nav stuff, usually lists, maybe some images, etc. center or right has content. right has other nav stuff.

    footer has contact info and other legal mumbo jumbo.

    the divs are generally NOT specific widths or heights, but their min-width are 800px, and 600px of height of what you first see on the page is what you'd want the viewer to see, meaning that nothing is missed out on. everything flows vertically.

    i think i get it. we just chose a funky design and so it's hard to work with, and it makes conventional web designers/coders not want to take it seriously because, for one, what should be at the top of the page is at the bottom.

    we may re-design the whole thing, but we have a pretty highly anticipated album coming out in two weeks so i've been rushing to do this thing...
     
    mlg5454, Oct 17, 2007 IP
  20. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #40
    k. a challenge.

    [​IMG]

    how should i go about those circles at the bottom being nav buttons?

    i originally was going to this:

    <ul id="circlelist">
    <li class="circles">myspace</li>
    <li class="circles">library</li>
    (etc)
    </ul>

    then for css

    #circlelist (positioning stuff, display inline maybe?)

    li.circles {

    background image of the circles

    }

    but the problem, although that would have been clever, is that the link couldn't be the list item, it would have to be the text inside, but i want the entire circle to be the link...

    so i'm thinking that i'm just going to have to make the circles with the text inside AS images, then make the images links... and have all the images float next to each other... ugh... any advice?
     
    mlg5454, Oct 19, 2007 IP