SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Controlling width of footer....

    How do I control the width of the footer in the following:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab, 
    searchcoil, Western and Eastern, Recovery, Research">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Inquisitive Eye</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <style type="text/css">
    
    
    body {
    	background: black;
    	font-size:100%;
        
    	margin:0;
    	padding:0;
    }
    #container {
    	width: 95%;
    	min-width:990px;/*keep BG color from stopping short*/
    	background: black;/*header BG color moved to here*/
    }
    #header {
    	width: 990px;
    	text-align: center;
    	margin:0 auto;/*center it up in the container div*/
    	padding: 100px 0;
    	color:#000;
    }
    #header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
    	clear:both;
    	 
    	display:block;
    	height: 0;
    	font-size:0;
    }
    #header img {
    	float:right;
    	border:4px solid 000;
    }
    #sidebar {
    	width: 12em;
    	font-size:40px;
    }
    #MainContent {
    	background: #FFA07A;
    	margin-left:5em;
    	margin-right:5em;
    	padding:10px 20px 0 1em;
    }
    /*=== Begin Nav Styles ===*/
    #nav, #nav ul {
    	float:left;
    	width:176px;/*180px total with 2px borders*/
    	margin:0;
    	padding:0;
    	list-style:none;
        background:black;/*for testing only, remove when done*/
    	border:2px solid #000;
    }
    #nav li {
    	position:relative;/* set containing block for AP sub ul */
    	float:left;/*kill IE whitespace bug*/
    	width:100%;
     height: 45.5px;
    	text-align:center;/*center the text*/
    }
    #nav li a {
    	display:block;/*use block instead of float for IE6 */
    	width:100%;/*IE needs a width*/
    	/*height:3em; remove height to allow text to wrap*/
       padding:.65em 0;/*set padding on top and bottom to create more height*/
    	text-decoration:underline;
    	color: tan;
    	font-weight:bold;
    	font-size:1em;
    }
    /* --- Text and Bg colors on hover ---*/
    #nav li:hover, #nav li.sfhover {
    	background:#333;
    	visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
    }
    #nav li:hover a, #nav li.sfhover a { color:#FFF }
    #nav li:hover li a, #nav li.sfhover li a { color:#000 }
    #nav li li:hover a, #nav li li.sfhover a {
    	background:#333;
    	color:#FFF
    }
    /* ------ Sub UL Drop Down ------ */
    #nav ul {
    	position:absolute;
    	width:176px;
    	left:100%;
    	top:-2px;/*recover top border (use "0" without borders)*/
    	margin-left:-999em;/* hide the sub ul */
    	background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
    }
    #nav li:hover ul, #nav li.sfhover ul { margin-left:0;/* reveal the sub ul on li:hover */ }
    
    /*=== Begin Footer ===*/
    #footer {
        width:100%;
        clear:both;
    }
    #footer p {
        margin:0;
        padding:10px 0;
        background:#DDD;
        text-align:center;
        font-size:1em;
    }
    .clearfloat {
        clear:both;
        height:0;
        font-size:0;
    }
    
    
    
    
    
    
    
    
    </style>
    
    <!--[if IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="container">
    		<div id="header">
    				<ul id="nav">
    						<li><a href="Bio2.html">Artist Bio</a></li>
    						<li><a href="Equip.html">Equipment</a></li>
    						<li><a href="Nature.html">Travel &raquo;</a>
    								<ul>
    										<li><a href="Travel.html">Texas</a></li>
    										<li><a href="Travel.html">Louisiana</a></li>
    										<li><a href="Bill.html">Mexico</a></li>
    										<li><a href="Oldfolks.html">Arkansas</a></li>
    										<li><a href="Bill.html">France</a></li>
    										<li><a href="Bill.html">Other</a></li>
    								</ul>
    						</li>
    						<li> <a href="Travel.html">Nature &raquo;</a>
    								<ul>
    										<li><a href="Bill.html">Flowers</a></li>
    										<li><a href="Oldfolks.html">Butterflies</a></li>
    										<li><a href="Bill.html">Birds</a></li>
    										<li><a href="Animals2.html">Wildlife</a></li>
    										<li><a href="Bill.html">Insects</a></li>
    								</ul>
    						<li><a href="Food.html">Food</a></li>
    						<li><a href="Portraits.html">Portraits</a></li>
    						<li><a href="Coinhunting.html">Black & White</a></li>
    						<li><a href="clubs.html">Abstract</a></li>
    						<li><a href="clubs.html">World Today</a></li>
    						<li><a href="inthefield.html">In The Field</a></li>
    						<li><a href="ending.html">My Message</a></li>
    						<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
    						<br>
    				</ul>
                    
                    <img src="images/BioPhoto9.jpg" width="800" height="530"/>
    <br>
    <br>
                    
                    
                    
    				
                    </div>
                    <br>
                    
                    	<div id="footer">
    						<p>Copyright &copy; 2011 Fay Stout. All Rights Reserved</p>
    				</div>
    				<!--end #footer--> 
                
                    
     
    				
    			
    
    <br>
    
    
    
    
    
    
    
    
    
    </body>
    </html>
    Last edited by TechnoBear; Apr 11, 2012 at 11:01. Reason: Added code tags

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    What are you trying to do with the footer? At the moment, you have a <div id="container"> with a width of 95%, and your footer is inside that, with a width of 100%. That means it will stretch the full width of "container", rather than the full width of the window.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Would like to have it be equal to the container......

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    It is equal to the container. Do you mean you would like it to be equal to the width of the screen?
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

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

    As TechnoBear already said if you want the footer the full width of the viewport then close #outer before the footer.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab, 
    searchcoil, Western and Eastern, Recovery, Research">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Inquisitive Eye</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <style type="text/css">
    body {
    	background: black;
    	font-size:100%;
    	margin:0;
    	padding:0;
    }
    #container {
    	width: 95%;
    	min-width:990px;/*keep BG color from stopping short*/
    	background: black;/*header BG color moved to here*/
    	margin:auto;
    }
    #header {
    	width: 990px;
    	text-align: center;
    	margin:0 auto;/*center it up in the container div*/
    	padding: 100px 0;
    	color:#000;
    }
    #header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
    	clear:both;
    	display:block;
    	height: 0;
    	font-size:0;
    }
    #header img {
    	float:right;
    	border:4px solid 000;
    }
    #sidebar {
    	width: 12em;
    	font-size:40px;
    }
    #MainContent {
    	background: #FFA07A;
    	margin-left:5em;
    	margin-right:5em;
    	padding:10px 20px 0 1em;
    }
    /*=== Begin Nav Styles ===*/
    #nav, #nav ul {
    	float:left;
    	width:176px;/*180px total with 2px borders*/
    	margin:0;
    	padding:0;
    	list-style:none;
    	background:black;/*for testing only, remove when done*/
    	border:2px solid #000;
    }
    #nav li {
    	position:relative;/* set containing block for AP sub ul */
    	float:left;/*kill IE whitespace bug*/
    	width:100%;
    	height: 45.5px;
    	text-align:center;/*center the text*/
    }
    #nav li a {
    	display:block;/*use block instead of float for IE6 */
    	width:100%;/*IE needs a width*/
    	/*height:3em; remove height to allow text to wrap*/
       padding:.65em 0;/*set padding on top and bottom to create more height*/
    	text-decoration:underline;
    	color: tan;
    	font-weight:bold;
    	font-size:1em;
    }
    /* --- Text and Bg colors on hover ---*/
    #nav li:hover, #nav li.sfhover {
    	background:#333;
    	visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
    }
    #nav li:hover a, #nav li.sfhover a { color:#FFF }
    #nav li:hover li a, #nav li.sfhover li a { color:#000 }
    #nav li li:hover a, #nav li li.sfhover a {
    	background:#333;
    	color:#FFF
    }
    /* ------ Sub UL Drop Down ------ */
    #nav ul {
    	position:absolute;
    	width:176px;
    	left:100%;
    	top:-2px;/*recover top border (use "0" without borders)*/
    	margin-left:-999em;/* hide the sub ul */
    	background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
    }
    #nav li:hover ul, #nav li.sfhover ul { margin-left:0;/* reveal the sub ul on li:hover */ }
    /*=== Begin Footer ===*/
    #footer {
    	width:100%;
    	clear:both;
    }
    #footer p {
    	margin:0;
    	padding:10px 0;
    	background:#DDD;
    	text-align:center;
    	font-size:1em;
    }
    .clearfloat {
    	clear:both;
    	height:0;
    	font-size:0;
    }
    </style>
    
    <!--[if IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    
    </head>
    <body>
    <div id="container">
    		<div id="header">
    				<ul id="nav">
    						<li><a href="Bio2.html">Artist Bio</a></li>
    						<li><a href="Equip.html">Equipment</a></li>
    						<li><a href="Nature.html">Travel &raquo;</a>
    								<ul>
    										<li><a href="Travel.html">Texas</a></li>
    										<li><a href="Travel.html">Louisiana</a></li>
    										<li><a href="Bill.html">Mexico</a></li>
    										<li><a href="Oldfolks.html">Arkansas</a></li>
    										<li><a href="Bill.html">France</a></li>
    										<li><a href="Bill.html">Other</a></li>
    								</ul>
    						</li>
    						<li> <a href="Travel.html">Nature &raquo;</a>
    								<ul>
    										<li><a href="Bill.html">Flowers</a></li>
    										<li><a href="Oldfolks.html">Butterflies</a></li>
    										<li><a href="Bill.html">Birds</a></li>
    										<li><a href="Animals2.html">Wildlife</a></li>
    										<li><a href="Bill.html">Insects</a></li>
    								</ul>
    						<li><a href="Food.html">Food</a></li>
    						<li><a href="Portraits.html">Portraits</a></li>
    						<li><a href="Coinhunting.html">Black & White</a></li>
    						<li><a href="clubs.html">Abstract</a></li>
    						<li><a href="clubs.html">World Today</a></li>
    						<li><a href="inthefield.html">In The Field</a></li>
    						<li><a href="ending.html">My Message</a></li>
    						<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
    						<br>
    				</ul>
    				<p><img src="images/BioPhoto9.jpg" width="800" height="530"/></p>
    		</div>
    </div>
    <div id="footer">
    		<p>Copyright &copy; 2011 Fay Stout. All Rights Reserved</p>
    </div>
    <!--end #footer-->
    </body>
    </html>

    You had missed the closing div of #container anyway. I also added margin:auto to #container to center it.

    If you want the footer to match the container then just move that closing div for #container to the other side of the footer instead.


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
  •