I’m about ready to use a table to layout my banner in an otherwise table-less layout! 
You guys are my last hope.
This hand-coded flexible layout has worked great until I went to change a background color into a repeating graphic. But instead of posting my code and trying to get ideas as to how to fix it, I just wonder how you would approach this seemingly simple problem from the start…
The question is: If you want a banner with a graphic on the left (logo) a graphic on the far right, and an expandable repeating graphic in the middle, how would you go about it?
Everything from floats to absolute positioning have failed to do what would be a snap using a table. Save me from backsliding to the dark side!
I’m not 100% sure what you’re trying to do, but here’s my suggestion.
<div id="header">
<img id="graphic" src="graphic.jpg" height="###" width="###" />
<img id="logo" src="logo.jpg" height="###" width="###" />
</div>
Then for the styling
#header {
width: 100%
background: url(repeating-image.jpg) repeat-x 0 0;
height: ###px;
}
#graphic {
float: right;
}
#logo {
float: left;
}
The basic idea here is that you have a banner that spans the full width of the page, and contains your repeating background. The logo and graphic are then nested inside of this div, and floated to either side, covering the left and right sides of the header div. I’m assuming the logo and graphic will be fixed size images, correct?
Yes, the logo on the left and the graphic “endcap” on the right would each be fixed width. Then there would be a graphic that would expand between them with the size of the browser window as its size is adjusted.
I have a pixel-wide image designed to repeat on the x-axis for the center graphic to fill the space between. I’ve tried to assign it as a background-image in the CSS.
Ok, then the code I posted ought to do it for you. You might have to fiddle with img { vertical-align: middle } to make sure the images don’t stack, but it should be ok.
Don’t think of it as having to stick an expanding element in between the logo and the graphic, look at it as the logo and graphic sitting on top of that expanding element, nested inside of it.
For some reason though, the background image is not showing in any browser I’ve checked.
Heres the CSS:
#header {
position : relative;
background-image:url(/images/bannerBG.gif);
background-repeat:repeat-x;
top : 8px;
left : 8px;
width : 100%;
height: 80px;
}
#banner-logo {
float:left;
left : 0px;
top : 0px;
width : 220px;
height : 80px;
}
#banner-cap {
float : right;
}
…And the markup…
<div id="header">
<div id="banner-logo"><a href="../index.html"><img id="banner-logo" src="../images/left-banner-logo.gif" width="220" min-height="80" /></a> </div>
<img id="banner-cap" src="../images/right-banner-cap.gif" width="11" height="80" /> </div>
</div>
I did find some extra <div>s in there, but even removing them did not bring the background image out of hiding. The urls look right too…
Any chance of a site? You have some invalid markup there also.
Make sure you are referencing the correct image.’
From the CSS file, follow your route of the called image. From your CSS file, there should be the images folder in that folder, in there is the image, is that correct? If so, I’d like a link.
RyanReese,
The link to the live site is www.mirrorliteco.com. I have been improving a local copy somewhat but still without solving the no-show background image issue in the banner. You’ll see that the banner consists of a containing div and instead of two inner divs I had three. The left graphic div, a div for the repeating graphic and an “endcap” graphic on the far right. I last left off with just two image tags floated left and right inside the the containing banner div, which has a background image designated in the CSS. I’ve tried so many variations of divs and tags at this point, with no sign of the background image. It does show up in Dreamweavers “design” view browser, but I don’t pay much attention to that. None of the browsers are showing the background repeating graphic.
Thanks for your help.
Didn’t I give you the solution to this in this thread?
In your live link you have no background image for that middle div applied but the main problem is that that expansion div has no height and therefore no background will show. You need to match the height of the header.
e.g.
#Other-images-expansion-space {
background:[B]red[/B];/* your image goes here*/
[B] height: 80px;[/B]
}
However once you make that element take up space then the right banner float will drop to the next line because floats should come before block content in the html. Without changing the html you could absolutely position the element instead.
e.g.
#right-banner-cap {
height: 80px;
[B] position: absolute;
right: 0;
top: 0;[/B]
width: 11px;
}
However the solution I offered in the other thread is more elegant and more effective cross browser.