www.webdeveloper.com
Results 1 to 9 of 9

Thread: CSS Liquid header problems

  1. #1
    Join Date
    Dec 2006
    Posts
    12

    CSS Liquid header problems

    Hi, for ages now i've been trying to create a header that i am satisfied with and have been having some major problems.

    I'll start off by explaining what i want. I'd like a 5 column header, the outer 2 columns expanding/contracting based on the browser width. The inner 2 columns need to be a fixed width of around 8%. The central column needs to contain an image 480px wide and display the entire image no matter what the browser size is.

    After trying hundreds of different things this is the best i have so far at http://www.cjd.galekus.com/header/headertest.php.

    The stylesheet can be found at http://www.cjd.galekus.com/header/styles.css.

    The problem is this doesn't display quite how id like in either FF or IE.

    In FF it looks like this:
    http://i18.photobucket.com/albums/b1...g?t=1182865967
    And in IE like this:
    http://i18.photobucket.com/albums/b1...g?t=1182865979

    If you've read through all that i'd really appreciate some help in fixing this v. annoying problem. Thanks.

  2. #2
    Join Date
    Jan 2007
    Posts
    64
    I think you are trying to over complicate things.

    Is there and reason to have the right and left header? If they are just going to be void spaces I would scrap them and have your header 3 divs. Then just text-align right/left for each navigation div.

    But this doesn't solve your issue...

    Also I see you have a #header_container{ in your style but there is no div of that name in your html. As this is styling your header to be 100% width this may be your issue.

    I dont really have time at the moment to test anything but ill try to have another look tonight!

  3. #3
    Join Date
    Dec 2006
    Posts
    12
    Right, well i've switched to a 3 column layout now (thanks for suggesting that, makes much more sense). But im still at a loss as to how to get a nice fluid layout.

    Just to reinterate im looking for one fixed central column and two fluid outer columns.

    Thanks again docpepper

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Make the banner a single div with the logo as a background image. Put the navs into the banner floated left and right. Use clear:both on the content. Oh, and menus are lists of links.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Dec 2006
    Posts
    12
    Quote Originally Posted by ray326
    Make the banner a single div with the logo as a background image. Put the navs into the banner floated left and right. Use clear:both on the content. Oh, and menus are lists of links.
    Do you think you could elaborate a bit? I don't really understand what you're saying. Thanks...

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    What's not clear? Here's a skeleton.
    HTML Code:
    <div id="banner">
      <div id="leftnav">
        <ul><li><a href="#">link</a></li></ul>
      </div>
      <div id="rightnav">
        <ul><li><a href="#">link</a></li></ul>
      </div>
    </div>
    <div id="content">
      <p>lorem ipsum</p>
    </div>
    <div id="footer">foot stuff</div>
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  7. #7
    Join Date
    Dec 2006
    Posts
    12
    Sorry i'm hopeless at CSS.This is what i've got now.

    http://www.cjd.galekus.com/header2/headertest.php

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Take the img out of your #header and put it in the background.
    Code:
    #header {styles.css (line 20)
    background:black url(mainlogo.jpg) no-repeat scroll center;
    border:0pt none;
    height:100px;
    margin:0pt;
    padding:0pt;
    }
    Then make your left/right navs unordered lists.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  9. #9
    Join Date
    Dec 2006
    Posts
    12
    Thanks for all your help. With some modification i've finally got something i'm happy with and it displays correctly in both IE and FF!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles