SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Damn you CSS!!! How is this done?

    I've spent about a day trying to work out how to do this in CSS:



    Any ideas? So far I've gone with a main div, two divs inside (logo and right) with them both floated to the left, and then the same again with the right hand div - 3 floats (advert, cart, search), then the breadcrumb

    I can get the layout perfect........ without any borders!!! :-(

    putting borders on the actual divs screw with the size in IE (box model problem), nesting a p tag inside with the border works fine.. although when I cant use any padding inside the boxes!!! grrrr!!!!!

    any ideas on the best way to do this without using tables? - the above picture uses tables! :-(

    Thanks

  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This can be done with some nested divs and some simple box model hacks.

    You will need one major container for everything, then you will need 2 containers below that to hold the 'hello' picture and then to hold the 'advert' 'cart' 'search' and 'breadcrumb' items.

    Then in that right container with the 'advert' 'cart' 'search' etc. items you will need two more sub containers to seperate 'advert' 'cart' 'search' items from the 'breadcrumb' item.

    In the 'advert' 'cart' 'search' container you will need three more containers to hold each of those items. If you want to add padding or margin to any of these items you will need to wrap them in an additional container to add padding.

    Finally you will need a container for the 'breadcrumb' item as well.

    Chances are you will need to add hacks for any element that you add a width value for, it's a pain, but it's probably the best way to get the design to work in every browser.

    Maybe Paul will have a better suggestion.

  3. #3
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...and i thought css simplified the styling of pages... adding so many nested divs is no better than just using a table....

    but might wait and see if paul has a suggestion, he seems to be the forefront on css guidance :-)

    do you think though, that this sort of css is stable enough to be used on a client site?!?!

  4. #4
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's true that the nested div option is pretty messy, but it gives you the best chance of having the site display properly in as many platforms as possible.

  5. #5
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wayne Luke
    ------------


  6. #6
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is a little more help. Haven't checked it in anything but IE 6.0 SP2 or Firefox 1.0PR but gives you something to work on...

    HTML Code:
      <head>
      <link rel="stylesheet" type="text/css" href="template.css">
      </head>
      <body>
      <div id="header">
        <div id="logo">Logo</div>
        <div id="head">
      	<div id="search"><p>Search Stuff Here</p></div>
      	<div id="cart"><p>Shopping Bag<p></div>
      	<div id="advert"><p>Advert Here</p></div>
      	<div id="breadcrumb">You Are Here: Home &raquo; Some Page</div>
      	<br class="spacer">
        </div>
        <br class="spacer">
      </div>
      </body>
    Here is the CSS:
    Code:
      #header {
      	width:750px;
      }
      
      #head {
      	width: 547px;
      	float:left;
      }
      
      .spacer {
      	clear:both;
      	line-height:1px;
      }
      
      #logo {
      	float:left;
      	width: 200px;
      	height: 200px;
      	border: 1px solid #F00;
      }
      
      #search, #cart, #advert {
      	float: right;
      	width: 150px;
      	margin: 10px;
      	height: 150px;
      	border: 1px solid #aaa;
      }
      
      #search p, #cart p, #advert p {
      	text-align:center;
      }
      
      #breadcrumb {
      	clear: both;
      	margin-left: 4px;
      	padding: 3px;
      	border: 1px solid #FFFFF0;
      	background: #640032;
      	color: #FFFFF0;
      	width: 95%;
      }
    I am sure that Paul's solution would probably be more elegant since I am a rather neophyte with this kind of layout.
    Wayne Luke
    ------------


  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I saw my named mentioned so I thought I better reply

    You didn't say whether the layout was fixed or fluid. If its fixed then something like waynes solution will work fine and looks pretty straight forward and just as easy as tables.

    You can cater for the box model in ie by using the star selector hack or by nesting divs etc. It depends on how clean you want the html and how dirty you want the css. (see the faq sticky thread for some more info.)

    If you want a fluid layout the you will have to understand that floats don't work like tables and will drop when theres no room.

    If you want table behaviour for those three divs and for them to be fluid without dropping then slip in a small three cell table. Its no crime

    Personally I would just float them but it all depends on what you want the design to do.

    If its fixed width design then its a simple matter of placement. I didn't offer any code as Waynes code is along the same lines and just a matter of tweaking the sizes to suit.

    Paul

  8. #8
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its a fixed design. Yeah, waynes solution is pretty much what I had. Though the issue I'm getting is the padding and borders of each of the elements. I guess I'm going to have to go with a box model hack to solve this.

    Cheers :-)


    Off Topic:


    Paul: Just noticed ur from Hampshire in the UK!!! me too!!! I'm off travelling in a month and need to find someone local to portsmouth to deal with a client of mine while I'm away, if you're interested in some, html,php,css worky pm me :-)

  9. #9
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok is this me being stupid, or does setting the doctype as strict do away with all the problems to do with the box model in IE!?!?! cause that is what I've now done and it works perfectly:


    HTML Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
     		"http://www.w3.org/TR/REC-html40/strict.dtd">
     
     <html>
     <head>
     <title>sdf</title>
     
     <style>
     
     body {
     	font-family: verdana;
     	font-size: 80%;
     }
     
     
     
     #header { width: 740px; padding: 0; text-align: left; }
     #logo {	width: 168px; height: 128px; padding: 0; float: left; margin-right: 20px; border: 1px solid #CCC; }
     #right { width: 550px; padding: 0; float: right; }
     
     #advert { margin: 0px 20px 20px 0px; }
     #cart {	margin: 0px 20px 20px 0px; }
     #search { margin: 0px 0px 20px 0px; }
     .headbox {
     	padding: 10px;
     	float: left;
     	border: 1px solid #CCC;
     	width: 148px;
     	height: 58px;
     }
     
     
     #breadcrumb {
     	width: 528px;
     	height: 28px;
     	padding: 0px 10px 0px 10px;
     	border: 1px solid #CCC;
     }
     
     
     </style>
     
     
     
     </head>
     
     <body>
     
     
     <div id="header">
     	<div id="logo">logo</div>
     	<div id="right">
     		<div class="headbox" id="advert">advert</div>
     		<div class="headbox" id="cart">cart</div>
     		<div class="headbox" id="search">search</div>
     		<br clear="all" />
     		<div id="breadcrumb">breadcrumb</div>
     	</div>
     	<br clear="all" />
     
     </div>
     
     
     </body>
     
     </html>
    Albeit I cant get vertical-align working for the breadcrumb section!! doh!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its not strict that triggers standards mode but any full doctype with uri. Partial (or incorrect doctypes) without uri trigger quirks mode and so does adding the xml prologue.

    This only happens for ie6 so you still need to take care of ie5 and 5.5. I'm afraid.

    Paul

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Albeit I cant get vertical-align working for the breadcrumb section!! doh!
    Vertical align only works on inline elements (or table cells) and aligns the inline elements in respect to other inline elements on that single line. It does not align elements in repsect to a div or block level element.

    If your line is a single line and is not going to wrap then you can simply set the line-height to the same as the height of the div and the text will automatically be centred (doesn't work for images in ie).

    Hope that helps.

    Paul

  12. #12
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okey dokey, using a box model hack, I've solved the IE5/5.5 issue!! I cant believe how close this is to working across all the browsers!!!! Thanks everyone! especially paul!

    my last quibble though is, on IE 4 and 5, the breadcrumb div's border is not showing?!? but it is for everything else. and in IE 4, the breadcrumb text aligns to the right!??!. Obivously these are not major major issues, but would be nice to solve them.

    I was browsing the forums looking for browser statistics, does anyone know what percentage of peopel still use IE 4?!?! should I even bother with it?

    this is what I have now:

    HTML Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
     		"http://www.w3.org/TR/REC-html40/strict.dtd">
     
     <html>
     <head>
     <title>sdf</title>
     
     <style>
     
     body {
     	font-family: verdana;
     	font-size: 80%;
     }
     
     
     
     #header { width: 740px; padding: 0; text-align: left; }
     #logo {	width: 168px; height: 128px; padding: 0; float: left; margin-right: 20px; border: 1px solid #CCC; }
     #right { width: 550px; padding: 0; float: right; }
     
     #advert { margin: 0px 20px 20px 0px; }
     #cart {	margin: 0px 20px 20px 0px; }
     #search { margin: 0px 0px 20px 0px; }
     
     .headbox {
     	padding: 10px;
     	float: left;
     	border: 1px solid #CCC;
     	width: 170px;
     	height: 80px;
     	voice-family: "\"}\""; 
     	voice-family:inherit;
     	width: 148px;
     	height: 58px;
     }
     
     
     #breadcrumb {
     	padding: 0px 10px 0px 10px;
     	border: 1px solid #CCC;
     	width: 550px;
     	height: 30px;
     	voice-family: "\"}\""; 
     	voice-family:inherit;
     	width: 528px;
     	height: 28px;
     }
     
     
     </style>
     
     
     
     </head>
     
     <body>
     
     
     <div id="header">
     	<div id="logo">logo</div>
     	<div id="right">
     		<div class="headbox" id="advert">advert</div>
     		<div class="headbox" id="cart">cart</div>
     		<div class="headbox" id="search">search</div>
     		<br clear="all" />
     		<div id="breadcrumb">breadcrumb</div>
     	</div>
     	<br clear="all" />
     </div>
     
     
     </body>
     
     </html>

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is with the voice family hack and if you read the FAQ then you'll see that I don't recommend using it as it causes more problems than it fixes.

    In ie5 (in some cases) it causes the browser to miss the whole following style block and not just the styles in the same block.

    Therefor your breadcrumb style was missed completely.

    Use the star selector hack instead which is much more stable.
    Code:
     .headbox {
      padding: 10px;
      float: left;
      border: 1px solid #CCC;
      width: 148px;
      height: 58px;
     }
     * html .headbox{
       width: 170px;
      height: 80px;
      w\idth: 148px;
      he\ight: 58px;
     }
     
     #breadcrumb {
      padding: 0px 10px 0px 10px;
      border: 1px solid #CCC;
      width: 528px;
      height: 28px;
     text-align:left; 
    }
      * html .breadcrumb{
       width: 550px;
      height: 30px;
      w\idth: 528px;
      he\ight: 28px;
    }
    I don't have ie4 but I wouldn't bother supporting it anymore as it less than 1% of browsers. Maybe the fix mentioned above will work for ie4 as well anyway.

    Heres a link to some stats:

    http://www.thecounter.com/stats/2004...er/browser.php

    Paul


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
  •