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,421
    Mentioned
    273 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.

  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,421
    Mentioned
    273 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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 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
  •