Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer and header going off the page

    I have posted in a previous thread asking for help with tables as suggested. I have scrapped that and have been using CSS. I have had help from a friend + HTML validator and I have restructured everything.

    When I make the browser smaller and scroll to the right horizontally my title goes off the page and the edge of the footer appears as you can see in the image below:

    image:

    Link Removed


    Output:

    Code:
    <!DOCTYPE html> 
    <html dir="ltr" lang="en-US"> 
    	<head>	
    		
    		<!-- Meta tags --> 
    		<meta charset="utf-8"> 
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    		<meta name="description" content="description"> 
    		<meta name="keywords" content="description"> 
    		
    		<!-- Title --> 
    		<title>Title</title> 
    		
    		<!-- Style Sheets --> 
    		<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" /> 
     
    		<!-- Scripts -->		
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
    		<script src="js/linkswipe.js" type="text/javascript"></script> 	</head> 
    	
    	<body>	
    		<!--
    	Body.php will print everything that should be inbetween <body></body>
    	That means the entire web content! header_image , menu, content, footer etc.
     --> 
    <div id="container"> 
    	
    	<header> 
    		<div id="LogoImage"><img src="images/header.png"/></div> 
    	</header> 
    	<div style="min-width:960px"> 
    		<div style="min-width:960px"> 
    	<div id="site"> 
    		<nav> 
    		 <ul> 
    			<li><a href="#">Link</a></li> 
    			<li><a href="#">Link</a></li> 
    			<li><a href="#">Link</a></li> 
    			<li><a href="#">Link</a></li> 
    		 </ul> 
    		</nav> 
    	</div> 
    </div> 
     
    			<i class="clear"></i> 
    		<div class="content"> 
    			<div class="inner"> 
    				<p>body text</p> 
    			</div> 
    		</div> 
    	</div> 
    	<i class="clear"></i> 
    	<!-- Footer.php will print the footer and its' content --> 
    <div id="footer"> 
    	<p> This is footer </p> 
    </div></div>	</body> 
    </html>
    CSS

    Code:
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, dialog, figure, footer, header, 
    hgroup, menu, nav, section,
    time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }
    
    html {
        overflow-y: scroll;
        overflow: -moz-scrollbars-vertical;
    }
    
    body {
    	line-height: 1;
    }
    
    article, aside, dialog, figure, footer, header, 
    hgroup, nav, section { 
        display:block;
    }
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
    /*
    
    	1312 vs. Creative Times
    
    	written by Mike "1312" (mike at madebyfudge.com)
    
    	for Fudge (www.madebyfudge.com)
    	
    
    		
    */
    
    body {
    	background: #292722;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #fff;
    	text-align: left;
    }
    
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ layouts */
    
    
    #container { width:960px; margin:0 auto; } /* not sure if I put this here?? */
    
    div#container {
    	width:100%;
    	margin:0px;
    	line-height:150%;
    	}
    	
    div#header {
    	background: #292722;
    	text-align: right;
    	padding: 30px;
    	width: 100%;
    	}
    	
    div.content {
        margin: 10px 0;
        min-height: 250px;
        padding: 10px 0;
        right: 100px;
        width: 70%;
    	min-width:960px;
    }
    
    #site {
    	float: left;
        min-width: 350px;
        text-align: left;
    	z-index:1000;
    }
    #LogoImage{
    	width:100%;
    	position:relative;
    }
    #footer{
    	position:absolute;
        padding: 20px;
    	bottom:0;
    	width:100%;
    	height:60px;
    	background:#fab700;
    }
    .inner{border-left:0px solid #666;padding-left:10px}
    .clear{clear:both}
    /* foreground */
    
    header, aside {
        background: none repeat scroll 0 0 #292722; 
        padding: 1px 0;
        margin: 0 0 20px;
    }
    
    nav {
    }
    
    article {
        padding: 20px;
    }
    
    footer {
        background: #ccc;
        padding: 20px;
    }
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ general styles */
    
    h1 {
        font-size: 22px;
        line-height: 25px;
    	margin: 0 0 25px 0;
    }
    
    h2, h3, h4, h5, h6, p, ul, ol, dl {
    	font-size: 12px;
    	line-height: 14px;
    	margin: 0 0 14px 0;	
    }
        h2, h3, h4, h5, h6 {
        	font-weight: bold;
        }
    	
    	h7 {
    	color: #fab700;
    	background: #292722;
    	font-size: 15px;
    	float: right;
    	margin-right: 10px;
    	margin-top: 2px;
    	}
        
    pre {
        background: #fab700;
        margin: 0 -20px 20px;
        padding: 20px;
        font-size: 12px;
    }
    	
    a {
    	color: #fab700;
    	text-decoration: none;
    }
    	a:focus, a:active {
    		text-decoration: none;
    	}
    	a:hover {
    		color: #666;
    	}
    	
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ custom classes */
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ div specific styles */
    
    nav ul {
        text-transform: uppercase;
        font-size: 30px;
        line-height: 17px;
        margin: 0;
    
    }
        nav li {
    		display: block;
            height: 19px;
            list-style-type: none;
            overflow: hidden;
    		margin: 10px 0;
    		padding: 10px 0;
        }
            nav a, nav a:hover {
                display: inline-block;
                color: #fab700;
                background: #292722;
                padding: 3px 2px 1px 2px;
                position: fixed;
                overflow: hidden;  
                text-decoration: none;
                /* display: inline;
                padding: 5px; */
                zoom: 1;
            }
                nav span {
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: block;
                    color: #000;
                    background: #fab700;
                    padding: 3px 2px 1px 2px;
                    overflow: hidden;
                    white-space: nowrap;
                    cursor: pointer;
                    /*padding: 2px; */
                }
                    
    				@media screen and (-webkit-min-device-pixel-ratio:0){
                        nav a, nav a:hover, nav span {
                            padding: 10px;
                        }
                    }
                nav .current a {
                    background: #000;
                    color: #fff;
                }
                    nav .current span {
                        display: none !important;
                    }
    Last edited by Doraku; 07-24-2011 at 09:19 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    overflow-y: auto; (just a suggestion)

    let me take a closer look at the script to find the problem

    ----

    yeah man, you can't absolute; a footer to the bottom. here's what your saying: no matter what the screen size or resolution, the footer will be at the bottom.
    http://ryanfait.com/resources/footer...ottom-of-page/

    as for the header, your making the width: 100%;, so think of it this way. 100% is based on the size of the browser. if a user has a 1900px browser, the text will be in the middle. however, when he decreases the size of the browser, the text will still be in the middle (of 1900, 1800, 1700 etc - so now the middle is more to the left, more to the left, more to the left). I would suggest using a fixed layout.

    fixed layout:

    Code:
    #container {
     width: 960px;
     margin: auto;
    }
    easier to start out with fixed than fluid. if you want to learn more about this:
    http://coding.smashingmagazine.com/2...t-one-for-you/

    ----

    while on the subject of minimizing browzer size. try minimizing, then scrolling to the right.
    you will see that your footer color is gone.
    try setting the width to min-width: 100%; instead.



    your telling the browser to set the width to 100% of the page. which for example might be 1000px. but when your scrolling to the right, now your page is actually 1200, but you told the browser 1000px. while you have overflow-y: auto (should be), overflow-x needs to be set to :hidden;, since you have a scrollbar on the x-axis now.

    - hope this helped
    Last edited by Sammy12; 07-24-2011 at 07:39 PM.

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It has been fixed to the bottom and the scrollbars do not appear but if I force it right the footer still disappears. I have modified for it to be min-width:100%. I have also modified the overflow y and x. If I change the layout to fixed everything is shifted to the centre.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    woof. lot of problems with script.

    You have to answer two questions:

    1. are you trying to build a fixed, fluid, or elastic layout
    http://coding.smashingmagazine.com/2...t-one-for-you/

    2. are you going to let the content push the footer down naturally or use a sticky footer
    http://ryanfait.com/resources/footer...ottom-of-page/

    you can't mix % with px inless you really have a good understanding of gutters, browser resolutions, and some other third thing. you really have to have a good understanding to mix the two.

    ---

    in my previous post, my picture shows you set the width to 100%, you also have 20px padding. this goes over 100%, therefore you have a horizontal scrollbar. I would recommend taking any overflows out of your script and taking out the 20px from the footer.
    Last edited by Sammy12; 07-24-2011 at 10:08 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •