SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making footer stretch width of viewport

    hi,

    how can i get my footer to stretch the width of the viewport? I have tried width:100% but it doesnt work.

    It can be seen at:http://www.alphatest.co.uk

    the css is as follows:

    Code:
    /* CSS Document */
    /* to get the secondaryNav the same as the main nav width you need to find out what 23% (it was 23% instead of 25% to give 2% gutter) of the content area is. You do this by dividing 23 by 75 and then multiplying by 100. For padding add in %. this may have to be a guess at first, but what ever you add in padding take away in overall width in %*/
    body{
    margin:0;
    padding:0;
    /*background:url(c2_images/corp2_back.gif) repeat-x;*/
    background:#ccffff;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    #wrapper{
    width:90%;
    max-width:1100px;
    margin:2% auto;
    background: #ccffff; /*this used to be e5e5e5 */
    
    }
    
    .wrapper{
    width:100%;
    background-color:#cccccc;
    background:url(c2_images/bigwrap_bl_shad.jpg) no-repeat left bottom;
    }
    
    .wrap_outer{background:url(c2_images/bigwrap_br_shad.jpg) no-repeat right bottom;
    }
    
    .wrap_inner{background:url(c2_images/bigwrap_tl_shad.jpg) no-repeat left top;
    }
    
    
    #header{
    width:98%;
    height:22%;
    background:url(c2_images/bigwrap_tr_shad.jpg) no-repeat right top;
    overflow:hidden;
    padding-top:2%;
    margin-left:1.9%;
    margin-bottom:2%;
    }
    
    #header img{overflow:hidden;}
    #logocover{float:left; }
    #logohead{float:left; width:31%; margin-left:2%; padding:7px; height:22%;}
    #logohead h1{color:#993333; font-family:Arial, Helvetica, sans-serif;}
    #logopic{float:right; margin-right:1.3%;   }
    
    #mainNav{
    float:left;
    width:16%;
    background-color: #0099CC;
    margin-left:4%;
    margin-top:2%;
    }
    
    
    #mainNav li{list-style:none; color:#FFFFFF; }
    
    #mainNav  ul{
    margin:0;
    padding:0;
    list-style: none;
    }
    
    #mainNav ul a:link, #mainNav ul a:visited  {
    display:block;
    text-decoration:none;
    text-indent:25px;
    width:120px;
    height:39px;
    border:#0099cc;
    line-height:39px;
    color: #ffffff;
    background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
    }
    #mainNav ul a:hover, #mainNav ul a:active  {
    color: #FFFF00;
    background:#0099cc; background:url(c2_images/button_over.gif) no-repeat left top;
    border:#0099cc;
    }
    
    
    #content{
    float:left;
    width:76%;
    background-color:#ffffff;
    margin-right:4%;
    margin-top:2%;
    }
    #content h2{color:#333333; text-align:center;}
    
    #mainContent{
    float:left;
    width:59%;
    background-color:#996600;
    padding-top:30px;
    padding-left:3%;
    padding-right:3%;
    
    }
    
    #secondaryNav{
    float:right;
    margin:auto 0;
    width:29%;
    padding-right:1%;
    background-color:#FFFFff;
    
    }
    
    #latestnews{
    float:left;
    max-height:300px;
    max-width:170px;
    min-width:170px;
    /*margin:15px 0 0 0;
    padding: 5px 0 5px 0; */
    
    }
    
    .latestnews{
    width:100%; background:url(c2_images/sidebox_bl.gif) no-repeat left bottom;}
    
    .ln_outer{background:url(c2_images/sidebox_br.gif) no-repeat right bottom;}
    
    .ln_inner {
    background:url(c2_images/sidebox_tl.gif) no-repeat left top; padding-left:10px;}
    
    
    
    #latestnews h3{
    background:url(c2_images/sidebox_tr.gif)  no-repeat right top; text-align:center; padding-top:13px; padding-bottom:10px; color:#993333;}
    #latestnews p{width:145px;  font-size:12px; padding-left:8px; padding-right:8px; padding-bottom:15px;  color:#666666;}
    
    #footer{
    clear:both;
    padding:4px;
    background-color: #999999;
    height:40px;
    }
    #footer p{font-size:10px; color:#FFFFFF; line-height:10px;}
    
    
    #footer a:link, #footer a:visited  {
    display:inline;
    line-height:10px;
    text-decoration:none;
    color: #ffffff;
    font-size:10px;
    background:none;
    }
    #footer  a:hover, #footer a:active  {
    display:inline;
    line-height:10px;
    color: #FFFF00;
    font-size:10px;
    background:none;
    }
    thanks for your help

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Take it out of the wrapper and place it underneath the wrapper. By default the div will fill the allotted space. For IE6 you may need to give her haslayout (width 100&#37

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Your CSS ID='wrapper' is opened on line: 11 but not closed. Close it before your footer script.

    Your footer is within this "wrapper".

    Your site is also using the CSS ID='lastnews' twice, better to rename one of the identifiers before it comes back to bite you

    Take a look at Firefox addon "HTML Validator 0.8.6.1"

    Partial screen-dump




    .
    Last edited by John_Betong; Mar 17, 2010 at 06:54. Reason: spelling
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  4. #4
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys spot on

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Why not populate the alt='whatever' and make your "lastnews" into a class and your page will then validate?

    screen dump

    Validation
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  6. #6
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your right i should put the alt in anyway.

    I already have a latestnews class. So I think I shall create a latestnews1 class.

    cheers


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
  •