SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Measurements Incorrect?

    Hi,

    i have the following div heigh measurements for my web page:
    wrapper: 1500px;

    header: 100px
    navigation: 50px

    content: 1350px - emcompasses the next 3 divs
    pagedesc: 100px
    imagecontent: 1200px - used to display images as thumbnails
    footer - 50px

    On paper they calculate fine, however, after i have impletemented this in real life, i notice that with regards to my content div, it seems to grow in height by almost 50px forcing my footer to drop slighly lower down to the page and not taking affect of my footer details e.g background-color.

    One thing i tried to experiment with was the content div, I tried to decrease the size of my heigh to 1250px but by doing so it revealed my footer but css used the background color of my wrapper to somehow overlap it making the background color red and completely disregarding my footer details.

    Please help if you can.

    html test file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    	      <title> Shanghai Trip 2010</title>
    	      <link rel="stylesheet" type="text/css" href="style_V1.css" />
    		
    	      <meta http-equiv="content-type"
    				content="text/html; charset=utf-8"/>
    	</head>
    	<body>
    	      <div id="wrapper">
    		     <div id="header">
    			    <h1> SHANGHAI TRIP 2010 </h1>
    		     </div> 
            
    		     <div id="navigation">
    			    <ul>
    				   <li><a href="index.php?link=home">Home</a></li>
    				   <li><a href="index.php?link=shanghaizoo">Shangai Zoo</a></li>
    				   <li><a href="index.php?link=chengtemple">Cheng Huang Temple</a></li>
    			    </ul>
    		     </div>
    		     
    		     <div id="content">
    			    
    			    <div class="pagedesc">
                        <p>
                                              
                        </p>
       
    			    </div>
    			    
    			    
    			    
    			    <div class="imageswrapper">
    			             
    			    </div>
    			     
    		     </div> 
            
    		     <div id="footer">
    			    FOOTER
            
    		     </div> 
    	      
      
    	      </div>
    		 
    			 
    			  
    		    
    		 
    	</body>
    </html>
    Code CSS:
     
    /*
     Date created: 7th October 2010
     Last Modified: 7th October 2010
    */
    body
    {
        background: #f3f2f3;
        color: #000000;
        font-family: Trebuchet MS, Arial, Times New Roman;
        font-size: 12px;
     
    }
     
    #wrapper
    {
        background: red;
        /* first value represents top/bottom, while second represents left/right margin */
        margin: 0px auto; 
        width: 900px;
        height: 1500px;
    }
     
    #header
    {
        background: #663300;
        width: 900px;
        height: 100px;
    }
     
     
     
    #navigation
    {
        overflow: hidden;
        background: #3366CC;
        width: 900px;
        height: 50px;
    }
    #navigation ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
     
    #navigation li
    {
        display: block;
        float: left;
        padding: 2px;
     
    }
     
    #content
    {
     
        background: #993300;
        width: 900px;
        height: 1350px;
    } 
     
     .pagedesc
    { 
        width: 900px;
        height: 100px;
        font-size: 14px;
        padding: 1px;
        background-color: blue;
     
    }
     
    .pagedesc p
    {
        margin: 0;
        border: 0;
        padding: 0px;
     
    }
     
    .imageswrapper
    {
        margin: 0;
        border: 1px solid #330066;
        height: 1200px;
        width: 900px;
        overflow: hidden;
        text-align: center;
        float: left;
    }
     
     
    .thumb
    {
        margin: 3px;
        border: 1px solid #ff8000;
        padding: 0px;
        height: auto; 
        text-align: center;
        float: left;
    }
     
    .thumb img
    {
       display: inline;
        margin: 5px;
        border: 1px solid red;
        padding: 0px;
     
    }
     
    .thumbdesc
    {
        text-align: center;
         border: 1px solid black;
    }
     
     
    .footer
    {
        background: blue;
        height: 50px;
        width: 900px;
     
    }

    The page is not on the web as it is not finished but if you wouldn't mind simply copying and pasting the code onto your editors, you will see what i mean

    Thanks

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your footer is #footer in the markup and .footer in the css. so a class selector is no match for an id attribute

    and i've looked at the computed style for the #content in ch, ie, ff and it's saying 1350px

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

    You haven't takes into account padding margins or borders into your calculations.

    There are default margins on most elements which may upset your calculations but you have also added padding and borders to elements without decreasing their width or height correspondingly.

    However, you should not be designing like that anyway as you shouldn't set height on content areas. The content should dictate the height and not some arbitrary figure that you throw at it.

    Remove the height from your main content elements and let the grow with content. In that way users can resize text without breaking the page and you can add or remove content without having to change the css.

    You will very rarely use height on content areas like that.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    What Paul said is pretty much spot on. Your dictating heights for the content area is just as bad as your not declaring line-height or worse, the use of PX fonts on body pretty well throwing accessibility right out the window!

    It also doesn't help that you are stating widths over and over again for no good reason... or that you have div -- like #header -- which are completely pointless (since you could just style the h1 directly) or the extra DIV around #content.

    Though it's hard to tell what markup you should have without actual content inside it. In particular .pageDesc and .imageswrapper are hard to fathom the point of at this point.

    I would get a CSS reset in there so cross-browser design is simpler, remove the 900px width declarations off everything except #wrapper as being COMPLETELY pointless (since block level tags auto expand to whatever they're inside!), lose the 1500px fixed height as bad design practice, probably lose the fixed height on the navigation too, getting rid of the DIV's around the h1 and UL as pointless, get rid of the PX metric fonts at the very least on BODY and the content areas, etc, etc, etc...

    Bottom line is you've got more markup than you probably need, and are declaring widths and heights on things that shouldn't need widths on them and fixed heights are a bad idea.

    You may also want to try using consistent single tabs instead of the odd-ball willy nilly spacings.


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
  •