SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pushed horizontal nav by top margin

    Buon Giorno from 8 degrees C wet & Damp wetherby UK :-)

    OK... pn this page http://tutorial.davidclick.com/philpotts-clone.html i wanted the gorizontal nav to sit exactly half way across the header wrapper. I achieved this by pushing it down with a top margin eg:

    #navigation2
    {
    float: left;
    width: 900px;
    background: #333;
    margin-top:70px
    ;
    }

    Illustrated here - http://i216.photobucket.com/albums/c...on-navcopy.jpg

    So mY question is please could I have done this any other way or is my approach of forcing the horizontal nav southwards using margin top OK.

    Grazie Tanto,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It seems fairly safe, though generally fixed heights, top and bottom px margins etc are asking for trouble. In this case, it seems pretty harmless, though.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Personally I would offset the parent container by 50% and set the top margin as a negative value based on half the height of the navigation bar itself as it will always ensure that the navigation container sits vertically centered regardless of if the parent height changes.

    Code CSS:
    #navigation2 {
        background-color: #333;
        margin-top: -15px;
        overflow: hidden;
        position: relative;
        top: 50%;
        width: 900px;
    }

    Also on a side not I highly recommend you NEVER use floats to clear containers as you will cause yourself headaches later on down the track, whenever you have a parent container with floated child elements always try to use overflow: hidden or a .clearfix method which are much easier to work with and ensure a consistent layout in all browsers.

  4. #4
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "I highly recommend you NEVER use floats to clear containers" - Yes thank you ia eas worried about that know i have the theory, big thank you :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •