|
CSS - When Content Exceeds The Window Size, Fixed Footer Covers It
When content exceeds the window size, the fixed footer covers it.
The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives. I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far. What I want: 1.A footer that sticks to the bottom of the viewport if there is not enough content AND stays below the container when the container is longer than the viewport. 2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width. Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Troubleshooting</title> <link rel="stylesheet" href="layout8.css" type="text/css" /> <link rel="stylesheet" href="round.css" type="text/css" /> </head> <body> <div id="header"> <div id="masthead"></div> <div id="topnav"><div class="searchbar">Search</div> <div class="homebar"><span>Home </span></div></div> </div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div> <div class="clear"> </div> </div> <div id="footer"></div> </body> </html> I think there's too much CSS to post here, but everything can be found at: www. observera. com/troubleshootingpage/index. htm CSS @ layout.css and round.css I appreciate any help you can offer Em Similar TutorialsHey everyone, I have decided to start back designing websites and so went back to the basics of html and css. So far things are ok except for the footer that I'm trying to get to sit at the bottom of the page. What I have done: So far I've been able to set the footer as fixed so that as I scroll I'll always see the footer. I don't have a problem always seeing my footer, the problem is that it's hiding some of the text when it reaches the bottom. This is what I have so far (and the website is w3c validated and so are the css) my website code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/shawnlynn.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
</head>
<body>
<div class="wrapper">
<div id="header">
<img src="images/headerlynn.png" alt="header for Shawna Lynn">
</div><!-- end of header div-->
<ul id="navlist">
<li><a href="index.html" title="Home">Home</a>|</li>
<li><a href="about.html" title="About me">About Me</a>|</li>
<li><a href="blog.html" title="Blog">Blog</a>|</li>
<li><a href="services.html" title="services">Services</a>|</li>
<li><a href="clients.html" title="Clients">Clients</a>|</li>
<li><a href="contact.html" title="contact me">Contact Me</a></li>
</ul>
<hr>
<div id="maincontent">
<blockquote><h2><img src="images/celebration.png" title="Celebration Time" alt="celebration time image"></h2>
<p class="goldlinep">You have just struck gold! </p>
<p class="goldimage"><img src="images/gold-mine-icon.png" title="gold mine image" alt="gold mine image"></p>
<p class="goldlinep">A Standards-Compliant Website design like this is your personal Goldmine<br> Why not reap the benefits?!</p>
</blockquote>
</div><!--end of maincontent div-->
<div class="push"></div>
</div>
<div id="footer">
<p class="footerp">Copyright 2011- Shawna Lynn Creative Initiatives. Some images may be subject to copyright.</p> <br>
<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lynnfolio.cz.cc/original/" target="_blank"><img src="validation/valid-html401-blue.png" title="valid html" alt="valid html"> </a>
<img src="validation/vcss-blue.gif" title="valid css" alt="valid css"></p>
</div><!--end of footer div-->
</body>
</html>
The general css is: Code:
/**Layout**/
#header{
top:10px;
right: 0px;
left: 200px;
position:absolute;
background-color: #ffffff;
}
#header, #sidebar, #maincontent, #footer{
position: absolute;
}
#maincontent{
top: 245px;
left: 285px;
}
#footer {
bottom:0px;
position:fixed;
width:100%;
background-color: #0000ff;
height:50px;
padding-right:0px;
margin:0;
}
/*Layout */
.footerp{ color: #ffffff;
text-align:center;}
h2 {
font-family: "Trebuchet MS", sans-serif;
font-size: 2em;
}
.goldlinep {
font-family: "Trebuchet MS", sans-serif;
text-align:center;
font-size: 1.25em;
word-spacing: 1pt;
}
.goldimage {
padding-left: 200px;
}
p {
font-family: "Trebuchet MS",sans-serif;
color: #000000;
font-size: .9em;
text-align: justify;
}
blockquote {
text-align: center;
width: 650px;
background-color: #ffffff;
}
li {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color:#ffffff;
background-repeat: repeat;
min-width: 768px;
max-width: 1280px;
font-size: 12px;
}
#colordiff {
background-color: #9a32cd;
}
.colordiffp {
background-color: #fffacd;
}
/**Navigation**/
#navlist {
padding-top: 200px;
padding-left: 0px;
list-style-type: none;
font-size: 14px;
text-align:center;
}
#navlist li {
display: inline;
font-size: 1.25em;
}
#navlist a{
padding: 3px 15px;
}
#navlist a:link, #navlist a:visited {
color: #00ccff ;
}
#navlist a:hover {
color: #00ffff;
}
/**Navigation**/
/* About Us Page */
#centtable
{
width: 650px;
text-align: justify;
font-family: "Trebuchet MS", Arial, sans-serif;
}
/* About Us Page */
and my second css was specifically done to try and fix my footer: Code:
* {
padding: 0;
}
.wrapper {
min-height: 100%;
height: 100%;
}
.footer, .push {
height: 500px;
}
My second css is a modification of a sticky footer code: Code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
What I would like to get: The footer across the entire bottom of the screen. (I currently have a 1-2px ugly white space to the left of it) The footer not covering any of the text. I am open to other options for putting in my footer. Sorry this is so long but since I'm new I cannot post direct links as yet Cheers PS other important information: Tested it on Firefox 3.6.x and IE 8 and got the same results/effect Hi Guys, I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted. The footer is a simple div that has centered text stating "page posted by $membername on $date" What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page). Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page. Ideas? Here's how the footer looks now: And here's the desired result: Any ideas? It'll have to be cross-browser friendly (even IE6, god help me). Thanks! I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? Does such a thing exist? I have seen various examples and tried more than one, and every time I either end up with a right margin when the page is not long enough to scroll, or I end up with a horizontal scroll bar when the page is scrolling. All I want is a fixed position footer (at the bottom of the viewport permanently) where the page content scrolls vertically behind it without any gaps Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css? The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed. The css and xhtml arevalid. Here is the link: http://www.lonniebruhn.com/sitelab/ Thanks for your help LB I know there is a well documented solution for this but as I can't remember what is causing it, it's a bit hard to search for it. Basically I want to fix my footer to the bottom of the page. As soon as I set it's position to fixed it works in Firefox but in IE the footer shoots back up to the top of the page. If I set the position to absolute then the footer starts at the bottom but the page scrolls with the page content. Sorry for the large amounts of CSS / HTML. PHP Code: <style type="text/css"> <!-- html { height:100%; margin:0; padding:0; } body { margin:0; padding:0; height:100%; background:#FFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: url(images/layout/top_back.jpg); background-repeat: repeat-x; } #wrap { position:relative; background-image: url(images/layout/top_section.jpg); background-repeat:no-repeat; min-height:100%; } * html #wrap { height:100% } * html #inner_holder { height:100% } #footer_hold_all { position: absolute; bottom: 0; width: 100%; height: 134px; } #footer_hold_top { position: relative; top: 0; width: 100%; height: 109px; background: url(images/layout/footer_image_back109.png); } #footer_hold_bottom { position: relative; top: 0; width: 100%; height: 25px; background: url(images/layout/lowernav_background.jpg); } #footer_top { background: url(images/layout/illustration.png); position: relative; top: 0; left: 0; width: 760px; height: 109px; } #footer_bottom { line-height: 25px; text-indent: 5px; text-align: left; vertical-align: middle; } #footer_bottom a{ color: #435769; text-decoration:none; font-weight:bold; font-size:1.0em } #footer_bottom a:hover{ color: #E2B69D; } .bold { font-weight: bold; } #os_logo { width: 196px; height: 78px; position: absolute; top: 0; left: 0; float: left; } #os_search { width: 196px; position: absolute; top: 10px; right: 0; float: right; } #os_search label { display: block; } #os_search form { display: inline; } #inner_holder { width: 100%; position: absolute; top: 100px; } #left { float:left; width:200px; text-align:center; border: 1px dashed green; } #main { position:relative; margin-left:200px; border: 1px dashed red; } #right { float:right; width:200px; text-align:center; border: 1px dashed blue; } #content { padding:5px; margin-right:200px; text-align:left; border: 1px dashed purple; } --> </style> DIV Layout: PHP Code: <body> <div id="wrap"> <div id="inner_holder"> <div id="left"> left </div> <div id="main"> <div id="right"> right </div> <div id="content"> </div> </div> </div> <div id="os_logo"> <img src="images/layout/xxx_logo.jpg" alt="Logo" width="196" height="78" /> </div> <div id="os_search"> <form action="searchsite.php" method="post" name="search"> <label for="search">Search Site</label> <input name="search" id="search" type="text" size="20" /> <input name="submit" type="submit" value="GO" /> </form> </div> <div id="footer_hold_all"> <div id="footer_hold_top"> <div id="footer_top"></div> </div> <div id="footer_hold_bottom"> <div id="footer_bottom" class="bold"> <a href="sitemap.php">Sitemap</a> | <a href="accessibility.php">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </div> </div> </div> </div> </body> Okay I've gotten to a point in my design where I'm a bit stumped. I have been working on a three column layout with a fixed header and footer. The entire idea behind the fixed footer is so that my entire promotional press kit and social networks will be available and in view in the footer above the fold at all times for easy access. After a few little tweaks the layout looks good and turned out nicely. However, now I am adding content and navigation and I am having some issues with regards to how it is reacting when my browser window is re-sized and the layout of the far left navigation. Okay so when I shrink the browser window two things happen, I get a horizontal scroll, which isn't too bad, I mean that is normal in a lot of sites but because the footer and header are fixed it looks a little weird. Is there a way to stop this without going fluid? The other thing it does when it is shrunk, the background image in the footer shifts to the right along with the navigation which should not happen if it is fixed right? What is could be causing that? If I have nested div inside the footer div does it need to be declared fixed too or can it be relative because it is a child of the footer? The biggest problem is that my navigation menu on the left will have four links. I would like two links above and two links below. I would like the top left and bottom left to align to the left with space between those two links and the top right and bottom right, which will also align left. How would I accomplish this using the least amount of mark up in the xhtml and the least amount of code in css? Right now they aren't links, I'm just trying to lay it first. What I was thinking, was using a div to hold a footer ul and li class? Would I just apply the class to each link or would I apply the class to two, one div class above holding two links and one div class below or do I even need an extra footer div anyway if I'll be assigning separate classes? I'm confused as to the best way to fix all this, your help would be appreciated, the xhtml validates and so does the css. Here is the link to the testing site: http://www.lonniebruhn.com/sitelab/ First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short): http://scott.sauyet.com/CSS/Demo/FooterDemo1.html It works great for a liquid layout in FF and IE6. However, for fixed width layout, the container is left justified instead of centering the container. See: http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html Anyone want to hack at this with Firebug and see if they can get the container to be centered? Thanks! Hi! My first post I got a problem with my sticky footer as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll The site: www dot flyttamig dot com think the problem is that i put 100% height on html html, body { margin:0; padding:0; height:100%; } Can you guys help me get rid of this scroll Thanks Hello. I am creating a small web page and I have some troubles creating the style sheet. I want a small frame with information that I want to give a fixed size (150 px). If the text can't fit in the frame there has to be a scrollbar. Any help would be appreciated. Hi When you resize the window to a smaller window the css formatted page contracts and it looks bad. How can you make it add scrollbars so the content doesn't squish as it stays where it is but scrollbars are added to view the whole page. Can it be done as this has a bad effect on my webpage with a few containers when resized to a smaller size. <style type="text/css"> body{margin:0%;padding:0%;min-width:700px;overflow:auto;} I use %positioning for the containers so I guess that also resizes in smaller window mode. If I was to use pixel length and SR is 800X600 is that the actual size i use or would it be smaller? Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike I've got a problem with my css. It consists of 1 header {header} 2 navigation divs {navigation/extra} 1 content div {content} and 1 footer {footer} the 2 content divs have fixed widths (200px) and the content needs to be able to stretch the rest of the window. easy? Yea i thought so, but i can't get it working, if i set the content div to a % and the window resizes it all stuffs up... there has to be a way around this? I guess i need the syntax for 100%-200px. below is the code Code:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
/* Layout */
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{float:right;position:absolute;margin-left:200px;width:100%}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px;}
div#footer{clear:both;width:100%; position:fixed}
Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge. So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course) Like this pictu tinyurl.com/ydsr2ov I have a fixed top header and menu with 20% height and 19% width respectively. I can not get the content to scroll under the header or have the footer to be scrolled at the bottom of the content along with it. Code: .content {
position: relative;
top: 20%;
left: 19%;
width: 80%;
height: 75%;
background-image: url("image.jpg");
}
#footer {
position: relative;
text-align: center;
left: 19%;
width: 80%;
height: 5%;
top: 95%;
background-color: grey;
}
|
|||||||