SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Faux Column w/bg-color, not image

    Here's my problem, I want to have two divs side-by-side; one a sub-navigation, and the other the main section. The sub-navigation div will have a different background color than the main section. As I fill up the main section with text and images, I want the sub-navigation background color to continue flush with the bottom of the main section. The only way I've found to get this to work is through the use of a wrapper div to give the "illusion" that the sub-navigation continues. I've tested the html below, and it works in the newest Firefox, ie6&7. Except, it doesn't work in many netscapes, nor does it work in Firefox 1.0, or ie5. Is there a better way, or some sort of hack I can insert to make it more cross-browser compatible? I know the clearing isn't really meant to do this, so i've tried other different methods trying to fix the problem for ff1.0; but every attempt has resulted in the divs breaking, adding extra width to the table, or not continuing the faux column in various other browsers. Should I switch to a background image of the same color? Does it matter if I use a background color rather than a repeating background image as noted in ALA's famous "Faux Column " article?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    <title>Stretchable DIV Background-Color</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    /* Zeroing out useless prejudices */
    html,body,img,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,pre,form,blockquote,fieldset,input { margin:0px; padding:0px; }
    h1,h2,h3,h4,h5,h6,pre,code,kbd { font-size:1em; }
    :link,:visited { text-decoration:none; }
    table { border-collapse:collapse; border:0px; }
    ul,ol { list-style:none; }
    img { border:0px; }
    
    /* Normal CSS */
    .wrapper { width:760px; background-color:#96B6DA; margin-left: auto; margin-right: auto; color:#000000; }
    .header { background-color:#FFFFFF; color:#000000; }
    .navigation { background-color:#96B6DA; color:#000000; }
    .sub-header { background-color:#E60000; color:#000000; }
    .sub-navigation { width:200px; float:left; background-color:#96B6DA; color:#000000; }
    .main { width:530px; float:left; background-color:#E5EAF3; text-align:justify; color:#000000; padding:15px; }
    .fix { clear:both; }
    
    </style>
    
    </head>
    <body>
    
    <div class="wrapper">
    <div class="header">Header</div>
    <div class="navigation">Navigation</div>
    <div class="sub-header">Sub-Header</div>
    <div class="sub-navigation">Sub-Navigation</div>
    <div class="main">Filler text to make this div stretch, in hopes of making the "wrapper" background-color stretch, giving the illusion that "sub-navigation" is stretching</div>
    <div class="fix"></div>
    </div>
    
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, i just copied that into my file, uploaded it, and did a total validator scan to get a screenshot of IE5.

    It's doing the same thing it did before, whenever I tried to figure out a work-around; stretching the div more than the 760px-width preset. I've even tried using overflow-hidden but it still thinks it needs to stretch.
    Last edited by seasonedzeal; Aug 1, 2006 at 19:54.

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's what I wanted I thought; 15px padding inside the "main" div box. Is that the box your referring to when you said "inside the box?"

    wrapper-width: 760px
    sub-navigation-width: 200px
    main-width: 530px + 15px-padding(x2) = 560px
    200px + 560px = 760px

    Regardless whether IE5 thought the padding was inside/outside the box, the numbers still add up to within the wrapper div width. I thought I was getting around the box-model-hack by subtracting the padding from the main-width in the first place. I wanted the main-width to be 560px with a padding of 15px all around. Margins didn't work the way I wanted them to, so I used padding instead. 15px Left padding + 15 right padding = 30px-width total. 560px - 30px = 530px.

    I guess I don't fully understand the box model. I have to set the main-width in a separate css selector to override the box-model problem? The CSS-FAQ says that IE 5, 5.5, & 6 break the box-model when in quirks mode, but i define an xhtml transitional doctype, plus what i have right now works in ie6&7, just not 5.

    If I remove the clear-left, the div shrinks back to 760px-width, but doesn't continue the background-color illusion I wanted. As soon as I put in clear-left, the background color continues, but breaks the layout. It seems as though it's the clear-left that is causing trouble, not the widths of anything. I'd also think that overflow-hidden would remove the extra width that is being added that breaks the table, but that doesn't seem to do anything either. Perhapse I don't understand the connections between floats & overflows. Sorry if I come accross as ignorant, i'm trying to understand; lol.

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, that works perfectly on all the major browsers I tested. Now all I have to do is find the time to sit down & figure out why it works; lol. Someone asked me to recode (edited out); I re-coded the entire layout template with divs, and this hitch was all that was holding me back. The patch that you applied looks like it'll add more complexity to the classes I'm going to have to use, since there's going to be multiple padding-widths for P's & IMG's, for example on (edited out) page, but at least it works THANK YOU!
    Last edited by seasonedzeal; Aug 1, 2006 at 18:54. Reason: client-request to remove link!

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh nice, forgot about the universal selector; thanks.

  6. #6
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to let you know, I started fleshing out the detailed-layout, but realized that the classes were building up too much to keep the padding & margins aligned & working. So I ended up dropping the universal selector technique and the p-selector, to replace it with a nested div. For the newly-created nested div within the main-div, I also assigned a top & bottom padding. I double checked with browser screenshots & it didn't break the layout this time. I think this' the final code I'll use for the stripped template. I tested it and it still works on all major browsers, save netscape 4.8. If anyone notices any other pointers they'd like to make, feel free. Lastly, what's with the css warnings when it says that I need a background & color for each css selector? I've put some bg colors & regular colors in there even when its not needed. Is there any reason at all why the W3C warns against the lack of background colors & font colors? Can't I just set a global selector to do that, and remove all the duplicates where necessary?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    <title>Stretchable DIV Background-Color</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    /* Zeroing Out Browser-Prejudices */
    html,body,img,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,ut,pre,inp,form,blockquote,fieldset { margin:0px; padding:0px; }
    h1,h2,h3,h4,h5,h6,pre,code,kbd { font-size:1em; }
    :link,:visited { text-decoration:none; }
    table { border-collapse:collapse; border:0px; }
    ul,ol { list-style:none; }
    img { border:0px; }
    
    /* CSS Patch For Clear-Compatibility */
    .clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
    .clear { display:inline-block; }
    
    /* CSS Patch For Mac-Compatibility \*/
    * html .clear { height: 1%; }
    .clear { display: block; }
    /* End Mac-Patch */
    
    /* Centers Layout */
    body { text-align:center; }
    
    /* Normal CSS */
    .wrapper { width:760px; background:#96B6DA; margin:0 auto; text-align:left; color:#000000; }
    .header { background:#FFFFFF; color:#000000; }
    .navigation { background:#96B6DA; color:#000000; }
    .sub-header { background:#E60000; color:#000000; }
    .sub-navigation { width:200px; float:left; background:#96B6DA; color:#000000; }
    .main { width:560px; float:left; background:#E5EAF3; text-align:center; color:#000000; }
    .pad { width:530px; text-align:justify; background:#E5EAF3; color:#000000; padding:15px 0 15px 0; margin:0 auto; }
    
    .footer { width:760px; margin:5px auto 5px auto; background-color: #FFFFFF; color:#666666; }
    p#f1 { float:left; text-align:left; width:170px; }
    p#f2 { float:left; text-align:center; width:409px; }
    p#f3 { float:right; text-align:right; width:181px; }
    
    </style>
    </head>
    <body><div class="wrapper clear">
    
    <div class="header">Header</div>
    <div class="navigation">Navigation</div>
    <div class="sub-header">Sub-Header</div>
    <div class="sub-navigation">Sub-Navigation</div>
    <div class="main"><div class="pad">
    
    <p>Filler text to make this div stretch, in hopes of making the "wrapper" background-color stretch, giving the illusion that "sub-navigation" is stretching.<br /><br /><br /><br /><br /><br /><br /></p>
    
    </div></div>
    </div>
    
    <div class="footer">
    	<p id="f1">footer-one</p>
    	<p id="f2">footer-two</p>
    	<p id="f3">footer-three</p>
    </div>
    
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish i could use H's semantically; but the header, navigation, sub-header, and sub-navigation are all going to be image-based with alt tags. Further, the navigation & sub-navigation are going to be rollover-images because it's not a web-safe font. What's your thoughts on web-safe fonts; If I remember correctly, the designer who originally made the layout used a type of Myriad for the navigation images; here's an example of one of the rollovers.

    Though, H's are shorter, less code, and more easily allow the possibility to change the images to headers, if in the future that decision is made. Would that make a difference with SEO if I put the header IMG with alt-text in a H1, rather than a DIV?

  8. #8
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, cool. ill have to look into that. I was originally going to use a dom-rollover file that uses a class-selector for the ro-effect, but if i can use a css background-ro with a link attatched to each, within UL-LI's, with -1000em-indented text, that'd be perfect for seo, speed & degradability; thanx.


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
  •