Results 1 to 9 of 9

Thread: CSS help needed

  1. #1
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750

    CSS help needed

    I'm re-writing a companies website that currently uses tables to layout everything in the browser. I'm moving everything over to CSS.

    I've run into a problem with the tabbed navigation located at the top of the screen.

    Basically I have a table that looks something like this:
    Code:
    <table width = "100%"><tr>
    <td width="50"><img src="start.jpg"></td>
    <td background="tab_not_selected.jpg">Option A</td>
    <td background="tab_selected.jpg">Menu Option B</td>
    <td background="tab_not_selected.jpg">Option C</td>
    <td background="tab_not_selected.jpg">Option D</td>
    <td width="50"><img src="end.jpg"></td>
    <td><img src="filler.jpg"></td>
    </tr></table>
    How can I convert this to div's that use CSS?

    I have everything working except the darn filler.jpg. This is supposed to fill the remaining width of the table with the filler.jpg image. However in the CSS version, I can't get this div fill in the remaining horizontal space. Also, the text in each tab is not padded properly across all different browsers. If I look at my results in IE they are fine, but broken in Firefox. If I fix it for Firefox then IE is broken.
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  2. #2
    Join Date
    Jun 2002
    Location
    Atlanta
    Posts
    140
    Most navigation is in an un-ordered list <ul>.

    You can either treat the <ul> tag as a block level element (which it already is) and define the dimensions needed to apply your background image via CSS. Or just place the <ul> in a <div> (but it's not really needed.) Then just float your <li> tags left to make the list horizontal. You'll need to apply CSS for padding and margin for your <a> tags at a minimum.

    Here's a crude example.

    Markup:
    Code:
    <ul class="myNav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
    </ul>
    CSS:
    Code:
    ul.myNav {margin:0; padding:0; height:25px; background:url(filename.jpg) repeat-x;}
    ul.myNav li {float:left;}
    ul.myNav li a {padding:5px 10px;}
    Once the base structure is done, you can apply CSS hover to replace the background when a user mouses over the <a>.

    If you want more functionality for navigation menus, search for Suckerfish Menus and also check out A List Apart.

  3. #3
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    I don't believe I can achieve what I need with the ul tags and here is why.

    I need the navigation region to fill the entire width of my screen.
    Code:
    [start image][tab 1][tab2][tab3][ <---------------- filler ---------------->]
    If the page is sized to be smaller then the navigation's filler should compensate like so
    Code:
    [start image][tab 1][tab2][tab3][ <--------- filler ---------->]
    I can't seem to figure out how to get the filler to behave properly.

    All the tabs sections I've defined as Div's that float left. If I leave he filler as is (no float) then it does what it is supposed to, HOWEVER I can't get the image to display just between tab3 and the right side of the screen. If I place a background image into the filler then it starts at the left edge of the screen and extends the full width (because filler does not float left!)

    If I make the filler float left, then the background image doesn't fall inbehind the tabs BUT then I can't get the width to dynamically size so that it fills all the space from tab3 to the right side of the screen.

    I also just noticed another problem, If the window size is reduced so that the right side is between tab2 and tab3 then my entire navigation area breaks down and wraps into two lines.

    What a headache! This was so much easier with just a table!
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  4. #4
    Join Date
    Jun 2002
    Location
    Atlanta
    Posts
    140
    Actually, the navigation can do that in pure HTML/CSS without the use of tables. However, when playing with relative units in HTML/CSS you need to define Maximum and Minimum values. Otherwise, you will run into the wrapping issue no matter how small a user will make their browser.

    One thing about using tables for navigation, if ever you need to convert from horizontal to vertical, you must re-write the entire code. With this method, you can just edit the CSS (maybe about a few params only need changing, such as removing the float). Also, with Specificity, you can have the same navigation markup using different CSS altogether.

    CSS really isn't difficult. You just need patience and trial and error. Once you get it, you'll never want to use tables except for tabular data due to the versatility CSS allows. (It also helps to use any of the latest browsers as they all have developer tools that allow you to view the rendered code and see how/what styles are being applied.)

    Below is the code needed. (Keep in mind this won't properly work in IE6 as it doesn't support min-width and max-width. For that, you'll need JS.)

    You can see the markup is nearly next to nothing. Everything is getting applied via the CSS. I've highlighted the navigation parts in Green. From the CSS, you can see that the site ID has a specified minimum and maximum width. (Though, you probably don't need the max-width.) When a user re-sizes their browser below the 250px threshold, the contain (site ID) will retain it's width and apply a scrollbar to the browser.

    Keep in mind, when using floats, you must clear your floats. So you can see in the siteBody ID, I am clearing the float. This is done to ensure that content does not flow into any previously floated element. (Floats remove the element from the normal HTML flow. Clearing them, fixes this.)

    Also, note the height on the <ul> This value you may have to play with to get right, as a lot is dependent on your font size for the navigation.

    Anyway, Copy and Paste this code in a text editor and save it as an HTML. Then load it in your browser. (I've tested in IE7/8 and Firefox 3.5.)

    I've placed a section of IE conditional code. This is very useful when you have discrepancies in the render from the Gecko/WebKit (FireFox/Chrome) engines to Trident engine (IE).

    Hope that helps!

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Menu Example</title>
    
    <style type="text/css">
    body {background:#eee; font:12px Arial, Helvetica, sans-serif;}
    #site {min-width:250px; max-width:95%; border:1px solid #060; padding:1em; background:#fff; margin:1em auto;}
    
    #header {margin-bottom:1em;}
    #header h1 {margin:0; padding:0;}
    #header ul.nav {margin:0; padding:0; list-style:none; background:#695; height:25px; border:1px solid #060;}
    #header ul.nav li {float:left;}
    #header ul.nav li a, 
    #header ul.nav li a:link, 
    #header ul.nav li a:active, 
    #header ul.nav li a:visited {padding:5px 20px; color:#ff3; text-decoration:none; border-right:1px solid #060; display:block;}
    #header ul.nav li a:hover {background:#eee; color:#069;}
    
    #siteBody {clear:left; margin-bottom:1em;}
    #footer {background:#eee; border-top:1px solid #666; clear:left;}
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    /* IE Specific Styles Here (if needed) */
    </style>
    <![endif]-->
    
    </head>
    
    <body>
    
    <div id="site">
    
    <div id="header">
     <h1>Header</h1>
      <ul class="nav">
       <li><a href="#">Nav 01</a></li>
       <li><a href="#">Nav 02</a></li>
       <li><a href="#">Nav 03</a></li>
      </ul>
     </div>
    
     <div id="siteBody">Page content here.</div>
     <div id="footer">Footer</div>
    </div>
    </body>
    </html>

  5. #5
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    Thanks Incorporeal for the code snippet. I've modified it below to show why it does not work.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Menu Example</title>
    
    <style type="text/css">
    body { background: #fff; font:12px Arial, Helvetica, sans-serif;}
    a { text-decoration:none;}
    
    #site {min-width:250px; max-width:95%; border:1px solid #060; padding:1em; background-image:url(body_bg.jpg); margin:1em auto;}
    #header {margin-bottom:1em;}
    #header h1 {margin:0; padding:0;}
    #header ul.nav { margin:0; padding:0; list-style:none; background-image:url(bg_image.jpg);background-position:right 50%; height:25px; }
    #header ul.nav li { float:left; background-image:url(tab.gif); }
    #header ul.nav li a, 
    #header ul.nav li a:link, 
    #header ul.nav li a:active, 
    #header ul.nav li a:visited { padding:5px 20px; display:block; }
    
    .tab { background-image:url(tab.gif);}
    .filler { background-image:url(bg_image.jpg); background-position:right 50%; width: 90%; }
    
    </style>
    </head>
    
    <body>
    <div id="site">
    
    <div id="header">
     <h1>CSS Layout</h1>
      <ul class="nav">
       <li><a href="#">Nav 01</a></li>
       <li><a href="#">Nav 02</a></li>
       <li><a href="#">Nav 03</a></li>
       <li><a href="#">Nav 04</a></li>
       <li><a href="#">Nav 05</a></li>
      </ul>
      
      <h1>Table Layout</h1>
        <table cellpadding="5" cellspacing="0" border="0" width="100%">
        <tr height="35">
          <td width="80" class="tab"><a href="#">NavOption_1</a></td>
          <td width="80" class="tab"><a href="#">NavOption_2</a></td>
          <td width="80" class="tab"><a href="#">NavOption_3</a></td>
          <td width="80" class="tab"><a href="#">NavOption_4</a></td>
          <td width="80" class="tab"><a href="#">NavOption_5</a></td>
          <td class="filler">Filler</td>
        </tr>
        </table> 
     </div>
    </div>
    </body>
    </html>
    To download the images and to view the page go to here: http://www.marek-knows.com/Misc/3dbuzz/

    Notice how in the table layout, the filler background image goes from the right side of Option 5 out to the right side of the screen. However in the CSS design, the filler images starts at the far left side of the screen and goes to the right side of the screen. This means that it falls in behind the tabs obscuring the transparency regions in the tabs.

    I can't figure out a way to make the filler work properly with CSS.
    Last edited by mmakrzem; 12-03-2009 at 05:39 AM.
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  6. #6
    Join Date
    Jun 2002
    Location
    Atlanta
    Posts
    140
    Something like this? (I've used your code, but removed the table and CSS related to it. I've also tried to highlight the edits.)
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Menu Example</title>
    
    <style type="text/css">
    body { background: #fff; font:12px Arial, Helvetica, sans-serif;}
    a { text-decoration:none;}
    #site {min-width:550px; max-width:95%; border:1px solid #060; padding:1em; background-image:url(body_bg.jpg); margin:1em auto;}
    #header {margin-bottom:1em;}
    #header h1 {margin:0; padding:0;}
    #header .navCap {width:125px; height:25px; float:right; background:url(navBarCap.jpg) no-repeat right center;}
    #header ul.nav { margin:0; padding:0; list-style:none; height:25px; background:url(navFill.gif) no-repeat 390px 0; }
    #header ul.nav li { float:left; background-image:url(tab.gif); }
    #header ul.nav li a, 
    #header ul.nav li a:link, 
    #header ul.nav li a:active, 
    #header ul.nav li a:visited { padding:5px 20px; display:block; }
    </style>
    </head>
    
    <body>
    <div id="site">
    
    <div id="header">
     <h1>CSS Layout</h1>
     <div class="navShell">
     <div class="navCap"></div>
      <ul class="nav">
       <li><a href="#">Nav 01</a></li>
       <li><a href="#">Nav 02</a></li>
       <li><a href="#">Nav 03</a></li>
       <li><a href="#">Nav 04</a></li>
       <li><a href="#">Nav 05</a></li>
      </ul>
      </div>
     </div>
    </div>
    </body>
    </html>
    I'm not sure why the background should not be behind the tabs though.

    Anyway, here's what is going on:
    I've placed the <ul> in it's own container (<div>). Just before the <ul> is rendered, I float a <div>, or a "cap", to the right. This is your red to white gradient. Then, in the <ul>, I just position the background over 390px to the left. Since I'm using an image larger than 1800px wide, any broswer will display it up until that point plus the cap before you see a gap. Important is that it mustn't repeat. Otherwise, it will just go behind the tabs again. So that "cap" is just sliding on it's own as a user re-sizes the browers. This is known as a "Sliding Doors" technique. In the end, you can see I just added/modified about 2 or 3 lines of markup and CSS to achieve your goal.

    Since it's not allowing me to upload the 2 images, take your red to white image and make 2 images. Using the far right at 125px image ("navBarCap.jpg") and whatever is left for the "navFill.gif".

    If you wanted to move that red "filler" part slightly behind the last tab, you would then adjust the background's position from 390px to something like 380px. Do keep in mind this value works with the current dimensions. If your tabs also incorporate the "Sliding Doors" technique, you would then need to compensate for the shift in dimensions. "Video Games" is longer than "Toys" for a tab.

    There's probably another way to do this with absolute positioning as well, but this was the simplest. To me, CSS is easy. The only difficult part is which technique to use as you can implement things differently to get the same results. It does take practice/trial and error to really get things down.

    Anyway, hope this helps!

  7. #7
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    this is awesome Incorporeal, thanks!
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  8. #8
    Join Date
    May 2004
    Location
    UK
    Posts
    709
    Hey, I haven't read the entire thread, but your filler can just be a background image, tiled in X on a containing div for your top nav... Your left floated buttons would then sit over the top of that, and the filler would always work no matter the width of the top nav...

    Cheers

    Mat

  9. #9
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    Quote Originally Posted by Mat_Brummitt View Post
    Hey, I haven't read the entire thread, but your filler can just be a background image, tiled in X on a containing div for your top nav... Your left floated buttons would then sit over the top of that, and the filler would always work no matter the width of the top nav...
    As I mentioned above, I don't want my filler to run in behind the floating buttons. I only want it to be to the right of the buttons. Also, I do not want to tile the floater image since it would then look incorrect. Incorporeal's solution seems to be the only thing that works without using absolute positioning.
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

Posting Permissions

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