Forum Moderators: not2easy
¦Static corner logo¦ -- ¦Static center image¦ -- ¦Fluid bar 128 px high¦
Every thing I try I can get it to work in IE, but not Firefox, or the other way around. I know there must be a more simple solution that what I am trying, and quite frankly I am embarrassed to even post what I have ... Anyone willing to donate a small chunk of code for these 3 elements?
Thanks!
-- Zak
Is the whole bar {height: 128px;}, or just the fluid bar?
If you actually use borders around any or all of the sections, they may have to be accounted for.
This works, but may not suit the actual need.
<!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>
<style>
div {
height: 128px;
}
#rel {
position: relative;
}
#corner {
width: 150px; border: 1px solid #000; position: absolute; top: 0; left: 0
}
#static-center {
width: 20%; position: absolute; top: 0; left: 40%; border: 1px solid #900;
}
#fluid-bar {
border: 1px solid blue; float: right; width: 40%;
}
</style>
</head>
<body>
<div id="rel">
<div id="corner">
CORNER
</div>
<div id="static-center">
CENTER
</div>
<div id="fluid-bar">
FLUID BAR
</div>
</div>
</body>
That is *almost* what I need, except the corner, center and fluid right need to run together to form a continuous looking bar all the way accross. The element sizes are as follows:
Corner image: 240 X 128
Middle image: 364 X 128
Fluid CSS bar: Fluid X 128
The corner image of course needs to be positioned 0 left and 0 top ... The center image needs to be positioned 240 left and 0 top ... THEN have the fluid bar to fill the rest of the page width.
What I am having trouble with I think is relative versus absolute positioning ... thus float for that matter. If I were to do it with a table, this is what it would look like:
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width=240 background="corner.gif"></td>
<td width=364 valign=top><img src="center.gif"></td>
<td bgcolor=000000> <!-- Just a black fluid bar--></td>
</tr>
</table>
But ... for the sake of, well ... I just don't want to use tables. ;0)
I appreciate your help!
-- Zak
I'm overlapping #static-center and #fluid-bar, but all seems to be working and functional. Feel free to break it:))
As a separate question: Is this going to work for you at 800x600? Without regard to #fluid-bar, #corner and #static-center will overlap at low res.
<!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>
<style>
#rel {
position: relative; border: .1em dotted #000; height: 128px;
}
#corner {
width: 240px; height: 128px; position: absolute; top: 0; left: 0; border: 1px solid #000;
}
#static-center {
width: 364px; height: 128px; position: absolute; top: 0; left: 50%; margin-left: -182px; border: 1px solid #900;
background-color: #ccc
}
#fluid-bar {
height: 128px; margin-left: 50%; padding-left: 182px; border: .1em solid red; background-color: #666;
}
</style>
</head>
<body>
<div id="rel">
<div id="corner">
CORNER
</div>
<div id="static-center">
CENTERf
</div>
<div id="fluid-bar">
FLUID BAR
</div>
</div>
</body>
</html>
CSS:
* {padding: 0; margin: 0;}#fluid-bar {margin-left: 604px; height: 128px; background-color: #ffd;}
#corner-image {float: left; width: 240px; height: 128px; border: 0; background: #fdd url(your-corner-image.gif) no-repeat;}
#middle-image {float: left; width: 364px; height: 128px; border: 0; background: #ddf url(your-middle-image.jpg) no-repeat;}
HTML:
<div id="corner-image"></div>
<div id="middle-image"></div>
<div id="fluid-bar"></div>
[edited by: D_Blackwell at 2:52 am (utc) on July 7, 2005]
ialmost --
margin-left: 604px;
Pretty darn clever, and it's what did the trick and gave me the output I was looking for.
Thanks you guys!
-- Zak
