SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Thanks

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

    Quote Originally Posted by ralph.m View Post
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, it's a z-index issue. Try changing this:

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

    Code:
    header {
    z-index: 20;
    position: relative;
    width: 100%;
    }
    Note the higher z-index and the removal of the background color.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    Hampshire, UK
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it! Thank you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •