Horizontal Navigation Section - using unordered list with display:inline - How to control padding?

Discussion in 'HTML' started by Guest, Nov 17, 2007.

  1. Guest

    Guest Guest

    Hi there,

    I'm trying to use the correct CSS to control a website as much as possible.

    I want to create a nav section like below

    --------------------------------------
    Home Page1 Page 2
    --------------------------------------

    I create the links as an unordered list <ul> and apply the style
    display:inline which makes the list horisontal.

    However, when I applyt a border to my <div> section, I also seem to get an
    unwanted gap between the top and bottom of my list items and the borders of
    their surrounding divs.

    I.e. it looks something like this
    --------------------------------------


    Home Page1 Page 2


    --------------------------------------



    And I can't seem to loose the gap. Also it does not display the list items
    in the Arial font (but does in dreamweaver CS3 preview screen).


    Can anyone help? Code is below (note I have experimented around with the CSS
    a bit).


    ***********HTML START****************
    <html>
    <head>
    <link href="styles/test1.css" rel="stylesheet" type="text/css">
    </head>
    <body class="mainPageDefaults">
    <div id="mainContent" class="mainContent" >

    <div class="navBarFontMain navBarMain">
    <ul id="navMenuList">
    <li><a href="index.htm">Home</a> </li>
    <li><a href="index.htm">Page 1 </a></li>
    <li><a href="index.htm">Page 2</a></li>
    </ul>
    </div>

    </div>
    </body>
    </html>
    ***********HTML END****************

    ********STYLE SHEET START***********
    ..navBarMain {
    border-top-width: 5px;
    border-top-color: #3399CC;
    border-right-color: #FFFFFF;
    border-bottom-color: #0099CC;
    border-left-color: #FFFFFF;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-width: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom:0px;
    margin-top:0px;
    }


    ..navBarFontMain, .navBarFontMain a:link , .navBarFontMain a:active,
    ..navBarFontMain a:visited
    {
    font:Arial, Helvetica, sans-serif;
    font-size:1em;
    font-weight:bold;
    color:#9f9f92;
    text-decoration:none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom:0px;
    margin-top:0px;

    }
    ..navBarFontMain a:hover {
    text-decoration:underline;
    }

    #navMenuList li {
    display: inline;
    list-style-type: none;
    padding-right: 0.8em;
    font:Arial, Helvetica, sans-serif;
    border-top-width: 0px;
    border-bottom-width: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom:0px;
    margin-top:0px;


    }

    ..mainContent {
    width:880px;
    background-color:#FFFFFF;
    }

    ********STYLE SHEET END***********
     
    Guest, Nov 17, 2007
    #1
    1. Advertising

  2. Guest

    dorayme Guest

    In article <>,
    <news.freedom2surf.net> wrote:

    > I'm trying to use the correct CSS to control a website as much as possible.
    >
    > I want to create a nav section like below
    >
    > --------------------------------------
    > Home Page1 Page 2
    > --------------------------------------
    >
    > I create the links as an unordered list <ul> and apply the style
    > display:inline which makes the list horisontal.
    >
    > However, when I applyt a border to my <div> section, I also seem to get an
    > unwanted gap between the top and bottom of my list items and the borders of
    > their surrounding divs.


    Have you set margin and padding to the div and the list,
    including trying zero explicitly for some of these to get what
    you want?

    --
    dorayme
     
    dorayme, Nov 18, 2007
    #2
    1. Advertising

  3. Guest

    Martin Jay Guest

    On Sat, 17 Nov 2007 22:58:12 -0000, <news.freedom2surf.net> wrote:
    >I'm trying to use the correct CSS to control a website as much as possible.
    >
    >I want to create a nav section like below
    >
    >--------------------------------------
    >Home Page1 Page 2
    >--------------------------------------
    >
    >I create the links as an unordered list <ul> and apply the style
    >display:inline which makes the list horisontal.
    >
    >However, when I applyt a border to my <div> section, I also seem to get an
    >unwanted gap between the top and bottom of my list items and the borders of
    >their surrounding divs.
    >
    >I.e. it looks something like this
    >--------------------------------------
    >
    >
    >Home Page1 Page 2
    >
    >
    >--------------------------------------


    You probably need to set a top and bottom margin for <ul>, for
    example:

    ul{
    margin-top: 0;
    margin-bottom: 0;
    }
    --
    Martin Jay
     
    Martin Jay, Nov 18, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ibiza
    Replies:
    5
    Views:
    1,186
    S. Justin Gengo [MCP]
    Feb 9, 2006
  2. Hardeep Rakhra
    Replies:
    6
    Views:
    413
    Hardeep Rakhra
    Jan 12, 2004
  3. Disc Magnet
    Replies:
    1
    Views:
    605
    123Jim
    Jun 22, 2010
  4. Nico Grubert
    Replies:
    0
    Views:
    302
    Nico Grubert
    Jun 30, 2010
  5. Philip
    Replies:
    1
    Views:
    324
Loading...

Share This Page