PDA

View Full Version : 3 Part Banner



Ash564
15-02-2011, 08:06 PM
Hello! :)

On my site, i want my banner to cover the whole page regardless of resolution. I have chopped my banner into 3 sections...

http://solent-fusion.co.uk/forum/images/v1/banner_start.png http://solent-fusion.co.uk/forum/images/v1/banner_middle.png http://solent-fusion.co.uk/forum/images/v1/banner_end.png

How do i code the CSS so the middle bit stretches until the end part?

My current CSS:


.bannerstart {
background: url(images/v1/banner_start.png) no-repeat;
height: 150px;
text-align: left;
}
.bannermiddle {
background: url(images/v1/banner_middle.png) repeat-x;
height: 150px;
text-align: left;
}
.bannerend {
background: url(images/v1/banner_end.png) no-repeat;
height: 150px;
text-align: left;
}

Thanks :)

Ash

EDIT: Cant see due to white on white background.

Links are http://solent-fusion.co.uk/forum/images/v1/banner_start.png - http://solent-fusion.co.uk/forum/images/v1/banner_middle.png - http://solent-fusion.co.uk/forum/images/v1/banner_end.png

Trinity
15-02-2011, 09:27 PM
I'm pretty sure it's just a matter of making a container div that adjusts to fit the resolution using a percentage width (width: 100%; or width: 80%; ), then making the start of the banner stick to the left (float: left; ) and the end of the banner float right (float: right; ).
The middle part of the banner appears to just be transparent, so you should be able to just leave that out

Pawf
16-02-2011, 12:45 AM
I'm pretty sure it's just a matter of making a container div that adjusts to fit the resolution using a percentage width (width: 100%; or width: 80%; ), then making the start of the banner stick to the left (float: left; ) and the end of the banner float right (float: right; ).
The middle part of the banner appears to just be transparent, so you should be able to just leave that out

I'm a little rusty on my coding, not done it for a while. If the central bit is just white/transparent/whatever make a 100% width div and then WITHIN that float different images left and right. Think that's what you're saying but just clarifying :p

Ash564
17-02-2011, 06:44 PM
Sorted :) Thanks for the help guys!

Want to hide these adverts? Register an account for free!