On Fri, 5 Oct 2007 17:32:00 +0100, Donna Watch wrote:
> [...]
> I am trying to achieve:
>
> the html has the text for, say, H1 and then using css, to obtain the result of
> "image left, H1 as defined in html text, image right" followed by an image
> underneath"
> all in the same class? i.e the style and images in the css so if I need to
> change them
> site wide I can?
>
> I want a repeat look for all headers without repeatedly placing the graphics
> round a
> simple css defined H1 in an external sheet.
>
If these images are decoration, you could use background images.
Until more browsers support CSS3 though, you cannot put more than
one background image in one element.
If you add extra markup to the H1 (surrounding DIVs, maybe a SPAN
inside) to add the necessary "hooks" for adding the images, then what
you ask for is certainly possible.
HTML:
This is some heading text
CSS:
#header {
height: ???px: /* tall enough to show the image */
background: #336 url(/images/head-bottom.jpg) no-repeat center bottom;
}
/* assuming you only have one H1 per page: */
h1 {
margin: 0; padding: 1em;
line-height: ???px; /* tall enough to hold the images */
color: #fff;
background: #000 url(/images/left-image.jpg) no-repeat top left;
}
h1 span {
background: url(/images/right-image.jpg) no-repeat top right;
}
I may be missing some declarations, but I hope you get the gist.
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
