|
CSS - Footer Overlapping Menu In Short Browser Window
I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content.
No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes. Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling! Flaw/s in the code? I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu? For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/ Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :| Similar TutorialsI am not experienced in CSS or any web design for that matter. I am trying to make a very simple web site using CSS and I am being frustrated by some positioning problems. I would appreciate your help! Problem: When I restore the browser window to a smaller size, "things" in my web page start to overlap eachother. The smaller the window, the greater the overlap. What I have done: I have validated everything, guess and checked multiple positioning elements, fiddled with margins, and have browsed through multiple CSS sites looking for help. What I would like fixed: When the browser is in a smaller window, there will be a scrollbar that appears preserving the size of the web page instead of scrunching it all together. Graphical Representation: Full-Screen Smaller Window - Overlapping I Like This - Note the Scrollbar on the bottom Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Chapel</title> <style type="text/css"> @import "layout.css"; </style> </head> <body> <div id="chapell"> <img src="graphics\chapel1.jpg" alt="chapel"> </div> <div id="news"> <a href="news.html"> <img src="graphics\news.jpg" alt="news"> </a> </div> <div id="us"> <a href="index.html"> <img src="graphics\us.jpg" alt="us"> </a> </div> <div id="directions"> <a href="directions.html"> <img src="graphics\directions.jpg" alt="directions"> </a> </div> <div id="contact"> <a href="contact.html"> <img src="graphics\contact.jpg" alt="contact"> </a> </div> <div id="schedule"> <a href="schedule.html"> <img src="graphics\schedule.jpg" alt="schedule"> </a> </div> <div id="myspace"> <a href="http://www.myspace.com" target="_blank"> <img src="graphics\myspace.jpg" alt="myspace"> </a> </div> <div id="art"> <a href="art.html"> <img src="graphics\art.jpg" alt="artistry"> </a> </div> <div id="messages"> <a href="messages.html"> <img src="graphics\messages.jpg" alt="messages"> </a> </div> <div id="scoop"> <img src="graphics\scoop.jpg" alt="scoop"> </div> <div class="roundcont"> <div class="roundtop"> <img src="tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br><br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="roundbottom"> <img src="bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> </div> </body> </html> Code:
body {
color: white;
background-color: #FDF8DF
}
#chapell img {
position: absolute;
left: 21.5%;
top: 34%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#news img {
position: absolute;
left: 20%;
top: 38%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#us img {
position: absolute;
left: 20%;
top: 42%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#directions img {
position: absolute;
left: 20%;
top: 46%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#contact img {
position: absolute;
left: 20%;
top: 50%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#schedule img {
position: absolute;
left: 20%;
top: 54%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#myspace img {
position: absolute;
left: 20%;
top: 58%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#art img {
position: absolute;
left: 20%;
top: 62%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#messages img {
position: absolute;
left: 20%;
top: 66%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#whoarewe img {
position: absolute;
left: 37%;
top: 25%;
}
#scoop img {
position: absolute;
left: 36%;
top: 25%;
margin-bottom: 10%;
margin-right: 10%;
}
#findus img {
position: absolute;
left: 40%;
top: 25%;
}
#banter img {
position: absolute;
left: 32.5%;
top: 25%;
}
#docket img {
position: absolute;
left: 39%;
top: 25%;
}
#expressions img {
position: absolute;
left: 37%;
top: 25%;
}
#listen img {
position: absolute;
left: 39%;
top: 25%;
}
.roundcont {
top: 35%;
right: 35%;
width: 35%;
background: white;
color: black;
position: absolute;
margin-left: 10%;
margin-top: 0%;
}
.roundcont p {
margin: 0 3%;
font: 12px arial, tahoma, serif;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 3%;
height: 15px;
border: none;
display: block !important;
}
Thank you, Daniel Hi, I've created a page with two tables, which is basically structured like <table> main content </table> <table id="footer"> footer content </table> and in my style sheet i have Code:
#footerid {
position: absolute;
bottom: 0px;
}
The problem is that the footer is overlapping the content if the content is greater then a page's length. What I need is for the footer to come after the content table insetad of overlapping as it is now. Does this require some sort of id attached the first table? Thanks for any help on this one http://www.yentiming.com/ just play around with the menu on IE7 and you will see what will happen. i have tried messing around with z-index but i have found no success any ideas on how to fix this? http://www.larreamma.com/kids_programs.html On the PC the last 'About Us' menu overlaps the body content when it is expanded. Does not occur on Mac (FF, Safari, Chrome). Tried playing with 'z-index' but if that is the issue then I am not putting it in the right place. Thank you in advance. I am creating a dropdown menu based on suckerfish. The top level appears correctly, however the first submenu level puts all the menu items stacked over top of eachother right under the top level. Everything is correct except the items are overlapping. My html and css are below. <ul id="nav"> <li style="border-left: none;"> <link here> <ul> <li> <link here> <ul> <li> <link here> </li> </ul> <ul> <li> <link here> </li> </ul> </li> </ul> <ul> <li> <link here> <ul> <li> <link here> </li> </ul> </li> </ul> <ul> <li> <link here> </li> </ul> </li> <li> <link here> <ul> <li> <link here> </li> </ul> <ul> <li> <link here> </li> </ul> </li> <li> <link here> </li> <li> <link here> </li> <li> <link here> </li> <li> <link here> </li> </ul> #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; } #nav li { float: left; padding: 0px 10px 0px 10px; } #nav li ul { position: absolute; width: 200px; color: #FFF; background-color: #000; left: -999em; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li ul ul { margin: -1em 0 0 10em; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 1; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul { left: auto; } My CSS is pulled pretty much straight from suckerfish. there are a few small changes like the widths and background color, but the issue was there even when it was a direct copy. Currently I am only trying to get this to in firefox, as I am getting the same issue in every browser I try. Just an fyi, I am using umbraco as the CMS for this site, and it is generating the html for the menu. There are actual links I just cant post them as I am new here, they contain just the hfer attribute. Thanks I've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see he www the-bizness .co. .uk If you click on Home Page or Multimedia the drop-down menu is behind the video clip. Very annoying. Any help appreciated! I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. I fixed this issue ages ago on another template and now I can't remember what sorted it. My footer sits at the bottom (or drops down if the page is longer). When the page is maximised it looks fine but when the browser (IE) is not maximised it moves up 1px and you can see the background behind it. Any ideas? Thanks. Suppose this: ----- Header Div Content Dive Footer Div ----- Is there a way to force a footer div to the bottom of the window even when there isn't enough content above to fill the window? Maybe some way to "pad" the content div? 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! Hello, I have a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width. Here's my CSS for the footer: Code: #footer {
width:100%; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
border: 0px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
#footer_container {
width:950px; /* this will create a container 80% of the browser width */
background: #327ec1;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0 px;
text-align: left; /* this overrides the text-align: center on the body element. */
height:120px;
}
the site ishere any ideas? thanks 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 I am trying to center a 760x580 DIV box in the center of the browser window (horizontally AND vertically) regardless of the user's screen size. Horizontal centering hasn't been a problem, but I can't figure out how to get the thing to center vertically. Here is my code at the moment: Code:
<html>
<head>
<title>Center a DIV</title>
<style type='text/css'>
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#content {
position: absolute;
right: 0;
left: 0;
width: 760px;
height: 580px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
background-image: url(grunge_paper.jpg);
}
img {display: block;}
</style>
</head>
<body bgcolor='black'>
<div id='content'>
</div>
</body>
</html>
hey all i have a prob....when the browser window is maximised it is fine...however...when i make it a bit smaller the content div shoots off halfway down the page Go Here To See What I Mean the css can be found here any ideas...cus im stumped thanks very much RF Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader {
width: 800px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> When I view my web pages with IE6 or resize the window the footer items fall start falling out of place. Link: website CSS Link: CSS Code Hi, 1st problem : when i try to validate the html on this document: http://www.chocolateriewanders.com/new/new2/about_us.php the validation failes and i have no idea why can i not just put a list in another list? 2nd problem [SOLVED AS WELL]: the footer behaves kinda weird on my mac. i have fairly high resolution and i am not able to re-create the prob on my ibm. an image file is attached. in firefox the footer is located above th other floating boaxes. i use no positioning and just clear and float values - i have no idea how it got there http://www.chocolateriewanders.com/new/new2/about_us.php ___________ i am trying to re-design my existing page to get the navigational menu more integrated and to make the page more colorful. furthermore am i trying to ONLY use float to position the elements. the only tiny obsticle is, that i couldn't get around the table in the center yet - but i am working on it Can it be done with just CSS? I have a table of data where the text in the data cells wraps and fills the td cell with several lines of text. This is OK when the browser window is a "normal" size, but if someone is viewing with a widescreen monitor I would like the table to get wider and make the cell contents not wrap the text. Or if they are viewing with a small monitor I want it to wrap even more (table would get smaller). Can this be done with CSS, or do I need to do something with javascript? |
|||||||