Stylesheets - Page header with multiple backrounds?

Author

Page header with multiple backrounds?

Graeme

2006-04-08, 3:41 am

Hi all.

This is driving me mad!

What I am after is a page header that will look roughly like: (the dots and
arrows would be centered and are graphics)

.............> page header text <..............

I'd hoped to to this by having three background images that would display
the ...> and <..... graphics and a plain one behind the text and I'd hoped
to make it all relative with no fixed widths.

After a few days of banging my head off a wall using nested divs I'm still
no further on - is what I want even possible?

BT

Gerry Vandermaesen

2006-04-08, 6:49 am

Maybe something like this:

<div id="leftbg">
<div id="rightbg">
<div id="headertext">page header text</div>
</div>
</div>

#leftbg {
background: img(leftbg.png) repeat-y;
}

#rightbg {
background: img(rightbg.png) repeat-y top right;
}

#headertext {
width: 500px;
margin: 0px auto;
}

Graeme wrote:
> Hi all.
>
> This is driving me mad!
>
> What I am after is a page header that will look roughly like: (the dots and
> arrows would be centered and are graphics)
>
> ............> page header text <..............
>
> I'd hoped to to this by having three background images that would display
> the ...> and <..... graphics and a plain one behind the text and I'd hoped
> to make it all relative with no fixed widths.
>
> After a few days of banging my head off a wall using nested divs I'm still
> no further on - is what I want even possible?
>
> BT

Els

2006-04-08, 6:49 am

Graeme wrote:

> Hi all.
>
> This is driving me mad!
>
> What I am after is a page header that will look roughly like: (the dots and
> arrows would be centered and are graphics)
>
> ............> page header text <..............
>
> I'd hoped to to this by having three background images that would display
> the ...> and <..... graphics and a plain one behind the text and I'd hoped
> to make it all relative with no fixed widths.
>
> After a few days of banging my head off a wall using nested divs I'm still
> no further on - is what I want even possible?

Not tested nor tried in any way, but:
One div with a background of dots only , and two nested divs for the
page header text, one (div#one) with the left arrow as background
image positioned left center, the other (div#two) with the right arrow
positioned right center. Then give div#two a solid background colour
and put the <h1> inside of that one.
All you then need is set auto margins and max-width on div#one to make
the dots visible on either side.

If you also want a graphic behind the <h1> instead of solid background
colour, just give div#two enough padding to show the arrows on the
side of the <h1>.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Camel - Supertwister

jim

2006-04-08, 6:43 pm

Graeme,
Hi, still pulling your hair out?
my suggestion is a bit different perhaps, but it seems to work in msie
and firefox; the border and font-sizes of the style sheet are for
effect, but the main layout and positioning exists in the inline
styles; i set a width on the middle text-holding div and used
line-height to keep the text in the middle; this worked on msie but not
in firefox; also, by using image align properties you can align the
left and right images with the text that way. adjust the margins and
padding percentages of the #parent div box if the image sizes blow the
structure out.:
<head><title>graeme solution</title>
<style type="text/css">
#parent div {font-family:arial; font-weight:bold; font-size:12pt;
color:brown; border:1px navy dotted;}
#parent {border:1px red dashed; }
</style>
</head>
<body>
<div id="parent" style="text-align:center;margin:5%; padding:5%"
align="center">
<div style="display:inline; text-align:right; padding:0px; width:32%;">
---->(holds left arrow image)</div>
<div style="display:inline; width:32%; margin:0px; padding:0px;
background-color:white;

text-align:center; height:45px; line-height:2em">your title text
here</div>
<div style="display:inline; text-align:left; padding:0px; width:32%;">
<----(holds right arrow image)</div>
</div>
</body>

Graeme

2006-04-09, 6:51 pm

Hi everybody

Thank you for the help - after pulling out more hair - I've given up on this
one!

I'd been trying to emulate an existing graphic layout using just CSS and
background images - however it simply will not work correctly enough across
different browsers - so I'm either going to have to go with absolute
positioning or convince the boss she wants something else :-))

Thank you for all the pointers.

Graeme
"jim" <jimmenees@aol.com> wrote in message
news:1144514666.863339.4970@j33g2000cwa.googlegroups.com...
>
> Graeme,
> Hi, still pulling your hair out?
> my suggestion is a bit different perhaps, but it seems to work in msie
> and firefox; the border and font-sizes of the style sheet are for
> effect, but the main layout and positioning exists in the inline
> styles; i set a width on the middle text-holding div and used
> line-height to keep the text in the middle; this worked on msie but not
> in firefox; also, by using image align properties you can align the
> left and right images with the text that way. adjust the margins and
> padding percentages of the #parent div box if the image sizes blow the
> structure out.:
> <head><title>graeme solution</title>
> <style type="text/css">
> #parent div {font-family:arial; font-weight:bold; font-size:12pt;
> color:brown; border:1px navy dotted;}
> #parent {border:1px red dashed; }
> </style>
> </head>
> <body>
> <div id="parent" style="text-align:center;margin:5%; padding:5%"
> align="center">
> <div style="display:inline; text-align:right; padding:0px; width:32%;">
> ---->(holds left arrow image)</div>
> <div style="display:inline; width:32%; margin:0px; padding:0px;
> background-color:white;
>
> text-align:center; height:45px; line-height:2em">your title text
> here</div>
> <div style="display:inline; text-align:left; padding:0px; width:32%;">
> <----(holds right arrow image)</div>
> </div>
> </body>
>