All my structural elements are sized using % except for 1 that can't handle it - why?

[Maija Liepins]

Hello,

I wonder if you can help?

I have created this webpage: www.ucsite.co.uk/index.htm

All my sections and divs are sized using percentages with the exception of the header which has a height of height: 17.5em. As soon as I change it to a percentage the whole site falls apart. This suggests to me I have done something wrong. It would be great if someone could point out what. I like learning from my mistakes

Many thanks,

Maija

[ronpat]

No, you have done nothing wrong. The header is a child of section "backgroundcolour" which has no measured height assigned; therefore, there is nothing on which to base a percentage height. "Percentage of what?".

In general, container heights should be free to extend with the flow of content rather than restricted to a specific number. It looks to me like the header is working fairly well as is, but maybe that's just luck. Have you taken a good look at the footer? Kinda crunches when the window narrows. I didn't try zooms.

[ralph.m]

It would be a nice idea to center the container for wider browsers, as it sits to the left on mine. (Anyhow, that's a minor point.)

ronpat's point about not setting heights is an important one to heed. The ideal is for your header to contain its contents naturally, and you can do that with things like overflow: hidden or the clearfix method.

Regarding the footer, it's better to associate the background image directly with the element it visually applies to, to avoid overlaps like you get when the text is resized or the browser window adjusted, as ronpat described.

[Maija Liepins]

Thanks for your Feedback. I will take a closer look at those things.

It would be a nice idea to center the container for wider browsers, as it sits to the left on mine. (Anyhow, that's a minor point.)

ronpat's point about not setting heights is an important one to heed. The ideal is for your header to contain its contents naturally, and you can do that with things like overflow: hidden or the clearfix method.

Regarding the footer, it's better to associate the background image directly with the element it visually applies to, to avoid overlaps like you get when the text is resized or the browser window adjusted, as ronpat described.

[Maija Liepins]

Hi,

Thanks both of you for your help/reminders. I have acted on your recommendations and am much happier with it - no more niggles!

BUT - my overlapping contact box with the photo in it (next to the logo) is no longer acting like the top layer. Can't see why. Can you?

Thanks

[ralph.m]

Yes, it's a z-index issue. Try changing this:

header {
background-color: white;
z-index: 0;
position: relative;
width: 100%;
}

to this:

header {
z-index: 20;
position: relative;
width: 100%;
}

Note the higher z-index and the removal of the background color.

[Maija Liepins]

That did it! Thank you.