Css and page layout trouble

Status
Not open for further replies.
D

debo2476

New Member
Messages
8
Reaction score
0
Points
0
hi guys i was wondering if one of you chaps could help me out here, i have a div footer and i want it to stay at the bottom but its not happening im sure its something simple that i have forgotten, heres the code for the index and css thanks :)

<!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" lang="en" xml:lang="en">
<head>
<title>Welcome to shadow skill WoW website</title>
<link href="lukestyle.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<!-- -->

<!-- advert -->
<div id="adverts">
<script type="text/javascript" src="http://x10hosting.com/adserve.js?luke1983" />
</div>
<!-- adverts end -->

<img width=100% src="images/title.jpg" alt="Title image" />

<!-- navigation starts here -->
<div id="navi">
<a href="http://shadowskill.exofire.net/index.php" >Home</a>
<a href="http://shadowskill.exofire.net/forum/" > Forum</a>
<a href="http://shadowskill.exofire.net/videos.php" > Vidz</a>
<a href="http://shadowskill.exofire.net/downloads.php" > Downloads</a>
<a href="mailto:lukedes21@hotmail.com" > Email us</a>
</div>
<!-- navigation ends here -->


<!-- main body starts now -->
<div id="main">
<?php include("welcome.txt"); ?>
</div>
<!-- main body ends here -->

<!-- news starts here -->
<div id="news">

<?php include("news.txt"); ?>
<img src="images/newsimg.jpg" width="130px" alt=" " />
</div>
<!-- news ends -->

<!-- footer -->
<div id="footer">
&copy; 2007
</div>
<!-- footer ends -->
</body>

</html>



and heres the .css

body {
background-image: url(images/bg.gif) ;
}

div#adverts {
font-size: 33px ;
text-align: center;
background-color: black;
color: white;
border-color: white;
border-right-color: gray;
border-left-color: gray;
border-style: solid;
border-width: 2px ;
margin-bottom: 4px ;

}

div#navi {
font-size: 28px;
text-align: center;
background-color: black;
color: white;
border-right-color: gray;
border-left-color: gray;
border-style: solid;
border-width: 2px ;
margin-top: 4px ;
margin-bottom:4px ;

}

div#main {
font-size: 28px ;
text-align: center;
background-color: black;
background-image: url();
background-repeat: no-repeat;
background-position: center;
color: white;
border-style: solid;
border-width: 2px ;
border-bottom-color: white;
border-top-color: white;
border-left-color: gray;
border-right-color: gray;
margin-top: 4px ;
margin-bottom: 4px ;
padding-top: 20px ;
padding-bottom: 20px ;
padding-left:25px;
padding-right:25px;
float: left;
}

div#dlmain {
font-size: 18px ;
font-family: bold, Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center;
background-color: black;
background-image: url();
background-repeat: no-repeat;
background-position: center;
color: white;
border-style: solid;
border-width: 2px ;
border-bottom-color: white;
border-top-color: white;
border-left-color: gray;
border-right-color: gray;
width: 54%;
padding-bottom: 2% ;
padding-left:1%;
padding-right:1%;
left: 22% ;
right: 22% ;
}



div#news{font-size: 16px ;
text-align: center ;
background-color: black ;
color: white ;
border-left-color: gray;
border-right-color: gray ;
border-style: solid ;
border-width: 2px ;
padding-top: 3% ;
padding-bottom: 3% ;
margin-top: 4px;
margin-left: 4px;
width: 18% ;
float: right ;
}

div#footer {
font-size: 33px ;
text-align: center;
background-color: black;
color: white;
border-color: white;
border-right-color: gray;
border-left-color: gray;
border-style: solid;
border-width: 2px ;
margin-top: 4px ;
margin-bottom: 4px ;
bottom: 0%;
position: absolute ;

}

a:visited {
color: white ;
text-decoration: none ;
font-size: 40px ;
font-family: a charming font superexpanded ;
}

a:link {
color: white;
text-decoration: none ;
font-size: 40px ;
font-family: a charming font superexpanded ;
}


div#navi, a:link, a:visited {
cursor: url(images/pointer.gif) , auto ;
}

a.unedit{
font-weight: bold ;
font-size: 18px ;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
h1.sig{
font-size: 20px;
color: red;
text-align: center;
}
 
Kirtap

Kirtap

New Member
Messages
11
Reaction score
0
Points
0
the code on website shows this :
Code: 
div#footer {
	font-size: 33px ;
        text-align: center;
        background-color: black;
	color: white;
        border-color: white;
	border-right-color: gray;
	border-left-color: gray;
        border-style: solid;
	border-width: 2px ;
	margin-top: 4px ;
	margin-bottom: 4px ;
	bottom: 100%;
	position: absolute ;
	
	}

:biggrin: bottom: 100%;

http://www.w3.org/TR/REC-CSS2/visuren.html

I suggest to go with the normal flow (position: relative), and nest the floating divs.
 
Status
Not open for further replies.
Top