|
CSS - Ie6 Sticky Hover
I have a problem on IE6 where the background image changes on the hover, but doesn't change back when you hover off it. Any ideas?
Much appreciated Similar TutorialsHi, Wondering if anyone can help with a sticky footer im trying to achieve. Im currently working on retentionbs.com, and noticed the footer doesnt stick to the bottom of the window. I've searched it and the solutions seem fairly complex. Does anyone have a quick fix? Any help would be massively appreciated! Thanks, Graeme #1 - What is a DIV and what is a SPAN? DIV's are something that will count as their own lines, unless put together with a float in between them they will always attempt to take up 100% of the width, then the next element you put next to the DIV will always be below it. Example: Code: <div>Hello World!</div> Hello Code: Output Hello World! Hello SPAN's are only to be used for specific elements such as you are looking to color some text red. Instead of defining the dreadful font tag you can do it with a class or better yet just one word. Code: Wow, this next <span style='color:#ff0000;'>word</span> will be red. Code: Output Wow, this next word will be red. So let's review, DIV's are for individual lines, and SPAN's are for single elements. #2 - What is a tableless layout? We all know what tables are, those gawky overweight files that really are used to display tabular data. However, the overuse of them has created some concern. And with the full support of CSS it is now easier to do a non tabled layout. Why would you want to? Because without tables your files are smaller, they are easier to use, and overall they showcase that you don't have to rely on conventional methods to get the same product. Tutorials can be found at: Glish CSS W3C A List Apart Basic example: Code: <div> <div style="float:left; width:100px;"> LEFT SIDE </div> <div style="float:left; width:150px;"> Middle </div> <div style="float:left; width:100px;"> RIGHT SIDE </div> </div> Not very special but it works, try it out, play with it. #3 - This doesn't look right in Internet Explorer, why? Because Internet Explorer is operating on it's own terms. It does not display CSS correctly. It's trying and it's supposed to have it fixed in IE7. I guess we will wait and see. Now, this brings us to the point that you should design for FireFox and hack for IE. Why? If you have questions what you can use and when to use it please look at this link. It will give you a rundown on what to use and what to avoid. #4 - ID's and Classes let's take a look. ID's are to be used ONE time. They are not to be used all over your pages like they are candy. Here are some links that were posted by Kravvitz IDs should be unique, Classes, ID's versus Classes #5 - Changing link colors without really changing anything special Changing the link colors can be a very easy way of making your site look different without the use of images and any other special featured thing that has to do with images. Code: Your CSS File
a{
color:#ff0000;
}
a:hover{
color:#00ffff;
}
a:visited{
color:#ff00ff;
}
Code: <a href="http://www.example.com">Example</a> What this will do is color the link depending on if the user has rolled over it (hover), clicked on it before (visited), and just regular (a) #6 - How can I change tag {x} to do {y} Tired of having the form margins all messed up? Want the td's all to do one thing? Sick of wasting your time defining style=""'s for your input forms? Change them! Change them all! Code: No more padding in the form tag
form{
margin:0;
padding:0;
}
Code: All fonts everywhere have the same color
body{
color:#ff0000;
}
Code: change the input boxes!
input{
color:#00ffff;
background-color:#c0c0c0;
padding-right:2px;
padding-left:2px;
font-size:18px;
}
See you can overtake literally almost any tag that HTML gave to you. All font tags, p, div's everything. Just practicing but can anyone tell me why my footer doesn't stick to the bottom of the page? Also why does my page scroll sideways when I include my table? http://csstest.dmsbdesign.com/templates/templates%201/ css here Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
background-color:#F7F7F7;
height:100%;
}
.quicklink{
padding-bottom:10px;
padding-top:10px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
list-style-type:none;
width:220px;
text-align:left;
padding-left:5px;
}
#container{
background-color:#E1E1E1;
width:1000px;
margin-left:auto;
margin-right:auto;
padding-bottom:100px;
}
#header{
background-color:#666666;
width:1000px;
height:100px;
margin-left:auto;
margin-right:auto;
}
#logo ul{
margin:0px;
position:relative;
left:-15px;
bottom:60px;
}
#logo li{
text-align:right;
list-style-image: none;
list-style-type: none;
}
#logo{
position:relative;
left:5px;
top:10px;
}
#logo img{
height:75px;
width:75px;
}
#logo h1{
position:absolute;
margin:0px;
left:75px;
top:15px;
}
#logo h2{
position:absolute;
margin:0px;
left:75px;
top:45px;
}
#nav{
background-color:#999999;
width:1000px;
height:25px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#nav ul{
margin-top:0px;
}
#nav li{
display:inline;
list-style-type:none;
padding-right:80px;
}
#pictureDiv{
margin-top:10px;
width:940px;
height:240px;
margin-left:auto;
margin-right:auto;
background-color:#CCCCCC;
padding: 5px;
border:1px #000000 solid;
}
#contentDiv tr {
}
#pictureDiv h1{
position:relative;
margin:0px;
width:200px;
font-size:24px;
left:735px;
top:-150px;
color:#ff0000;
}
#pictureDiv img{
position:relative;
left:10px;
}
#contentDiv{
margin-top:10px;
width:900px;
height:325px;
margin-left:auto;
margin-right:auto;
}
#contentDiv table{
position:relative;
top:-510px;
left:550px;
width:375px;
}
#contentDiv tr{
}
#contentDiv td {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-bottom:10px;
padding-top:10px;
}
#contentDiv p{
width:75%;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}
#contentDiv h1{
margin:5px;
}
#footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
}
html here 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>My Page</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="../../images/Placeholder.png" />
<h1> My Webpage </h1>
<h2> My Slogan </h2>
<ul>
<li> Phone Number: 555-555-5555 </li>
<li> Address: 123 Main St </li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
<li>Nav 6</li>
<li>Nav 7</li>
</ul>
</div>
<div id="pictureDiv">
<img src="../../images/png/Placeholderstreched.png" />
<h1>Maecenas sollicitudin ultricies neque ut condimentum. Cras id dui dui?</h1>
</div>
<div id="contentDiv">
<h1>Nam vitae lorem!</h1>
<p style="width:500px;">Praesent molestie orci semper lectus aliquet ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ut diam faucibus magna tempus viverra quis id lorem. Quisque ac pulvinar erat. Nullam pretium, ipsum non cursus facilisis; arcu massa viverra quam, sit amet venenatis arcu elit sit amet arcu. <br /> <br />Proin tempus blandit ante non ultrices. Fusce posuere adipiscing metus, a dapibus risus tristique a! Integer faucibus urna commodo metus suscipit sollicitudin. Duis gravida gravida rhoncus. Sed eget felis in risus euismod imperdiet. Proin quis libero quis purus tincidunt facilisis at non massa. Integer auctor aliquam lorem eget sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<ul style="position:relative; right:20px;">
<li>Suspendisse sagittis leo leo. Lorem.</li>
<li>Suspendisse elit velit, scelerisque ut.</li>
<li>Nullam nec magna risus, adipiscing.</li>
<li>Etiam luctus ullamcorper libero ac.</li>
<li>Aenean pretium orci mollis orci.</li>
</ul>
<ul style="position:relative; top:-116px; left:250px;">
<li>In quis arcu justo, sed.</li>
<li>Nullam elementum varius.</li>
<li>Nulla egestas vehicula erat.</li>
<li>Nam congue rhoncus gravida.</li>
<li>Pellentesque habitant morbi tristique.</li>
</ul>
<table width="290" border="0" cellspacing="0">
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="middle"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />
Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
</table>
</div>
</div>
<div id="footer">content for id "footer" goes here</div>
</body>
</html>
Hello Guys, I'm hoping someone might be able to help me here. I have been developing a site for a friend who is starting his own company. I'm a self taught web designer and I'm relatively fresh when it comes to CSS, but I thought I'd give it a shot. I decided to use a sticky footer as I think it makes for a cool look. Everything is working wonderfully in Firefox, but when I test in other browsers I have issues. 1) Safari & IE7 Strange things are happening with the main content not fully displaying The footer isn't "pushed" down by the main site contents and covers up some of the content. Safari is even weirder because it works sometimes when I move around the size of the window itself, making it thinner (my screen is fairly wide). 2) IE 7 My right hand floated div (#contentright) appears in the wrong place. This doesn't happen in Firefox or Safari and I have no idea why. As far as I can tell it should be within the wrapper, to the right of the left content. This is on the sub-pages - there is no right side on the home page. If anyone can help out with these issues I would be grateful. Site is at: <removed at users request> CSS is at: <removed at users request> Code is more or less W3C valid as is CSS, bar a few minor issues which shouldn't be relative to the above. Many thanks, Jo Hi all, I have a page with a sticky footer. It's all working great thanks to the sticky bottom tutorial from Ryan Fait. I already contact him but his wrists are broken so he can't do anything. This is the website we're talking about: - www .rokjesdagloop .nl And here is the deal: - As you can see the footer stays at bottom so I insert the sticky bottom tutorial wich lead us to this: www .rokjesdagloop .nl /test .php But I want the footer a little bit inside the content so the text overlaps the girl a bit on the background. I tried several things on the margin's and the heights but still nothing that works. Does anybody have tips or codes? Would be great! Thank you in advanced! Regards, Jonathan Hi I was hoping someone could help me with a sticky footer layout. What I've got so far kind of works, but not quite perfectly. Basically, I want the top & bottom of the container div to always be 20px from the edge, and for the footer to stick to the bottom of the container. I've kind of got it working, but because of the padding on the body there's always a scrollbar present, plus with some browsers, the footer only seems to stick when resizing the window from the corner. Here's the code: 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>
<title></title>
<style type="text/css">
html {
height:100%;
}
body {
padding:20px 0 20px 0;
background:#d9e7ea;
margin:0px auto;
font-size:11px;
font-family:"Trebuchet MS", Verdana, Helvetica, sans-serif;
color:#000;
height:100%;
}
#wrap {
margin:0 auto;
position:relative;
width: 950px;
min-height:100%;
background-color:Red;
overflow:hidden;
}
#header {
margin:0 20px;
height:100px;
background-color:Green;
}
#content {
margin:0 20px;
padding-bottom:50px;
background-color:#ffffff;
background-color:Blue;
}
#footer {
color:#000;
position:absolute;
bottom:0px;
background-color:Yellow;
height:50px;
width:950px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div>
<div id="content">
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
</div>
<div id="footer">
footer<br />
</div>
</div>
</body>
</html>
Thanks for any help. Please take a look at this page in IE 6.0: http://ist4pos.com/pos_solutions/gemini.html The sticky footer does one of three things. It either sticks properly, it cuts the page off at the fold, or it sticks to the bottom of the page but with several inches of white space underneath. If you refresh the page if will change from one to another. If you click around the site, other pages do this as well, so long as they are long enough to push the page past the fold. IE7 usually works but sometimes the footer hovers in the middle of the page. I can't understand why the same browser on the same computer can render the same page completely differently several times in a matter of seconds. Here is my CSS. All the relevant stuff is right at the top: Code: html, body, #outerDiv {height: 100%;}
body > #outerDiv {
min-height: 100%;
}
#main {padding-bottom: 35px;} /* must be same height as the footer */
#footer p {
font-family: Verdana, Geneva, sans-serif;
font-size: .75em;
color: #FFF;
text-align: center;
padding-top: 10px;
}
#footer {
position: relative;
margin-top: -35px; /* negative value of footer height */
height: 35px;
clear:both;
background-color: #CCC;
}
/* ===== global styles ===== */
h1, h2, h3, h4, h5, h6, p, {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-image: url(images/backGrad2.jpg);
background-repeat: repeat-x;
text-align:center;
}
#outerDiv #threeColumns #middleColumn ul li ul {
font-size: 16px;
}
p {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
margin: 0px 0px 10px;
padding: 0px;
list-style-type: square;
line-height: 1.6em;
text-align: left;
}
h1 {
font-family:Cambria, Verdana, Geneva, sans-serif;
font-size:1.4em;
color: #0067AC;
text-align: left;
line-height: normal;
font-weight: normal;
margin-bottom: 2px;
margin-top: 5px;
}
h2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
color: #666;
text-align: left;
line-height: 1.5em;
font-style: normal;
text-transform: uppercase;
font-variant: normal;
margin-bottom: 10px;
font-weight: normal;
margin-top: 0px;
}
h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
font-weight: normal;
margin-bottom: 7px;
font-style: italic;
}
h4 {
margin-bottom: 10px;
font-weight: normal;
}
/* ===== header ===== */
div#header {
height: 110px;
width: 900px;
position: relative;
background-repeat:no-repeat;
}
div#headerLinks {
float:right;
padding-top: 20px;
}
#header #headerLinks p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #666;
}
/* ====== image placeholders ===== */
div#navPlace {
width: 900px;
height: 35px;
background-color: #808285;
}
div#topDivider {
width: 900px;
height: 35px;
padding: 11px 0px 3px 0px;
}
div#centralPlace {
height: 135px;
width: 900px;
padding-top: 10px;
}
/* Assorted Page SubDivs */
div#leader1 {
float: left;
width: 220px;
}
div#leader2 {
float: left;
width: 220px;
padding-left: 10px;
}
div#sitemapOne {
float: left;
width: 210px;
}
/* ====== three columns ===== */
div#threeColumns {
margin-top:15px;
}
div#outerDiv {
width: 900px;
margin: 0 auto;
text-align:left;
height: auto !important;
height: 100%;
}
div#leftColumn {
position: relative;
width: 185px;
float:left;
}
div#middleColumn {
width: 480px;
float:left;
text-align: justify;
background-color: #FFF;
padding: 15px 15px;
}
div#rightColumn {
width: 191px;
position:relative;
float:right;
text-align: center;
background-color: #FFF;
padding: 0px;
margin-bottom: 40px;
}
/* ====== partner logo ===== */
div#partner {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 35px;
padding-left: 0;
}
#outerDiv #threeColumns #rightColumn #partner img {
}
/* ====== blog/contact button ===== */
div#blog {
padding: 0;
float: right;
width:176px;
margin: 15px 7px 15px 0px;
}
div#contact{
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}
/* ====== social media links ===== */
div#social {
position: relative;
padding-top: 20px;
padding-right: 32px;
padding-bottom: 20px;
padding-left: 0px;
}
#social p {
vertical-align: bottom;
}
#social img {
float: right;
padding-left: 3px;
}
/* ====== float classes ===== */
.fltrt {
float: right;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
.fltleft {
float: left;
margin-top: 10px;
margin-right: 10px;
}
/* ====== Links ===== */
a.graphic:link {
color: #666;
text-decoration: none;
height: 20px;
width: 150px;
background-color: #EEE;
margin-bottom: 2px;
padding: 12px 10px 10px 5px;
display: block;
border-width: 1px 1px 1px 5px;
border-style: solid;
border-color: #0067AC;
}
a.graphic:visited {
color: #333;
text-decoration: underline;
}
a.graphic:hover {
color: #0067AC;
}
a.graphic:active {
color: #0067AC;
}
a.product:link {
color: #999;
text-decoration: none;
margin-bottom: 3px;
padding-bottom: 3px;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-left: 10px;
margin-top: 3px;
padding-top: 3px;
}
a.product:visited {
color: #999;
text-decoration: none;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-top: 3px;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
}
a.product:hover {
color: #0067AC;
}
a.product:active {
color: #0067AC;
}
a.trad:link {
color: #0067AC;
text-decoration: underline;
text-align: left;
margin: 0px 0px 10px;
padding: 0px 0px 10px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:visited {
color: #999;
text-align: left;
margin: 0px;
padding: 0px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:hover {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:active {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
}
a.footer:link {
color:#FFF;
text-decoration: none;
}
a.footer:visited {
color:#FFF;
text-decoration: none;
}
a.footer:hover {
color:#FFF;
text-decoration: underline;
}
a.footer:active {
color:#FFF;
text-decoration: underline;
}
#outerDiv #threeColumns #rightColumn #partner img {
margin-top: 15px;
}
div#download {
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}
#outerDiv #threeColumns #middleColumn ul li {
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: normal;
color: #666;
line-height: 1.6em;
padding-top: 0px;
padding-bottom: 4pt;
font-size: .7em;
}
.tablewhiteheads {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: .7em;
font-weight: bold;
padding-left: 5px;
}
#outerDiv #threeColumns #middleColumn table tr td p {
margin: 2px;
}
div#contactColumn {
width: 524px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
div#missionColumn {
width: 480px;
float:left;
text-align: center;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
#outerDiv #threeColumns #missionColumn p {
font: 16px Cambria, Georgia, "Times New Roman", Times, serif;
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn h1 {
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn p img {
margin-top: 5px;
margin-bottom: 5px;
}
div#siteMapColumn {
width: 660px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
I use an SSI for the footer text, but I've tried removing this and it doesn't seem to make a difference. Does anyone have any idea what's going on here? I just don't understand how it can behave so inconsistently in a singular environment. Thanks! Tim Currently, my main content div has a repeated-y background. However, when my text doesn't span the entire window, it cuts off. Instead, I'd like it to stretch all the way down to my sticky footer. I'm no expert at CSS, and I'm stumped. I've searched all over and tried all sorts of fixes, but I just can't see the problem. Help? Thanks! URL CSS: Code: * { margin:0; padding:0; } html, body, #wrap { height: 100%; min-height:100%; /* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */ /* and http://www.puremango.co.uk/2010/04/css-gradient/ */ /* fallback (Opera) */ background: #8cb6e9; /* Mozilla: */ background: -moz-linear-gradient(top, #8cb6e9, #e0effc); /* Chrome, Safari:*/ background: -webkit-gradient(linear, left top, left bottom, from(#8cb6e9), to(#e0effc)); /* MSIE */ filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0); } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 116px; height:100%; } /* must be same height as the footer */ #contentwrapper { margin: 0 auto; height:100%; min-height:100%; } #content { background-image:url(containerbg.jpg); background-repeat:repeat-y; margin: 0 auto; width:1000px; height:100%; min-height:100%; } #footer { position: relative; margin-top: -116px; /* negative value of footer height */ height: 116px; background-image:url(layout/footer.png); width:100%; background-position:center; clear:both; } /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
HTML: Code: <body> <div id="wrap"> <div id="main" class="clearfix"> </div> <div id="contentwrapper"> <div id="content"> <p>Your website content here.</p> </div> </div> </div> </div> <div id="footer"></div> </body> Hello! I am new to dreamweaver CS3 and need help with these two things: when I preview my site in IE my lightbox does not work. And my sticky footer does not stick to the bottom of the page. Please someone help me. Thank you in advance! I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! I've dabbled with the display: table properties for awhile, and I've looked forward to the time I could use them at work. Equal height columns! No more faking it with extra wrapper div's and background images! As we're finally rolling out IE8 at work, I decided to take a pretty typical layout that I would have laid out years ago in a table. Header, footer, nav and content, that is always at least the height of the page and will expand with more content: http://www.richarddoyle.net/tests/css_table/table.html This could be done using floats, background images, etc, but I wanted to take advantage of what display: table could offer me. So I tried to recreate the same layout. I knew there was no colspan in CSS, but I was sure I could get it to work somehow. My first attempt showed the colspan issue: http://www.richarddoyle.net/tests/css_table/cssversion1.html My second attempt I couldn't get the page to match at least the height of the browser: http://www.richarddoyle.net/tests/css_table/cssversion2.html Is this just impossible to do with display:table properties? Is there some mixture of table properties and sticky footer code that can make this work? 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! How do you do those div's that stick to the bottem of the browser window, in my case, the bottem left? Is it "float:bottem left? Thanks, -Sam I guess I dont know what this technique is called so it was hard for me to search for an answer. The best example I can give is if you go to Dells website or any other site where you can build a computer and as you scroll down there is that box that always stays in the upper right hand corner that displays the price. Is that possible in CSS? Could somebody give me the name of the technique so I can try looking for mulitple answers or show me how its done? Thanks, Dave I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it. <!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> <style type="text/css"> <!-- #headerDiv { position:absolute; left:0px; top:0px; width:100%; height:219px; z-index:1; background-image:url(images/header_bg.jpg) } #leftcontentDiv { position:absolute; left:0px; top:0px; width:50%; height:219px; z-index:2; } #headermenuDiv { position:absolute; width:263px; height:19px; z-index:2; margin-top:5px; margin-left: 10px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; left: 26px; } #rightcontentDiv { position:absolute; right:0px; top:0px; width:50%; height:219px; z-index:2; } #logoDiv { position:absolute; left:0px; top:0px; width:511px; height:101px; z-index:2; background-image:url(images/ogo.jpg) } #searchDiv { position:absolute; left:90px; bottom:0px; width:330px; height:42px; z-index:2; background-image: url(images/search.jpg); } #logosearch_containerDiv { position:absolute; left:1%; top:25px; width:511px; height:146px; z-index:2; } #signupDiv { position:absolute; width:212px; height:19px; z-index:2; margin-top:5px; right:5px; font-size:12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; } #loginDiv { position:absolute; right:0px; top:24px; width:233px; height:119px; z-index:2; background-image:url(images/login.jpg) } #bodytopDiv { position:absolute; left:0px; top:219px; width:100%; height:401px; z-index:2; } #photoDiv { position:absolute; left:0px; top:0px; width:589px; height:349px; z-index:3; } #titlecontainerDiv { position:absolute; right:2px; top:0px; width:50%; height:349px; z-index:3; text-align: left; } body { text-align: center; } #bodytopbottomDiv { position:absolute; left:0px; top:348px; width:100%; height:51px; z-index:3; background-color: #0361C1; } #bodytopDiv #bodytopbottomDiv table { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 12px; } #newalbumsDiv { position:absolute; left:0px; top:620px; width:301px; height:301px; background-image: url(images/newalbums.jpg); } #topalbumsDiv { position:absolute; left:318px; top:620px; width:301px; height:301px; background-image: url(images/topalbums.jpg); } #videosDiv { position:absolute; left:636px; top:620px; width:386px; height:301px; background-image: url(images/videos.jpg); } #lowerbodycontainer { width: 1024px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; left: 0px; top: 0px; } --> </style> </head> <body> <div id="headerDiv"> <div id="leftcontentDiv"> <div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div> <div id="logosearch_containerDiv"> <div id="logoDiv"></div> <div id="searchDiv"></div> </div> </div> <div id="rightcontentDiv"> <div id="signupDiv">New User? Signup | New Artist? Sign up</div> <div id="loginDiv"></div> </div> </div> <div id="bodytopDiv"> <div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div> <div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div> <div id="bodytopbottomDiv"> <table width="777" border="0" align="center" cellspacing="10"> <tr> <td width="145">text goes here</td> <td width="150">text goes here</td> <td width="126">text goes here</td> <td width="161">text goes here</td> <td width="125">text goes here</td> </tr> </table> </div> </div> <div id="lowerbodycontainer"> <div id="newalbumsDiv"></div> <div id="topalbumsDiv"></div> <div id="videosDiv"></div> </div> </body> </html> Hello, I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche 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 a single column CSS layout with a "sticky" footer. In the main column, I have a two column block resulting in a sidebar / main content set-up. Without the two-column block, the stick footer works fine. I can fill the page with 1000 lines of text, simple content DIVs, whatever. But the two-column block breaks it. See it he http://siliconsatan.com/test.php Can't figure out why (I'm a CSS noob, it's probably obvious) Any ideas? |
|||||||