Struggling with CSS

[Pat Bremkamp]

I bought a couple books on CSS and jumped in. But, it's not quite as simple as the book tutorials make it out to be.

I've created and linked in an external CSS style sheet, and I've been able to position most elements, but I'm having trouble with my banner. I have a banner with a background image and an image and text on top of that. The problem is a part of thte background image is covering the image on top.

Please see the picture.

The relevant part of the style sheet is

 
#header{
color:       #ffc30f;
background-image:    url(water.jpg);
}
#header img{
margin:   5px 20px 5px 5px;
float:    left;
}
#header h1 h2{
color:    #ffc30f;
}
#header .tagline{
font-family:   "Comic Sans MS";
font-style:   italic;
color:   #ffc30f;
}

And the relevent part of the page html is

<div id="header">
<img height=99 alt="ORCA Logo" src="Orca-heading.jpg" width=202 >
<h1>Restaurant and Steak House</h1>
<h2 class="tagline">For a Whale of a Meal!</h2>
</div><!-- end of header -->

The attached picture shows the problem.

I've tried adding z-index statements with no success, and margin statements on the h2 tag don't help either.

Any suggestions?

Pat

[mariusm]

Re: Struggling with CSS

I don't see the z-index in your code, but since they are in the same div it might not work anyway.

In cases like that I always put the image in a different div than the rest of the header/div/whatever, and use it as a nested div. I have in the stylesheet a #leftFloatBox and a #rightFloatBox and use them wherever needed.

[Pat Bremkamp]

Re: Struggling with CSS

Thanks for helping out. Just to be clear, are you suggesting

div id="header"
div id="imagebox" <-float left
/div - end image box
div id="textbox" <-float right
/div - end textbox
/div - end headerbox

or

div id="header"
div id="imagebox" <-float left
/div - end image box
h1 /h1
h2 /h2
/div - end headerbox

Pat

[mariusm]

Re: Struggling with CSS

The second one is what I was thinking.

[Pat Bremkamp]

Re: Struggling with CSS

Thanks for the suggestion. I would never have thought of that.

The second one didn't work, but the first one works great!