|
CSS - Navigation Issues In My Fixed Footer
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/ Similar TutorialsDoes 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 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> 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! 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 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 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? 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 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'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 Using Firefox, the current state of the site I am working looks like I want it to look, yet in IE 6 it does not look correct, surprise. (IE7 looks great). I've tried several things, and I am completely lost as to a solution, I'd love some help, or suggestions, thanks. UTC Site ::EDIT:: -- Problem solved! Thanks for informing me about those two validating websites... Turns out all I needed to do was apply "display:inline-block;" to my 'a' element... I knew it was a simple fix! I'm sure I will be here again for more problems needing solving Hi all, I am trying to basically have a centre column of data on my page. Within this centre column, I am trying to place a header and footer. The CSS is working quite well with the exception that the header and footer seem to be shorter than the width of the main column. In other words, there seems to be a margin on the right and left side between the end of the footer/header and main column. I am not sure what is going on as I have made the widths the same. I am sure I am over-seeing something small. I was following the example found http://www.pmob.co.uk/temp/1colcentred.htm Code:
html{height:100%;}
body {
padding:0;
margin:0;
height:100%;
background-color: #98AFC7;
color: #000000;
}
#outer{
min-height:100%;
width:800px;
background:pink;
color: #000000;
margin:auto;
text-align:left;
position:relative;
}
* html #outer{height:100%}
#header {
border-top:1px solid #000;
border-bottom:1px solid #000;
background:blue;
left:-1px;
width:800px;
height:40px;
overflow:hidden;
color: #000000;
z-index:100;
//margin-left:6px;
//margin-right:6px;
}
#footer {
position:absolute;
bottom:0;
left:0;
background:green;
height:40px;
border-top:1px solid #000;
width:800px;
//margin-left:1%;
//margin-right:1%;
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
<body>
<div id="outer">
<div id="header">Header</div>
<p>middle</p>
<p>middle</p>
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it. Code: /*---------------------------------------------
Footer Area Starts here
----------------------------------------------*/
#FooterBody{
background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
height:232px;
width:100%;
border:1px solid;
color:#f2f1df;
}
#FooterContainer{
width: 936px; margin: 0 auto; padding: 0; text-align: left;
}
/*------------------------------------------------footer--------------------*/
#footer{
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
float: left;
height: 232px;
background-image: url(http://www.cleverchickcreations.com/images/footer.png);
background-repeat: repeat-x;
position: relative;
}
#btmmenu_area{
width:1100px;
height:120px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.navcolumn {
float: left;
width: 300px;
height: 120px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
}
.row1 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 140px;
text-align: left;
margin-top: 10px;
padding-left: 10px;
line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row1 a:hover{
color: #6d5f52;
text-decoration: none;
}
.row2 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row2 a:hover {
color: #6d5f52;
text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row3 a:hover {
color: #6d5f52;
text-decoration: none;
}
.foot-headers {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ef5f9b;
line-height: 140%;
}
.footer_links {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #333333;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer_copyrights {
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #c2c093;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/*------------------------------------------------validation --------------------*/
#validation_area {
width:100px;
height:34px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.validation {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.validation:hover {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
Hey, I have just about finished this website here except for the footer issue in Internet Explorer. My main issue is that I'm limited to a Macbook Pro right now, I have VM Fusion but haven't been able to use my external harddrive with my virtual machine on it and have no other way to test in IE. Browsershots has it's limitations, haha. Anyway, it displays fine in WebKit and Firefox, but internet explorer is being real finnicky. If I have to I can resort to calling in a modified footer strictly for IE, but then I have to go design a footer for it down at the library so i can use on of their computers to test it. Thought I'd try posting a question here and see if anyone could spot something in my CSS that may not be working with IE. Thanks in advance, really appreciated. The link is http://www.laserbodysculpting.ca/beta/ The screenshots in IE are MSIE7.0 and IE6.0 . I'm using the following DIV structure. (http://pastebin.com/meef27b4) Code: <div id="footer"> <div id="fcont"> <div id="f1" class="fwrap"><h2>Newsletter</h2> ... </div> <div id="f2" class="fwrap"><h2>Map</h2> ... </div> <div id="f3" class="fwrap"><h2>Contact</h2> ... </div> </div> <div id="minifooter"> ... </div> </body> </html> Here is the CSS Code: #footer {
width: 100%;
height: 270px;
position: static;
clear:both;
text-align: center;
border-top:solid 1px #414243;
background:#9a9a9a;
letter-spacing: 0.2em;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
#footer h2{
font-size: 15px;
color: #414243;
padding:0 0 .5em .1em;
}
.info {
color:#fff;
}
.map {
border: 1px #414242 solid;
margin: 2px;
}
#footer h3{
font-size:10px;
padding:0 0 .5em 0;
letter-spacing:5px;
color:#414243;
font-weight:bold;
}
#fcont {
width:100%;
margin-left:200px;
overflow:auto;
}
#minifooter {
clear:both;
width: 100%;
height: 15px;
padding-bottom:10px;
border-top:solid 1px #000;
background:#414243;
color: #fff;
letter-spacing: 0.2em;
}
#minifooter a:hover {
color:#fff;
}
#f1 {
display: inline;
float:left;
text-align: left;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
width: 300px;
}
#f2 {
display: inline;
text-align: left;
float:left;
position: relative;
margin-top: 10px;
width: 300px;
}
#f3 {
display: inline;
text-align: left;
float:left;
position: relative;
width: 300px;
margin-top: 10px;
}
http://www.link-space.com/send.com/nav/template.htm Thats the current html file that I have 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=utf-8" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
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>
</head>
<body>
<div id="container">
<div id="header">
<div id="slogan">Welcome to SEND.com your GIFT Headquarters!</div>
<div id="logo" title="SEND.com"><a href="index.htm"></a></div>
<h1>The International Gift Network</h1>
<div id="phone"></div>
<div id="navBox">
<ul id="primaryNav">
<li><a href="#">Liqour Gifts</a>
<ul>
<li><a href="#">Custom Gift Baskets</a></li>
<li><a href="#">Armagnac</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Bourbon</a></li>
<li><a href="#">Brandy</a></li>
<li><a href="#">Canadian Whiskey</a></li>
<li><a href="#">Cognac</a></li>
<li><a href="#">Cordials & Liqueurs</a></li>
<li><a href="#">Drink of the Month Club</a></li>
<li><a href="#">Gin</a></li>
<li><a href="#">Irish Whiskey</a></li>
<li><a href="#">Liquor Baskets</a></li>
<li><a href="#">Rum</a></li>
<li><a href="#">Scotch-Blended</a></li>
<li><a href="#">Scotch-Single Malt</a></li>
<li><a href="#">Tequila</a></li>
<li><a href="#">Unique Liquor Gift Bottles</a></li>
<li><a href="#" class="last">Vodka</a></li>
</ul>
</li>
<li><a href="#">Wine Gifts</a>
<ul>
<li><a href="#">Custom Gift Baskets</a></li>
<li><a href="#">Champagne</a></li>
<li><a href="#">Champagne Gift Baskets</a></li>
<li><a href="#">Sparkling Wines</a></li>
<li><a href="#">Wine-Red</a>
<!--<ul>
<li><a href="#">Barolo</a></li>
<li><a href="#">Bordeaux</a></li>
<li><a href="#">Burgundy</a></li>
<li><a href="#">Cabernet Sauvignon</a></li>
<li><a href="#">Grenache</a></li>
<li><a href="#">Malbec</a></li>
<li><a href="#">Nebbiolo</a></li>
<li><a href="#">Pinot Noir</a></li>
<li><a href="#">Sangiovese</a></li>
<li><a href="#">Syrah / Shiraz</a></li>
<li><a href="#">Tempranillo</a></li>
<li><a href="#">Zinfandel</a></li>
</ul>-->
</li>
<li><a href="#">Wine-White</a>
<!--<ul>
<li><a href="#">Chardonnay</a></li>
<li><a href="#">Riseling</a></li>
<li><a href="#">Pinot Grigio</a></li>
<li><a href="#">Dauvignon Blanc</a></li>
<li><a href="#">Viognier</a></li>
<li><a href="#">White Blend</a></li>
</ul>-->
</li>
<li><a href="#">Dessert Wines</a></li>
<li><a href="#" class="last">Port Wines</a></li>
</ul>
</li>
<li><a href="#">Flower Gifts</a>
<ul>
<li><a href="#">SEND Leis</a></li>
<li><a href="#">SEND Orchids</a></li>
<li><a href="#">SEND Protea</a></li>
<li><a href="#" class="last">SEND Wreaths</a></li>
</ul>
</li>
<li><a href="#">Gourmet Gifts</a>
<ul>
<li><a href="#">SEND Gift Baskets</a></li>
<li><a href="#">SEND Cakes</a></li>
<li><a href="#">SEND Caviar</a></li>
<li><a href="#">SEND Cheesecakes</a></li>
<li><a href="#">SEND Chocolates</a></li>
<li><a href="#">SEND Cookies</a></li>
<li><a href="#">SEND Fruits</a></li>
<li><a href="#">SEND Kosher</a></li>
<li><a href="#">SEND Liqueur Cakes</a></li>
<li><a href="#">SEND Rum Cake</a></li>
<li><a href="#" class="last">SEND Salmon</a></li>
</ul>
</li>
<li><a href="#" class="last">Specialty Shops</a>
<ul>
<li><a href="#">SEND African</a></li>
<li><a href="#">SEND Airplanes</a></li>
<li><a href="#">SEND Armoury</a></li>
<li><a href="#">SEND Birdhouses</a></li>
<li><a href="#">SEND Bridal</a></li>
<li><a href="#">SEND Chess</a></li>
<li><a href="#">SEND Chimes</a></li>
<li><a href="#">SEND Cigar</a></li>
<li><a href="#">SEND Egpytian</a></li>
<li><a href="#">SEND Executive Gift</a></li>
<li><a href="#">SEND Footstools</a></li>
<li><a href="#">SEND Leather</a></li>
<li><a href="#">SEND Lighthouses</a></li>
<li><a href="#">SEND Museum Jewelry</a></li>
<li><a href="#">SEND Music Boxes</a></li>
<li><a href="#">SEND Nautical</a></li>
<li><a href="#">SEND Picnic</a></li>
<li><a href="#">SEND Stained Glass</a></li>
<li><a href="#">SEND Ties</a></li>
<li><a href="#">SEND Vases</a></li>
<li><a href="#" class="last">SEND Weathervanes</a></li>
</ul>
</li>
</ul>
</div>
<ul id="secondaryNav">
<li><a href="#">Gift Certificates</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Live Support</a></li>
<li><a href="#" class="last">My Account</a></li>
</ul>
<div id="search"></div>
</div>
</div>
</body>
</html>
Thats the current css file that I have Code: @charset "utf-8";
/* neutralize browser styles */
body, html {
margin:0;
padding:0;
}
/* neutralize browser spacing for vertical elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
margin: 0;
padding: 0;
}
/*Container*/
#container {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
}
#header {
width:770px;
height:117px;
background: url(../images/header.jpg) no-repeat;
}
#header #slogan {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
color:#6A6A61;
font-weight:bold;
position:absolute;
top: 1px;
left: 26px;
}
#header #logo a {
background:url(../images/send.gif) no-repeat;
width:139px;
height:24px;
position:absolute;
top: 24px;
left: 26px;
}
#header h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-color: #3E606F;
font-weight:bold;
position:absolute;
top: 52px;
left: 26px;
}
#header #phone {
background:url(../images/phone.gif) no-repeat;
width:135px;
height:10px;
position:absolute;
top: 28px;
left: 604px;
}
#header #navBox {
border: 1px solid #DADADA;
width:513px;
height:26px;
background:#fff;
position:absolute;
top:80px;
left:17px;
}
#header #primaryNav,
#header #primaryNav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#header #primaryNav a {
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
font-weight:bold;
color:#731818;
text-decoration:none;
padding: 4px 18px 5px 19px;
margin: 4px 0 4px 0;
border-right: solid 1px #BDAD73;
}
#header #primaryNav a:hover,
#header #primaryNav a:active {
padding: 8px 18px 9px 19px;
margin:0;
color:#fff;
background-color:#731818;
}
#header #primaryNav a:link.last {
border-right:none;
padding: 8px 18px 9px 19px;
margin:0;
}
#header #primaryNav li { /* all list items */
float: left;
}
#header #primaryNav li ul { /* second-level lists */
margin:0;
padding:0;
position: absolute;
border-left: solid 1px #D2C8A2;
border-right: solid 1px #D2C8A2;
width:100%;
left: -99999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background-color:#FFF;
float: left;
display:block;
width:140px;
}
#header #primaryNav li ul li {
width:140px;
}
#header #primaryNav li ul li a {
margin:0;
padding:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border-right: none;
}
#header #primaryNav li ul li a:link.last {
margin:0;
padding-left: 8px;
border-bottom: solid 1px #D2C8A2;
}
#header #primaryNav li ul a:hover,
#header #primaryNav li ul a:active {
padding:8px;
margin:0 auto;
color:#fff;
background-color:#731818;
}
#header #primaryNav li:hover ul ul,
#header #primaryNav li:hover ul ul ul,
#header #primaryNav li.sfhover ul ul,
#header #primaryNav li.sfhover ul ul ul {
left:-999em;
}
#header #primaryNav li:hover ul,
#header #primaryNav li li:hover ul,
#header #primaryNav li li li:hover ul,
#header #primaryNav li.sfhover ul,
#header #primaryNav li li.sfhover ul,
#header #primaryNav li li li.sfhover ul {
left:auto;
}
#header #primaryNav li:hover,
#header #primaryNav li.sfhover {
background:#333 none repeat scroll 0%;
}
#header #secondaryNav {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
position: absolute;
top:52px;
left:333px;
}
#header #secondaryNav li {
float: left;
}
#header #secondaryNav li a {
padding:2px 16px 2px 16px;
border-right:1px solid #E4D8B1;
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
}
#header #secondaryNav li a.last {
border-right:none;
}
#header #secondaryNav li a:link,
#header #secondaryNav li a:visited {
text-decoration: none;
color:#1D2326;
}
#header #secondaryNav li a:hover,
#header #secondaryNav li a:active {
text-decoration: underline;
}
#header #search {
border-top: 1px solid #DADADA;
border-right: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
position:absolute;
top:80px;
left:532px;
background:#EAE7E2;
width:223px;
height:26px;
}
Three issues. The menu does not fade away in IE - fixed Once highlighted on the submenu I can't get the text in the main menu to go white The menu "jumps" when I go from the main menu to the submenu Once these issues are resolves I will add in a sub sub menu. Hence son of suckerfish.. http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? |
|||||||