SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Height for HTML Root Element

    I have searched and cannot find the answer to my problem...which I'm sure is an easy fix, but as I am a beginner I am stumped.

    My page keeps scrolling well beyond the footer element. I want the page to finish under the footer element obviously.

    Any suggestions on what I've done wrong with my code or what I'm needing to add.

    Thanks

    http://www.greensherbetdev.leelevel1.com/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You've gone about your layout all wrong, I'm afraid. To make those boxes in the middle sit side by side, it's best to remove any left/right margins and float them, and remove the "top" settings. With position: relative, you can move the boxes out of their normal position, but the space they should have occupied remains there, and hence the huge gap remains.

    So remove all the top settings on all elements, and float those middle boxes, then we can look at how to do the final adjustments.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for your advice. I understand that concept - i.e. relative positioning only moves the box from it's 'original' position and it makes sense that I would then have excess space below the footer.

    I have done as you suggested and if you can help me go to the next step of aligning the elements correctly. I think my brain is nearly fried at this point.

    Secondary, Tertiary, Quaternary and Footer elements all need adjusting.

    I kept the 'navigation' and 'main' elements using 'relative' positioning. I kept the top setting on the 'main' element, however should I change these elements to float & remove the top setting from 'main' also?

    Thanks again.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    OK, good work. The next thing I would suggest (as you asked) is to remove all the other top settings too, as they aren't needed and will get you into a bit of trouble. If you need spacing, use padding/margin instead. I'm happy to help you through this, so perhaps first move all those top settings (and any other positioning) as that will hep to get the rest right.

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just worked on my 'index' page and any CSS related to this. All other CSS I will change when I have this first page under control.

    I removed position: relative from
    1. html, body
    2. navigation
    3. main

    I have left all css relating to content as is - should I also be positioning this content using padding and margins only and eliminating all references to relative or absolute positioning?

    When I removed position:relative from the following some of my content also moved. So I'm presuming that I need to position my content using another method?

    #header, #navigation, #main, #main-who, #main-contact, #primary, #primary-who, #primary-what, #primary-contact, #secondary, #tertiary, #quaternary, #footer {
    padding: .2em .5em .2em .5em;
    margin: 2em auto 2em auto;
    width: 880px;}

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    OK, it's looking better now (don't worry about things being out of place, as that will be fixed).

    The next thing I'd suggest is to replace things like <aside> and <section> with <div>, as these new elements aren't supported properly by browsers yet, and so there's no advantage (but lots of disadvantages) in using them. That will make the remaining fixes a lot easier.

  7. #7
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok - I'll work through that and fix margins to position properly before I post again....we'll see if I get it right!
    Thanks

  8. #8
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick question before I move forward.

    One of the reasons why I probably began using position: relative is I wanted my site to sit centered on the viewport. So if you go to the site at the moment, I have used margins to position the three boxes & footer, however now I have to get these boxes to move together with the rest of the page when the page size is increased or decreased. Do I need to link these elements to a parent element like body to do this? See example below. If I link to #body though I loose all my other CSS (the square box with rounded corners disappear). Before I continue positioning the remainder I'd like to fix this...thanks again.

    #body > #secondary {
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 165px;
    background-color: #F4F0E9;
    width: 280px;
    height: 245px;
    -moz-border-radius:20px;
    border-radius: 20px;
    box-shadow:5px 5px 10px gray;
    behavior: url(pie.htc);

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    No, don't worry, centering those boxes is easy. Just give the aside div these styles:

    Code:
    #aside {
      width: 940px;
      margin: 0 auto;
      overflow: hidden;
    }
    Then remove all those margins on the inner boxes.

    Trust me, we will take care of all this, but please first remove all those top settings.

  10. #10
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok...getting there. I think I've done everything you've asked so far.

    I'll wait for your next direction.

    Thanks

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    OK, great. Next things I'd do would be:

    Change

    Code:
    #navigation {
      background-color: #E0D9CE;
      box-shadow: 2px 1px 6px gray;
      height: 50px;
      margin-right: 193px; 
      width: 905px;
      z-index: 1;
    }
    to

    Code:
    #navigation {
      background-color: #E0D9CE;
      box-shadow: 2px 1px 6px gray;
      height: 50px;
      margin: 0 auto; 
      width: 905px;
      z-index: 1;
    }
    And

    Code:
    #main {
      background-color: #F4F0E9;
      border-radius: 20px 20px 20px 20px;
      box-shadow: 5px 5px 10px gray;
      height: 480px;    // remove this line
      margin-bottom: 10px;
      margin-top: -25px;   // remove this line
      text-align: left;
      z-index: 2;
    }
    to

    Code:
    #main {
      background-color: #F4F0E9;
      border-radius: 20px 20px 20px 20px;
      box-shadow: 5px 5px 10px gray;
     
      margin-bottom: 10px;
    
      text-align: left;
      z-index: 2;
    }
    And

    Code:
    #footer {
      background-color: #645E57;
      float: left;
      height: 200px;
      margin-bottom: 10px;
      margin-left: 165px;  // remove this line
      margin-top: 10px;
    }
    to

    Code:
    #footer {
      background-color: #645E57;
      float: left;
      height: 200px;
      margin-bottom: 10px;
    
      margin-top: 10px;
    }
    Do you want some space between those thee boxes in the middle?

  12. #12
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I do want space in-between, so I presume I add
    margin-right and margin-left to the boxes where applicable?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You can do something like this:

    Code:
    #secondary, #tertiary, #quaternary {margin: 10px 6px 15px 0;}
    But if that spacing is not enough, widen the container a bit before increasing the margins.

    By the way, remove float: left from the #footer.

  14. #14
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's starting to look good! Thanks

    So really I should avoid using Position:absolute or relative?

    Now that I have that all sorted I'll just get the content within the boxes positioned only using margin or padding.

    Am I on the right track.

    By the way why should I avoid using absolute and relative positioning?

    Thanks

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by becstar95 View Post
    why should I avoid using absolute and relative positioning?
    They have their uses, but they are best kept for smaller, non-essentioal on-page elemtns. When an element has pos:abs it is taken out of the flow, meaning that other elements don't see it, so you have to be very careful when content expands, as the ap element can start to get in the way etc. As you saw with pos:rel, using it to move things around causes problematic gaps etc.

    One place where position: absolute may be of some use is with the image inside your #primary div. The <figure> around it is not needed, though. A better way to use pos: abs here is to give the container position: relative, so that you place that image in relation to its container rather than to the browser window.

    E.g.

    Code:
    #primary {position: relative;}
    
    #primary > figure img {
      width: 250px;
      position: absolute;
      top: 40px;
      right: 50px;
    }

  16. #16
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well thank you so much for your time! It has helped me out hugely and hopefully now I'll be able to continue building it correctly, I understand a lot more now. My pile of site point books has served me well but it doesn't replace getting help from a pro - and an Aussie at that! Have a great afternoon.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You're welcome. I'm glad I could help. Please feel free to come back again, and to keep the questions coming if need be.


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
  •