Site Header - Div Help Needed

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

PWS - 21 Jul 2007 19:57 GMT

I am trying to create a site header that consists of three images,
which should be displayed side by side. I want the header to be across
the entire width of the browser window, whatever the width.

To achieve this I the two outer Divs must be fixed at 150px wide, and
I have background images this width. The image for the middle div,
must grow or shrink as required, but must be centered.

Can anyone send me some CSS that achieves what I require.

Many thanks,

PWS

Reply to this Message

Krzysztof Maczy ski - 21 Jul 2007 21:13 GMT

PWS,

You're referring to the images as background images. If that's what
they are - i.e. stylistic ornaments - then I'm afraid CSS is of little
help, as it doesn't provide for scaling background images. (In CSS 3
there's going to be property called background-stretch for this
purpose.) All I can advise is to make the intrinsic width of your
image variable (possible with some vector graphics formats, maybe
SVG?) and rely on browser communicating the dimensions of the middle
div to the image.

Reply to this Message

PWS - 21 Jul 2007 23:42 GMT

> PWS,
>
[quoted text clipped - 6 lines]
> SVG?) and rely on browser communicating the dimensions of the middle
> div to the image.

No idea what you are suggesting, but I do thank you for taking the
time to reply.

I have understood that what I wanted to do cannot be done.

Many thanks,

PWS

Reply to this Message

Beauregard T. Shagnasty - 22 Jul 2007 00:07 GMT

> I am trying to create a site header that consists of three images,
> which should be displayed side by side. I want the header to be
[quoted text clipped - 5 lines]
>
> Can anyone send me some CSS that achieves what I require.

Are you looking for something like this? Notice that the left and right
images are contained within floated <span> rather than <div>, but that
the whole banner is wrapped in (one) <div>.

http://k75s.home.att.net/banner.html

Signature

-bts
-Motorcycles defy gravity; cars just suck

Reply to this Message

dorayme - 22 Jul 2007 04:06 GMT

> > I am trying to create a site header that consists of three images,
> > which should be displayed side by side. I want the header to be
[quoted text clipped - 11 lines]
>
> http://k75s.home.att.net/banner.html

I was thinking OP might have been meaning (lets leave bg images
aside for now as a factor) more in the line of:

<div id="left"><img src="images/smalllogo.gif" alt=""
title="Small Logo" height="43"></div>

<div id="right"><img src="images/smalllogo.gif" alt=""
title="Small Logo" height="43"></div>

<div id="middle">
<img id="toBeStretched" src="images/smalllogo.gif" alt="Wide
Logo" title="Wide Logo" height="43">
</div>

and

just

#toBeStretched {width: 100%;}
#middle {margin-left:50px; margin-right: 50px;}
#left { float: left; width: 50px;}
#right { float: right; width: 50px;}

Signature

dorayme

Reply to this Message

Jason Priem - 23 Jul 2007 18:36 GMT

>>> I am trying to create a site header that consists of three images,
>>> which should be displayed side by side. I want the header to be
[quoted text clipped - 33 lines]
> #left { float: left; width: 50px;}
> #right { float: right; width: 50px;}

It's difficult to tell from the initial post what's being asked,
exactly, but perhaps it's something like this:


<style type="text/css">
#img-main{
    width:100%;
    height:100px;
    background:url(main-img.jpg) 50% 0;
}
#left{
    width:150px;
    height:100px;
    float:left;
    background:url(left-img.jpg);
}
#right{
    width:150px;
    height:100px;
    float:right;
    background:url(right-img.jpg);
}
</style>


<div id="img-main">
    <div id="left"></div>
    <div id="right"></div>
</div>

The "50%" centers the middle image. If you used a middle image that
included large colored margins, you'd never have white space between the
images, and, depending on the images you used, it could look like one
seamless, viewport-wide image. Might that help?

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2007

Site Header - Div Help Needed