...

View Full Version : Footer and header going off the page



Doraku
07-24-2011, 07:10 PM
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:



<!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



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;
}

Sammy12
07-24-2011, 07:24 PM
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-stick-to-bottom-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:



#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/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-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.

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-28.png

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

Doraku
07-24-2011, 09:32 PM
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. :(

Sammy12
07-24-2011, 10:04 PM
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/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-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-stick-to-bottom-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum