|
CSS - Footer Positioning Issue
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 Similar TutorialsHi 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 have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Is there a way to get a footer always to appear at the bottom of the browser window? Instead of just appearing under however much content is showing above it? please? Hi I've been coding amateur websites and PHP applications for years, but I recently decided to try and learn how to design a website professionally - that is, using Photoshop to mock it up and create a logo, and holding the contents in place using CSS. I'm very pleased with the result (which can be found at haruhi.kg13.com), but there is one bug that I've been trying in vain to resolve, and that is the footer. It took a while to make the footer stay in place, and now it permanently stays on top of any content, which is obviously an issue where I intend to be creating rather long pages without the use of iFrames or any other page-within-a-page technique. Essentially, what I want is for my footer to stay at the bottom of the page (not the browser window) with a 15px margin above it so that I can display as much text as I like on any given page. It's best displayed on the "legal" page, if you increase the font size a bit. Here is my source code. I know some of the CSS elements look unnecessary; I've tried several tutorials for this problem, and this one told me to add a lot of CSS classes. CSS: Code: main.css @charset "utf-8";
/* CSS Document */
body {
font: 9pt/17pt arial;
margin:0;padding:0;
height:100%;
background-image: url(../img/sitebg.gif);
background-repeat: repeat-x;
background-color: #dbe4f7;
margin-bottom:10px;
}
#clear {
clear:both;
}
p {
font-size:14px;
}
a {
color:#FFFFFF;
}
#content {
position:fixed;
margin-left:200px;
margin-right:200px;
/* margin-bottom:30px; */
margin-top:20px;
line-height:25px;
min-height: 100%;
margin-bottom: -36px;
}
* html #content {
height: 100%;
}
#content p {
text-align:right;
font: 12pt/14pt arial;
}
#content a:link {
display:inline;
color:#0094FF;
text-decoration:none;
}
#content a:hover{
display:inline;
background:#004A7F;
text-decoration:none;
}
#header_contain {
width:935px;
height:111px;
background-position:bottom;
display:block;
margin:0 auto;
}
#header_contain p.logo {
display:inline;
width:339px;
height:111px;
text-indent:-5000px;
float:right;
background-image: url(../img/logo.png);
}
#header_contain p.logo a {
display:inline;
width:339px;
height:111px;
text-indent:-5000px;
float:right;
background-image: url(../img/logo.png);
}
ul#top_header {
font-size:18px;
list-style-type:none;
float:right;
margin:0;padding:0;
clear:right;
margin-top:-60px;
margin-right:180px;
}
ul#top_header li {
float:left;
margin-right:50px;
}
ul#top_header li a {
display:block;
color:#FFFFFF;
text-decoration:none;
}
ul#bottom_header {
list-style-type:none;
float:right;
margin:0;padding:0;
clear:right;
margin-top:17px;
}
ul#bottom_header li {
float: left;
margin-right: 15px;
}
ul#bottom_header li a {
display:block;
font-size:14px;
text-decoration:none;
}
#footer-spacer {
height: 36px;
}
#footer {
display:block;
position:absolute;
bottom:0;
width: 100%;
background:#c3cdda;
height:36px;
}
ul#bottom_footer {
list-style-type:none;
float:right;
margin:0;padding:0;
clear:both;
margin-top:8px
}
ul#bottom_footer li {
float:left;
margin-right: 15px;
}
ul#bottom_footer li a {
display:block;
font-size:18px;
text-decoration:none;
bottom:15px;
}
#top {
position: absolute;
}
HTML (ignore the .php file extension, I'm generating content using includes) Code: index.php
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>KieranJones.org | Home</title>
</head>
<body>
<div id="top"></div>
<div id="header_contain">
<p class="logo"><a href="index.php">KieranJones.org</a></p>
<ul id="top_header">
<li><a href="index.php?action=blog">Blog</a></li>
<li><a href="index.php?action=portfolio">Portfolio</a></li>
<li><a href="index.php?action=contact">Contact</a></li>
</ul>
</div>
<div id="content">
<?PHP include("action.php"); ?>
<div id="footer-spacer"></div>
</div>
<div id="footer">
<ul id="bottom_footer">
<li><a href="index.php?action=advertising">Advertising</a></li>
<li><a href="index.php?action=legal">Legal</a></li>
</ul>
</div>
</body>
</html>
Thanks Kieran Ok, I have this page where the footer <div> isn't paying attention to where the menu <div>'s are. If you look -> Here, you will see how the site is meant to look, i.e. the footer is below everything else. But, if you look -> here, you will see that if the contents of the main <div> are shorter than the menu ones, the footer follows it up the page, and goes underneath the two menu divs. Both menu's are absolutely positioned, so I don't really know how to get the footer to notice they are there, and position itself accordingly... Any thoughts anyone? Cheers, Jon. Hi there, I was wondering if someone could help me a with a problem with my footer positioning. I'm building my website he thecoastguard.co.uk My footer is sitting to the right of the sidebar. I want it to be centered. The current CSS is: #footer {float:left; border-top: 1px solid #cccccc; padding: 0; margin: 20px 0 0 0; clear:both; width: 850px;} #footer p {margin: 0; padding: 5px 10px; text-align: center;} I've tried changing the float to right. That works in firefox but not in IE. Center float does nothing at all. any advice would be much appreciated. Thanks! Siobhan Hello everyone! First time poster here! I am having trouble getting a footer to position itself at the bottom of the page. I have tried to use the "bottom: 0;" and it pushes it to the bottom of the screen, but does not give the footer a static position in the page. Here is my css file: Code: body {
margin: 16px 0 0 35px;
padding: 0;
background: fixed #738b41 url(../images/bk.jpg) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}
h1, h2 {
font-weight: bold;
color: #FFFFFF;
}
h1 {
margin: 0 20px 0 20px;
font-size: 150%;
}
h2 {
margin: 15px 20px 10px 0;
font-size: 125%;
}
p {
margin: 20px;
text-align: left;
text-indent: 0;
}
img {
border: none;
margin: 0 auto;
}
img.left {
float: left;
margin: 0 auto;
padding: 0 25px;
}
img.right {
float: right;
margin: 0 auto;
padding: 0 15px 0 5px;
}
img .left1 {
float: left;
margin: 0 auto;
padding: 10px 0 0 0;
}
img .right1 {
float: right;
margin: 0 auto;
padding: 10px 0 0 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
}
/* Header */
#header {
clear: both;
width: 960px;
margin: 0 auto;
padding: 0;
}
#logo {
width: 215px;
height: 215px;
margin: 0 auto;
float: left;
}
#social {
width: 300px;
height: 150px;
margin: 0 auto;
float: right;
}
#social .facebook {
width: 110px;
height: 150px;
margin: 30px 0;
float: left;
}
#social .twitter {
width: 128px;
height: 150px;
margin: 25px 25px 0 0;
float: right;
}
#menu {
width: 675px;
height: 65px;
margin: 10px 0;
float: right;
background: url(../images/menu.png) no-repeat;
}
#menu ul {
margin: 0;
padding: 0 25px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin: 0 auto;
padding: 20px 20px 0 20px;
text-decoration: none;
font-weight: bold;
font-size: 110%;
color: #c8d8a7;
}
#menu a:hover {
background: url(../images/barn.png) no-repeat left 105%;
}
#content {
width: 960px;
margin: 0 auto;
padding: 22px 0;
background: url(../images/content_top.png) top left no-repeat;
clear: both;
}
#main {
width: 960px;
margin: 0 auto;
padding: 0;
position: absolute;
background: url(../images/content_middle.png) left repeat-y;
}
#main .textarea {
width: 605px;
margin: 0 auto;
padding: 5px 0;
float: left;
}
#main .sidebar {
width: 345px;
margin: 0 auto;
padding: 0 5px 15px 0;
float: right;
}
#main .sidebar .lower {
margin: 0 12px 0 0;
padding: 10px 0 10px 30px;
background: url(../images/side-bar-bk.png) top right no-repeat;
position: relative;
clear: both;
}
#footer {
padding: 0 10px 0 10px;
}
#footer p {
font-size: 10px;
color: #FFFFF;
}
#footer .copyright {
float: left;
}
#footer .crosspoint {
float: right;
}
I know this is probably something very simple, but I have stared at it so long that I need a fresh set of eyes. In case you need it, here is the HTML as well: Code: <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="" /> <meta name="description" content=""/> <meta name="category" content="Agriculture"/> <meta name="rating" content="General"/> <meta name="GOOGLEBOT" content="INDEX, FOLLOW"/> <meta name="ROBOTS" content="INDEX, FOLLOW"/> <meta name="revist-after" content="15 days"/> <meta name="author" content="Crosspoint Creative Marketing, LLC"/> <link href="css/default2.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="header"> <div id="logo"> <a href="#"><img src="images/logo.png" alt="Blake Dairy Farms: Knoxville's Corn Maze Destination!"/></a> </div> <div id="social"> <div class="facebook"> <a href="" title="Connect with our Corn Maze crew on Facebook"> <img src="images/fb.png" alt="Like us on Facebook!" /></a> </div> <div class="twitter"> <a href="" title="Help promote our Corn Maze on Twitter!"> <img src="images/twitter.png" alt="Connect with us on Twitter!" /></a> </div> </div> <div id="menu"> <ul> <li class="a"><a href="#">Home</a></li> <li><a href="the-farm.html">The Farm</a></li> <li><a href="our-corn-maze.html">Our Corn Maze</a></li> <li><a href="about-the-blakes.html">About the Blakes</a></li> <li><a href="contact-us.html">Contact Us</a></li> </ul> </div> </div> <div id="content"> <div id="main"> <div class="textarea"> <h1>Welcome to Blake Dairy Farms online!</h1> <p><img src="images/blake-dairy-farms.jpg" alt="Blake Dairy Farms" class="right" /> Thank you for visiting our site! We look forward to connecting with you and hope to be your choice for agritourism in Knox county.</p> <p>Blake Dairy is a first generation farm located in beautiful Strawberry Plains, TN just an hour away from the Smokey Mountains. We have been in business for over ten years and have been very blessed with growth we have seen during that time.</p> <p>Have a look around our website. We have a blog that we try to keep updated to let you all know what is going on here at the Dairy. We are also on Facebook and Twitter so be sure to connect with us there as well!</p> <p>If you live here in Knox county, be sure to keep up with our Corn Maze and Farm Festival this September and October. We are putting together a fun and educational event that you can bring the whole family out to and spend the entire day. Check out our Corn Maze Page for more information and dates. If you would like to learn more about our operation here, don't hesitate to contact us!</p> <a href=""><img src="images/dairy-farmers-of-america.png" alt="Dairy Farmers of America" class="left" /></a> <img src="images/thanks-knoxville.png" alt="Thanks for checking out our Corn Maze!" class="right" /> </div> <div class="sidebar"> <img src="images/dairy-farm.png" alt="Blake Dairy Farm: Knox County's Fall Festival and Corn Maze Destination" class="right" /> <div class="lower"> <h2>Our Corn Maze Sponsors:</h2> <a href="" title="Corn Maze Sponsor: Crosspoint Creative Marketing"> <img src="images/crosspoint-creative-marketing.png" alt="Crosspoint Creative: Corn Maze Sponsor" class="left1" /></a> <img src="images/knox-farmers-co-op.png" alt="Knox Farmer's CO-OP: Corn Maze Sponsor" class="right1" /> <p>Be sure to visit their websites! They have helped to make this event possible.</p> </div> </div> </div> </div> <div id="footer"> <p>Testing</p> </div> </body> </html> Thanks for taking a look and I appreciate any help whatsoever! Hello ppl, the problem I got is the following: I have a set of pages consisting of a header a main content and a footer. I made the footer displaying at the bottom of the page even if the page is empty by the help of the following post: http://forums.devshed.com/showthrea...39&page=1&pp=15 The problem I have now is: in the css file I do not define the variable width for the header and it gets displayed like I would expect it if I said width=100%. Now if I do not define the width of the footer it is really small. If I define it like width=100% it looks ok in IE and like 102% in mozillabased browsers. Now I do not want to talk about IE vs. Mozilla issues, I just want to know why defining no width for the header works but not for the footer. here is a link to my page where footer has a width=100% : www.ovidius-journeys.de/index.html and the link to the coresponding css file is www.ovidius-journeys.de/tierraverde-screen.css here is a link to a test page where footer is lacking a width definition: www.ovidius-journeys.de/test.html and the coresponding css file is www.ovidius-journeys.de/test.css Please remember to test both url with IE and Mozilla to see the difference. I am seriously determined to fix this misbehaviour. THerefore I made a small drawing to illustrate things: www.ovidius-journeys.de/images/diagramm.jpg There is a hotlink protection active, I managed to bypass it a little but you still have to copy the url into a new browser window, meaning only referers from my domain are allowed but entering the url manually without sending a referer will work. The drawing shows how my pages are structured. I also added some atributes from the css file as far as I thought them relevant for this problem. Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! my pages have the following structure, which you can see in action at http://www.auroratheatre.org: Code: <body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
<div id="col"> left nav </div>
<div id="main"> main center column </div>
<div id="photocol"> right column </div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and the following CSS: Code:
html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
}
html>body, html>body #wrapper {
height: auto;
}
#header {
text-align: center;
background-color: #000;
height: 90px;
width: 100%;
}
#content {
width: 775px;
margin: 0 auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 404px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
clear: both;
background-color:#000;
text-align: center;
width: 100%;
position: absolute;
bottom: -1px;
}
This works well for compliant browsers, centering the content on the screen and putting the footer at the bottom of the viewport even if the content isn't long. This is what I want. The trouble is, in IE 5.0 it doesn't center the content, just the background, and everything is thrown to hell. A little scratching around revealed that if you want to center a div in IE 5.0, you need to use text-align: center. OK, but if I DO that, and add a text-align: center to the #wrapper div, then everything is OK in IE 5.0 and Mozilla, but NOT IE 6.0 - modern IE browsers do a weird thing of putting the footer to right of all the content, making the page scroll horizontally, which is ugly as hell. If I remove the position: absolute from the #footer div than that problem goes away, but the footer sits at the bottom of the content, not the viewport, and pages with short content look bad. Anyone know of a way to have it all ways? Centered content and absolute footer and happy IE 5.0? Thanks, -D Hi - I've got an issue with the positioning on my footer - It displays at the top of the page (underneath the top content and stuff) when I want it to display at the end of my main DIV - #wrapper. here's my css: Code:
/* WRAPPER corresponds to the container that surrounds all the content (navigation, text, etc.) */
#wrapper {
position: absolute;
width: 768px;
left: 0px;
top: 0px;
background-color: #FFFFFF;
}
/*BEGIN content elements (display within the wrapper - in theory) */
.inner_header {
position: absolute;
top: 4px;
width: 565px;
}
.inner_content {
position: relative;
top: 126px;
left: 189px;
width: 515px;
}
.inner_headline {
position: absolute;
top: 94px;
left: 189px;
width: 350px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #000066;
}
.inner_top_right {
position: absolute;
left: 565px;
top: 4px;
width: 203px;
}
.inner_searchbox {
position: absolute;
top: 250px;
left: 7px;
width: 166px;
}
.inner_topbar {
position: absolute;
width: 768px;
height: 4px;
background-color: #1f295c;
}
/*END content */
/* HERE's the part I want to display at the END of all other loaded content. */
#footer {
width: 768px;
margin-top: 0px;
}
Here's the HTML: Code: <div id="wrapper">
<div class="nav">
<?php include "nav.php"; ?>
</div>
<div class="landing_page">
<?php include "land.php"; ?>
</div>
<h1><?php echo $message; ?></h1>
<div class="header">
<?php include "header.php"; ?>
</div>
<div class="searchbox">
<?php include "searchbox.php"; ?>
</div>
<div class="featured_jobs">
<?php include "featjobs.php" ?>
</div>
</div> <!--close the wrapper-->
<div id="footer">
<?php include "footer.php"; ?>
</div>
Thank you in advance for considering my question. -Taylor Hi all, Basically I want to position a footer at the very bottom of my page which is 100% in width. So far I have: Code: .linkbar {
display:block;
background-color:black;
position:absolute;
height:100px;
width:100%;
bottom:0px;
left:0px;
}
.picturebox {
display:block;
background-color:blue;
position:absolute;
height:50px;
width:50px;
bottom:0px;
left:0px;
}
This is what I have so far and I geta reasonable result in IE but nothing at all in firefox, the box doesn't even appear. Any help would be greatly appreciated! Regards, Jack. 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! 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. Hey. 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; }
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. Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hi I am not really very familiar with the positioning element. I have a site that has a fixed width in the center of the page. It all works fine. However there is a hidden box that pops up when you enter any text in the newsletter box at the top right - this appears outside of the fixed width and I cannot understand why it is allowed to do so. I notice that it does have "absolute" positioning defined in the CSS. Any clues as to what I can do to bring it back to its correct place under the newsletter box? Thanks a lot Site: http://www.componentcompare.com |
|||||||