SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% Height & Positioning +Misc

    I've seen this asked in different ways before, but not necessarily this case. I have this current layout:

    http://hippo.arvixe.com/~bgmh1986/site/

    Now, everything looks great down to the content area (past the RV splash image). I can't seem to push my table all the way down to the bottom using any form of 100% height. It seems as if my container (#primary) is set at 100%, as is every element in it. The only way the container gets pushed down is if I fill up the #main area with lots of stuff. However this somehow throws my two sidebars out of alignment as well. Which the right sidebar won't even align properly (seems like it's "clearing" the #main div and getting pushed after it). If someone could help me with some ideas on this that would be great. It seems as if #primary is not encompassing everything that's actually under it.

    Another thing I have been trying to achieve is some padding on the links in the nav bar. I don't want to pad the links down, as it would make a ghost area clickable underneath the nav area.

    Thanks in advance for all of your help.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    For the first problem, try adding this:

    Code:
    #primary {
      border-bottom: 1px solid black;
      border-left: 1px solid black;
      border-right: 1px solid black;
      box-shadow: 0 0 20px 3px #000000;
      clear: none;
      height: 100%;
      margin: auto; width: 800px; 
      overflow: hidden;
    }
    Another thing I have been trying to achieve is some padding on the links in the nav bar. I don't want to pad the links down, as it would make a ghost area clickable underneath the nav area.
    So what do you want to do, then? It's not quite clear. Perhaps try top and bottom margin.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first thing kind of worked, but still only goes to 100% height when there is content that goes down that far. I'd like to get the bottom shadow not even visible somehow.

    And basically I'm trying to move the text to the center of the nav buttons, but they're automatically generated with the wp_nav_menu() function.

    Thanks for your help!

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kossae9000 View Post
    And basically I'm trying to move the text to the center of the nav buttons, but they're automatically generated with the wp_nav_menu() function.
    If you change the height of #access a to line-height, the anchor text will be in the vertical centre.

    Code CSS:
    #access a {
    display: block;
    line-height: 80px;
    padding: 0 1em;
    text-decoration: none;
    color: white;
    text-shadow: black 1px 2px 1.5px;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was playing around with that. Unfortunately it only works for single lines. Any multi-lined link is skewed by this a lot.


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
  •