SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and Layer design w/top nav?

    I am trying to make a template that has a few top elements. One is for the logo and search, one is for the navigation and the breadcrumb, and one is for page navigation.

    You can see the template in its current state here: http://aboutpcs.com/doc/template.html (this does not reflect any of my recent work on the template, it is just a good example of what I am talking about).

    The logo layer is #header, the nav and breadcrumb layer is #sections, and the page navigation layer is #info. Anyway, when I go to define #sections, I don't know exactly how tall #header is. I need to do something like this:

    Code:
    #section { 
      position: absolute;
      ...
      top: *height of #header*
    Otherwise, the background will show through. I'm "fixing" this right now by setting a huge border-top for #sections and #info, but there must be a better way.

    Thanks!
    Last edited by qslack; May 15, 2002 at 17:18.

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a little lost Quinn.

    Do you mean the #header height will vary?

    Now you've got the height of #header set to 48px. Setting the #sections @ top:48px will bring it flush up w/ #header.

    Is that it or am I completely misunderstanding the problem?

  3. #3
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works fine for me personally, in IE6 with the Medium text size. As soon as I change to another text size, it either covers up parts of #section or shows a big white gap in between #sections and #header.

    Also, not all browsers render documents exactly the same down to the pixel. So what is 48px in IE might be 45px in Opera or Moz because all browsers handle text differently.

    I think I have come up with a solution, but I am not quite sure. It works, but I've heard that you should always use "position: absolute" in all of your layer styles.

    The way it works is to not specify any locations, just let them be displayed one after another. So instead of setting it to "top: 0px; left: 0px;," I would turn absolute positioning off and let them display in the order the HTML code specifies. Since I define the header layer first in my HTML code, it would show up first, and so on.

    But is this fundamentally wrong?

  4. #4
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erk good question

    I've only just started playing with CSS positioning so I have no idea what best practise for something like that is, but you may find the css-discuss mailing list useful. It's run by Eric Meyer (the guy who writes all those books on CSS + runs CSS/Edge) and has a whole host of CSS experts on it. Subscription info + archives are available online here: http://two.pairlist.net/mailman/listinfo/css-discuss

  5. #5
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I think I get it know

    You're on the right track.

    If no value is assigned for position, the defualt is static. From the w3c:

    "The box is a normal box, laid out according to the normal flow. The left & top properties do not apply."

    So, just place the <div>'s one after another in the document and remove the height declaration so the div's will resize according to the text size (for more pixel perfect control use fixed font sizes). The spacing between the div's will be dependent on the margin prop's of the div's. I don't think you need to nest the #info either, just place it after the #sections in the doc flow.

    HTH

  6. #6
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay. I thought for some reason that it was best to use position:absolute. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •