February 5th, 2004, 08:32 AM
|
|
Contributing User
|
|
Join Date: Nov 2003
Posts: 51
Time spent in forums: 1 h 59 m 51 sec
Reputation Power: 5
|
|
stretchy CSS banner?
I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size.
At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window.
I can do this with tables, but can't figure out a cross-browser way to do it in CSS.
The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla.
Here's my code:
Styles.css:
PHP Code:
.banner
{
background-image:url(./images/banner-fill.gif);
width:100%;
}
.nav
{
background-image:url(./images/nav-fill.gif);
width:104px;
height:100%;
}
.content
{
position:absolute;
left:140px;
top:140px;
}
Template.htm:
PHP Code:
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%">
<div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div>
<div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div>
<div class="content">
<p>Page Content</p>
</div>
</body>
</html>
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
