• Locked
No replies
Sun, 2009-04-05 17:43
krike
Offline
newbie
Last seen: 11 years 8 weeks ago
Joined: 2009-04-05
Posts: 1
Points: 0

I'm trying to style a theme for the nuke evolution system. Normaly it is done using tables but I had some request of people who would like to have a 100% css theme for that system.

it's working quite well except for the footer

I have 3 main div's "header", "bodymain" and "footer"

bodymain and footer are set to position relative (so I can place all the div's in it using absolute).
now I have a problem with the footer which is displayed on top of bodymain div instead of under it, normally "clear:both;" should push it below but it won't.

any suggestions?
a preview can be found here -> http://i119.photobucket.com/albums/o134/krike06/frozen.png

here is the css:

/*####################################################
	FOOTER CSS
###################################################"*/
#footer{
position: relative;
height: 253px;
width: 100%;
background-image: url('../../../themes/frozen/images/footer_background.jpg');
background-repeat: repeat-x;
clear: both;
}
 
/* footer container main div */
#footer #container{
position: relative;
top: 0px;
width: 980px;
margin: 0 auto;
}
 
/* footer copyright main div */
#footer #copyright{
top: 26px;
position: absolute;
text-align: left;
width: 220px;
padding: 0px;
}
 
/* footer affiliates main div */
#footer #affiliates{
text-align: left;
position: absolute;
width: 220px;
left: 300px;
margin-top: 26px;
}
 
#footer #affiliates ul, #footer #newsarticle ul{
padding: 0px;
margin: 0px;
line-height: 15px;
list-style-type: none;
}
 
/* footer newsarticle main div */
#footer #newsarticle{
position: absolute;
text-align: left;
width: 480px;
margin-left: 500px;
top: 26px;
}
 
 
#footer #copyright .title, #footer #affiliates .title, #footer #newsarticle .title{
clear: both;
font-size: 18px;
font-weight: bold;
padding-bottom: 10px;
color: white;
}
 
#footer #copyright .text, #footer #affiliates .text, #footer #newsarticle .text{
color: white;
line-height: 16px;
font-size: 10px;
font-weight: bold;
}
 
#footer #copyright .text a, #footer #affiliates .text a, #footer #newsarticle .text a{
color: #8b9a9c;
font-size: 10px;
font-weight: bold;
}
 
 
 
/*####################################################
	HEADER CSS
###################################################"*/
#header{
text-align: left;
margin: 0 auto;
}
 
 
/*####################################################
	BLOCK CSS
###################################################"*/
#block{
background: #afbbbc;
width: 200px;
padding: 5px;
}
 
.blocktitle{
text-decoration: none;
font-weight: bold;
font-size: 16px;
margin-top: 20px;
margin-bottom: 6px;
}
 
 
/*####################################################
	NEWS & NORMAL BLOCK CSS
###################################################"*/
 
#newsarticlecenter{
border: 1px solid #bcc3c4;
background-color: #dde4e5;
padding: 10px;
margin: 15px 10px 15px 10px;
color: #394547;
width: auto;
}
 
#newsarticlecenter #newstitle, #newstitle strong{
color: #394547;
font-size: 12px;
font-weight: bold;
}
 
#centerblock{
border: 1px solid #bcc3c4;
background-color: #dde4e5;
padding: 10px;
margin: 15px 10px 15px 10px;
color: #394547;
width: auto;
}
 
 
/*####################################################
	BODY TABLE CSS
###################################################"*/
#bodycontainer{
position: relative;
margin: 0 auto;
width: 1000px;
clear: both;
}
 
#blockleft{
position: absolute;
text-align: left;
top: 0px;
left: 0px;
bottom:0px;
}
 
#blockright{
text-align: left;
position: absolute;
top: 0px;
left: 790px;
bottom:0px;
}
 
#bodymain{
position: absolute;
text-align: left;
width: 560px;
left: 220px;
top: 0px;
}

Top
Tags: