SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Menu Gaps

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Menu Gaps

    Hi All,
    I would like to know how to create gaps between my menu items. What I mean is suppose I have a navigation section on my web page which is made up of 5 rectangles stacked on top of one another. I would like to separate each rectangle from the rest of the rectangles in the menu with gaps above and below each rectangle. Any help will be greatly appreciated, thanks in advance.



    EternalWeb

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    You so that with Margins. If not working you need to make them block.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,527
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Lists, <ul> <ol>, have vertical margins applied by default. List items, <li>, do not. As Eric said, you can apply vertical margins to the list items to separate them.
    Code:
    li {margin:10px 0}     /* like this */
    It is sometimes a good idea to set the default vertical margin of the list to zero to prevent an unexplained mysterious force from pushing the top of the page down from the top edge of the browser window.
    Code:
    ul {margin:0}

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi EternalWeb. Welcome to the forums.

    If the answer above don't help, then please post your code, or better still, a link to the site. Then we can give more specific help.

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your input, your suggestions have helped a lot. I was able to create the look and feel I've been searching for thanks.


    EternalWeb


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
  •