...

View Full Version : css bottom



reubenb
11-04-2006, 02:00 AM
hi

can you please go to
http://www.lynxas.com/clients/bonnetts/

it looks as it is meant to be (at least in 1280x1024) but..
i want the footer/copyright thing to stay at the bottom of the PAGE not the screen all the time, and the shadows (left and right) to be dependent on the content div, so the more content, the shadow keeps going? [as at the moment the shadow divs have a coded-in height....]

can you please help me? as i am doing something worng but i dont know what?

part of css is below, but if you go to the website it will b e more helpful


#border-right {
position:absolute;
top: 161px;
right: 137px;
width:22px;
height:600px;
background-image:url(images/border-right.gif);
background-repeat:repeat-y;
z-index:0;
}

#border-left {
position:absolute;
top: 161px;
left: 137px;
width:20px;
height:600px;
background-image:url(images/border-left.gif);
background-repeat:repeat-y;
z-index:0;

}

#border-left-end {
position:absolute;
top: 600px;
left: 0px;
width:20px;
height:26px;
background-image:url(images/border-left-end.gif);
z-index:0;
}

#border-right-end {
position:absolute;
top: 600px;
right: 137px;
width:20px;
height:26px;
background-image:url(images/border-right-end.gif);
z-index:0;
}

#horse-tail {
position:absolute;
top: 161px;
left: 63px;
width:94px;
height:61px;
background-image:url(images/horsetail.gif);
z-index:8;

}

#footer {
position:absolute;
bottom: -175px;
width:100%;
height:22px;
background-image:url(images/footerbg.gif);
background-repeat:repeat-x;
left: 0px;
border-top: 1px solid orange;
z-index:30;
}

#footer-text {
position:relative;
bottom: 3px;
width:420px;
height:22px;
background-color:#FFFFFF;
margin:0 auto;
z-index:31;
border-right: 1px solid orange;
border-bottom: 1px solid orange;
border-left: 1px solid orange;

}


#content {
position: absolute;
top: 164px;
margin-left: auto;
margin-right: auto;
height: auto;
width: 680px;
z-index: 10;
left: 148px;
padding-left:30px;
padding-right:30px;
}


thanks very much

harbingerOTV
11-04-2006, 04:33 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>???</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
background: #fff url(headfill.jpg) top left repeat-x;
}
#container {
text-align: left;
background: url(bgfill.jpg) top center repeat-y;
height: 1000px;
}
#head {
height: 313px;
margin: 0 auto;
background: url(headerfill.jpg) top center no-repeat;
}
#footer {
height: 22px;
border-top: 2px solid #E5BC17;
background: #4A2D0D;
}
</style>
</head>
<body>
<div id="container">
<div id="head"></div>
</div>
<div id="footer"></div>
</body>
</html>


http://home.earthlink.net/~harbingerofthevoid/ausie


basic layout that should workk cross browser so far.

have fun and you can pay me later ;)

absolute positioning a mian thing like the footer is going to hose you over aand over done that way. simplify it a little and it gets real easy :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum