|
CSS - Sticky Div (to The Bottem Left Of The Screen)
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 Similar Tutorialshttp://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. Hi: I have the following in My CSS file PHP Code: #body { background: url('images/columns.gif') repeat-y; text-align: left; } #body2 { width: 256px; padding: 10px; float: left; background: url('images/body2_bg.gif'); } #body1 { width: 654px; float: left; padding: 10px; } The intention is that the main body of the web page is in the "#body" ID. That section contains two ID's, "#body2" is the menu which is narrower and floats left, "#body1" is wider and floats right. The issue is that #body2 is supposed to have a darker color background and #body1 is supposed to have a white background. This works fine except when the length of #body1 exceeds the length of #body2, then there is white space at the bottom of the #body2 "column". Can anyone suggest a fix for this so that the entire left column is a color, regardless of the page length of the #body2? Thanks Thanks I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? I always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
Hi, I have this page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB #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. 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 Hi, 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 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 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! 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> 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 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 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>
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? |
|||||||