|
CSS - Footer Issue
Hey guys,
Believe me, I did not come to these forums first thing when it didn't work. I've tried quite a bit trying to get a working sticky footer on the bottom of my page. I'm an amateur web designer, and it wasn't clear, I want to make a footer that sticks to the bottom of the page naturally, as any common footer would do. I've read through a number of different tutorials but none of them seem to work, so I figure there must be something wrong with my code. You can view my problem page he http://vivanidesign.com/testing/testz2.html Here is my CSS: Code: body {margin: 0px;height: 100%;}
.headerstyle1 {background-image: url(header_1classified.png); width: 957px; height: 191px; background-repeat: no-repeat;}
.headerstyle2 {background-image: url(header_3.png); height: 191px; background-repeat: repeat-x; margin-top: auto; margin-left: auto; margin-right: auto;}
.headerstyle3 {background-image: url(headercloud.png); width: 172px; height: 74px; position: absolute; left: 0; top: 0;}
.navwrapper {
width: 938px;
position: absolute;
right: 50%;
top: 400px;
padding-bottom: 200px;}
.navbar {background: #6cbdf0; background-repeat: no-repeat; width: 938px; height: 53px; margin-top: -170px; position: relative; left: 50%;}
.searchbarwrapper {width: 255px; position: relative; top: 0px; left: 1055px;}
.searchbar {background: #6cbdf0; background-repeat: no-repeat; width: 100%; height: 45px;}
.box1 {background: #e4f4ff; background-repeat: repeat-y; width: 220px; height: 350px; position: relative; left: 456px; top: -11px; float: left;}
.box2 {background: #aadaf9; width: 220px; height: 370px; position: relative; top: 20px; float: left; left: 487px;}
.box3 {background: #e4f4ff; width: 220px; height: 370px; position: relative; top: 20px; float: left; left: 500px;}
.box4 {background: #aadaf9; width: 248px; height: 220px; position: relative; top: 15px; float: left; left: 510px;}
.footer {position: relative;
margin-top: -150px;
height: 150px;
clear: both;}
.wrapper {min-height: 100%;}
And here is my HTML: Code:
<body>
<div class="wrapper">
<div align="center" class="headerstyle2">
<div class="headerstyle1"> </div>
</div>
<div class="headerstyle3"> </div>
<div class="navwrapper">
<div class="navbar"></div>
<div class="searchbarwrapper">
<div class="searchbar"> </div>
</div>
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
</div>
<div class="footer"></div>
</body>
So if someone could tell me how to get a working footer on this page I would appreciate it very much! Thank you! Similar TutorialsHey. I have coded a css layout and I got everything like I want it, EXCEPT the footer. I can't make it to follow the rest of the design. For example, I want it to be below the main content area all the time, for instance when the main content area expands, the footer stays at the same place? How can I make it follow the main content area? Html code: Code: <!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" xml:lang="en" lang="en"> <head> <title><?php echo $websitetitle; ?></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="lineweb.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="bg_left"> <div id="wrapper"> <?php include($path . "header.tpl.php"); ?> <table> <tr> <td> <div id="img_nav"> <a target="_blank" href="http://forum.l2web.org/"><img src="images/hq/comm_hq.png"></a> <a href="index.php?page=downloads"><img src="images/hq/client_hq.png"></a> </div> <div id="server_nav"> <a href="index.php"><img src="images/hq/home_hq.png"></a> <a href="index.php?page=howto"><img src="images/hq/connect_hq.png"></a> <a href="index.php?page=rankings"><img src="images/hq/rankings_hq.png"></a> <a href="index.php?page=statistics"><img src="images/hq/statistics_hq.png"></a> <a href="index.php?page=features"><img src="images/hq/features_hq.png"></a> <a href="index.php?page=contact-us"><img src="images/hq/contact_us_hq.png"></a> </div> <div id="page_contents"> <div id="get_page"> Footer should be below this content space </div> <div id="sidebar"> <table> <tr> <td class="user_cp_title"> <div style="side_bar_cont"> <center>User Control Panel </center></div> </td> </tr> <tr> <td class="user_cp_con"> <div class="user_cp_welcome">Welcome User!</div> <ul> <li class="user_cp_nav"> <a href="#">Control Panel </a></li> <li class="user_cp_nav"> <a href="#">Change Password </a></li> <li class="user_cp_nav"> <a href="#">Vote & Earn Points </a></li> <li class="user_cp_nav"> <a href="#">Vote Shop </a></li> <li class="user_cp_nav"> <a href="#">Change Email </a></li> <li class="user_cp_nav"> <a href="#">Delete Account </a></li> </ul> <div class="user_logout_question"><a href="index.php?page=logout">Logout?</a></div> </td> </tr> </table> </div> </div> <div id="footer"> Footer </div> </div> </div> </td> </tr> </table> <div id="footer"> FOoter </div> </body> </html> This is the css: Code: body{ background:url(images/hq/bgx2.jpg) top center no-repeat #020d1f; margin:0px; padding:0px; font-family: Arial, Helvetica, Sans-Serif; } .news_title { padding: 5px; float:left; } .news_texturing { padding: 5px; } .news_hq { padding-bottom: 8px; padding-top: 5px; } .news_by_n_time { font-weight: bold; color:#938d8d; background: #efefef; padding: 5px; min-width: 563px; max-width: 570px; border: 1px solid #d6d6d6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .news_left { background: url(images/hq/news_left.gif) no-repeat; width: 12px; height: 33px; } .news_center { min-width: 570px; max-width: 570px; height: 33px; background: url(images/hq/news_center.gif) repeat-x; font-size: 15px; font-weight: bold; color:#FFFFFF; } .news_right { background: url(images/hq/news_right.gif) no-repeat; width: 12px; height: 33px; } img { border: 0px; } .forgot_pws_quest a:hover { color:#2e63b2; } .forgot_pws_quest a { top: 10px; color: #505050; } .forgot_pws_quest { font-size: 13px; font-family: 'Arial'; float:right; padding-left: 10px; } .user_login_btn { border: 0px; padding: 5px; height: 32px; width: 82px; background: url(images/hq/login_btn2.gif) no-repeat; font-family: 'Tahoma'; font-weight: bold; font-size: 14px; } a { color: #362c2c; } #bg_left { background: min-height: 1038px; } .user_logout_question { padding-top: 8px; padding: 5px; float:right; font-family: Arial; font-weight: bold; color:#4e4e4e; } .user_cp_title { width: 265px; height: 45px; background: url(images/hq/user_cp_title.png) top center no-repeat; padding: 8px; padding-top: 1px; font-family: Arial; font-weight: bold; font-size: 15px; color: #FFFFFF; } ul { padding: none; margin: 0; padding-left: 0; } .user_cp_nav ul { list-style: none; } #get_page { border-right: 1px dotted #cccccc; font-size: 13px; float:left; width: 593px; padding-right: 10px; padding-top: 10px; padding-left: 10px; } .user_cp_nav a { color: #362c2c; text-decoration: none; } .user_login_fields { margin-top: 4px; width: 230px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: Arial; font-size: 13px; font-weight: bold; border: 1px solid #a9a9a9; padding: 5px; } .user_cp_nav { margin-top: 4px; list-style-type: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: Arial; font-size: 13px; font-weight: bold; border: 1px solid #a9a9a9; padding: 5px; } .user_cp_welcome { padding-bottom: 5px; font-family: Arial; font-weight: bold; color:#9e9e9e; } .user_cp_con { padding: 5px; background-color:#f2f2f2; border: 1px solid #b0b0b0; } .side_bar_cont { padding: 10px; } #sidebar { padding-right: 10px; float:right; width: 260px; padding-top: 2px; } #wrapper { height: 800px; position: relative; width: 950px; margin:0 auto; } #footer { margin-bottom: 0px; position: relative; bottom:0; } #page_contents { background:url(images/hq/new_content.png) top center no-repeat #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 5px solid #2f3e51; min-height: 478px; top: 405px; position: absolute; left: 10px; width: 895px; } #server_nav { position: absolute; left: 50px; top: 285px; } #img_nav { position: absolute; right: 50px; top: 330px; } .main_content { padding-bottom: 20px; position: absolute; width: 960px; } #main_content { margin-bottom: 20px; position: absolute; width: 960px; } #left-header a { text-decoration: none; } #left-header { position: absolute; padding-top: 8px; color: #FFFFFF; font-family: Arial; left: 35px; } #main-menu { padding-top: 5px; position:absolute; right: 50px; } #header { font-size: 13px; width: 500px; } #logo { float:left; padding-top: 50px; }
http://www.robertet.com/uk/contacts...ion/contact.php I am trying to emulate the footer that is in the page above. The footer works like this in three ways: 1 - It is always at the bottom regardless of the content 2 - If the page goes very long the footer will always stay a certain distance away from the body content 3 - If the content is short the footer will stay at the bottom of the screen I've spent a few days trying to break it down, but I still can't figure out what is making this work its magic. Resize your browser a bit and you'll see what I mean. You'll know what I am talking about if you are using a higher resolution. This fix must be cross browser compliant including ie6. I am getting better with css but this issue is driving me mad, i have a nice simple layout, and have the footer so its always where it should be. But as soon as i try and have a two column layout in the middle it stops the footer being where it should and is only positioned in the actual window so when you scroll it does not stay at the footer. Here is the html Code: <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Site</title> <link rel="stylesheet" type="text/css" href="../html/driving.css" /> </head> <body> <div id="container"> <!-- Header Starts Here --> <div id="header"> <img src="../html/images/logo.gif" width="480" height="180" alt="Crafty Cakes" style="vertical-align:top"/> </div> <!-- Content Holder Starts Here --> <div id="content"> <div class="left"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div class="right"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> </div> <!-- Footer Spacer Here --> <div id="spacer"> </div> <!-- Footer Starts Here --> <div id="footercontainer"> <div class="footer"> <ul> <li><a href="#">Link</a></li> </ul> <p><a href="#">Terms and Conditions</a></p> </div> </div> </div> </body> </html> And here is the css: Code:
/* CSS Style sheet */
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
background-color: #ffffff;
background-image: url(inc/mainbackground.gif);
background-repeat: repeat-x;
background-position: center top;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
position:relative; /* needed for footer positioning*/
width:1024px;
height: 230px;
margin:0 auto; /* center, not in IE5 */
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
position:relative; /* needed for footer positioning*/
width:1024px;
margin:0 auto; /* center, not in IE5 */
padding:1em 1em 5em; /* bottom padding for footer */
height:100%;
}
div#content p {
text-align:justify;
padding:0 1em;
}
.left {
position:relative; /* needed for footer positioning*/
width: 200px;
float: left;
}
.right {
position:relative; /* needed for footer positioning*/
width: 700px;
float: right;
}
/* FOOTER */
div#footercontainer {
position:absolute;
width:100%;
height: 100px;
bottom:0; /* stick to bottom */
background-image: url(inc/footercontainer.gif);
background-repeat: repeat-x;
background-position: left top;
}
.footer {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:1024px;
height: 100px;
font: 12px Lucida Grande, Tahoma, sans-serif;
color: #ffffff;
background-image: url(inc/footer.gif);
background-repeat: no-repeat;
background-position: center top;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 40px;
}
.footer li {
display: inline;
margin: 0px;
margin: 0;
padding: 10px 10px 0px 10px;
}
.footer li a {
text-decoration: none;
color: #ffffff;
}
.footer li a:hover {
color: #000000;
}
.footer p {
padding: 0px 10px 0px 10px;
}
.footer p a {
text-decoration: none;
color: #ffffff;
}
.footer p a:hover {
color: #000000;
}
/* END footer */
I have tried all sorts, but it just will not work. The content div holds these columns as div classes. If I take the classes out and have the content div for content it works fine. Hi there, Was hoping somebody could help me. I've been working on a new footer for a company and have got a positioning issue with it. If the content of the page is rather long, it will go under the footer with the footer displaying over the top and the content carrying on below it rather than moving the footer down as long as it needs to. I've tried playing with the CSS of the DIV ID 'content' which the content sits in, and the DIV ID 'footertest' which is the footer and the below displays a test page that is the closed I have it to work. The long list of 'testing' at the bottom should obviously push the footer down not go underneath and beyond it down the page. The current CSS for 'content' and 'footertest' is as follows: #content { width: 512px; padding:3px; margin:5px; margin-left:18px; float: left; /*border:1px solid #000000;*/ } #footertest { background-image:url(/images/footertest.png); height:70px; width:951px; margin-left:14px; position:absolute; } I'm unable to post URLs yet so cannot provide the link to the test page I have setup. I've got a pretty basic layout: Code: <div id="wrapper"> <div id="LeftBar"></div> <div id="Header"></div> <div id="MainContentPane"> </div> <div id="Footer"></div> </div> The Footer runs the full width of the page. The Leftbar runs from the top of the page to the top of the Footer. The header runs from the right side of the Leftbar to the width of the wrapper. The MainContentPane runs from the right side of the Leftbar, bottom of the Header to the top of the Footer. The Leftbar contains a vertical graphic as a background and it does not contain any other content. I'm trying to figure out how to make the Footer sit tight to the bottom of what ever content is in the MainContentPane section and have the Leftbar not show below the Footer if the MainContentPane is vertically smaller then the background image in the Leftbar. The look of the page is pretty straight forward and common so if my explanation is confusing I apologize. TIA Hi there, I'm new to CSS, and I have stumbled myself to where I am now, but I have two issues which are causing me problems. You can see the problem he URL http://img.photobucket.com/albums/v227/Fynci/ffsargh.jpg The code I am using is: Code: <html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Rack & Ruin records</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color: #B8C0D1;
text-align: center;
width: 780px;
}
#header {
width: 100%;
}
#leftcol {
float: left;
width: 350px;
height: 500px;
}
#biographyinfo {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#rightcol {
float: left;
width: 420px;
height: 500px;
}
#biography {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
}
#artistimage {
height: 300px;
width: 300px;
float: left;
padding-bottom: 10px;
}
#content {
float: left;
width: 30px;
height: 500px;
}
#artistname {
font-size: large;
color: #000000;
text-align: left;
padding-bottom: 10px;
}
#footer {
clear: both;
width: 100%;
}
#albumart {
float: left;
height: 100px;
width: 100px;
padding-right: 5px;
}
#artistnews {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
#links {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
padding-top: 10px;
}
#artistnewsheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#Linksarea {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#albmuinfo {
font-size: 60%;
height: 100px;
text-align: left;
width: 350px;
}
#otherheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#othertext {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../new.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="header"><a href="../index.html"><img src="../images/rackandruinlogo.gif" alt="Rack & Ruin records" width="780" height="127" border="0" /></a></div>
<div id="nav">
<ul>
<li><a href="../news.php">News</a></li>
<li><a href="../artists.php">Artists</a></li>
<li><a href="../releasesfull.php">Releases</a></li>
<li><a href="../live.php">Live</a></li>
<li><a href="../links.php">Links</a></li>
<li><a href="../about.php">About</a></li>
<li><a href="../contact.php">Contact</a></li>
<li><a href="http://www.myspace.com/rackandruinrecords" target="_blank">Myspace</a></li>
<li><a href="http://www.rackandruinrecords.com/forum/" target="_blank">Forums</a></li>
<li><a href="http://rsspect.com/rss/rackandruinrssfeed.xml" target="_blank">RSS</a></li>
</ul>
</div>
<div id="artistname"><!-- TemplateBeginEditable name="Name" -->Artist<!-- TemplateEndEditable --></div>
<div id="leftcol">
<div id="artistimage"><!-- TemplateBeginEditable name="Artistimage" --><img src="" alt="Artist" name="artistimage" width="300" height="300" class="imageborder" style="background-color: #B8C0D1"><!-- TemplateEndEditable --></div><div id="biography">Biography
<div id="biographyinfo"><!-- TemplateBeginEditable name="biography" -->Content for id "biographyinfo" Goes Here<!-- TemplateEndEditable --></div>
</div>
<div id="links">Links
<div id="Linksarea"><!-- TemplateBeginEditable name="Linksarea" -->Content for id "Linksarea" Goes Here<!-- TemplateEndEditable --></div>
</div>
</div>
<!--Left section -->
<div id="rightcol">
<div id="albumart"><!-- TemplateBeginEditable name="albumart1" --><img src="" alt="" name="albumart" width="100" height="100" style="background-color: #B8C0D1"><!-- TemplateEndEditable --> </div>
<div id="albmuinfo"><!-- TemplateBeginEditable name="albuminfo" -->Content for id "albuminfo" Goes Here <!-- TemplateEndEditable --></div>
<div id="gap"></div>
<div id="artistnewsheader"><!-- TemplateBeginEditable name="artistnewsheader" -->Artist News<!-- TemplateEndEditable -->
<div id="artistnews"><!-- TemplateBeginEditable name="artistnews" -->Content for id "artistnews" Goes Hee<!-- TemplateEndEditable --></div>
</div>
<div id="gap"></div>
<div id="otherheader"><!-- TemplateBeginEditable name="otherheader" -->Other<!-- TemplateEndEditable -->
<div id="othertext"><!-- TemplateBeginEditable name="othertext" -->Other text<!-- TemplateEndEditable --></div>
</div><!--Right section -->
<div id="gap"></div></div>
<div id="footer"><img src="../images/Base.gif" alt="Creative Commons" width="90" height="33" /><br />
<span class="footertext">(c) 2008/2009 <a href="mailto:dean@rackandruinrecords.com">D.Birkett</a></span></div>
</body>
</html>
and the new.css file is: Code: body {
background-color: #B8C0D1;
text-align: center;
width: 780px;
margin-right: auto;
margin-left: auto;
}
.dateinfotext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
}
a:link {
text-decoration: none;
color: #000000;
}
#nav {
background-color: #B8C0D1;
text-align: center;
padding: 10px;
margin-bottom: 10px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav li {
display: inline;
list-style-type: none;
margin-right: 10px;
margin-left: 10px;
}
#nav a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 85%;
}
#nav a:hover {
color: #FFFFFF;
font-size: 85%;
text-decoration: none;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
#gap2 {
text-align: center;
padding: 5px;
clear: both;
}
.albuminfo {
font-size: 60%;
}
a:active {
color: #000000;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
}
.imageborder {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
}
#gap {
text-align: center;
padding: 5px;
clear: both;
}
#footer {
text-align: right;
float: right;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 150px;
vertical-align: bottom;
}
.texttop {
vertical-align: text-top;
}
a {
color: #000000;
text-decoration: none;
}
.footertext {
font-size: small;
}
.normaltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
Any help or advice would be greatly appreciated! I'm having two issues with IE on my site. 1. IE is displaying the body background image (bg.jpg) throughout the entire page. 2. IE is pushing the sidebar way down. Neither of these issues exist in Firefox. I think the second issue may have something to do with the first issue. Here is the relevant code. Code: html,body * {
padding:0px;
margin:0px;
}
body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#fb7d21;
margin:0 auto;
height:100%;
}
div#container {
width:792px;
margin:0 auto;
background-image:url(images/filler.jpg);
background-repeat:repeat-y;
}
div#header {
width:792px;
height:109px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-top:20px;
}
div#content {
float:left;
width:570px;
padding:0 0 0 10px;
margin-top:-40px;
}
div#sidebar {
float:right;
width:212px;
margin-top:-95px;
}
div#footer {
clear:both;
width:792px;
height:84px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
}
You can see the issues on my site here. Any idea what is causing this? Thanks in advance. I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image. This is how its currently set up: container div header div wrapper div wrapper div left div middle div right div footer div wrapper div the footer has position: absolute; bottom: 0; the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content. the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it.. I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all. Can anyone help? Hello All, My question regards footers using CSS. How would you have a footer like they do on Linkworth(dot)com so that it fluctuates depending on how long the page is? So if you have a really long scrolling page, the footer is at the bottom and likewise if the page is really short, the footer is also at the bottom, but so there is never any white space below it. I have a similar design I am working on, but when there is too much type, it runs behind the footer image and the footer never moves down accordingly. Thank you for your help - appreciated. Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!). I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page. Can I do this in CSS? |
|||||||