List Styling

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • shapper
    #1

    List Styling

    Hello,

    I am creating a simple navigation bar using a list.
    My anchor tags inside each list item have a background and margin. The
    problem is they are overlapping.
    I then added to the li tag margin-top: 20px.
    The problem is that the bottom background of the last element
    disappears.

    I think I might doing something wrong on my styling because when I fix
    something, something else gets wrong.

    Could someone, please, help me out?

    HTML:

    <ul id="wmNavigatio n" class="Bar">
    <li>
    <a title="Page1" href="http://www.name.com/page1">Page1</a>
    </li>
    <li>
    <a title="Page2" href="http://www.name.com/page1">Page2</a>
    </li>
    <li>
    <a title="Page3" href="http://www.name.com/page1">Page3</a>
    </li>
    <li>
    <a title="Page4" href="http://www.name.com/page1">Page4</a>
    </li>
    </ul>

    CSS:

    ul.Bar {}

    ul.Bar li
    {
    font: normal 1.2em Verdana, Geneva, sans-serif;
    letter-spacing: 0.1em;
    margin-top: 20px;
    }

    ul.Bar li a
    {
    background-color: #202020;
    color: #E2E2E2;
    padding: 4px 10px 6px 12px;
    text-decoration: none;
    }

    ul.Bar li a:link , ul.Bar li a:visited {}
    ul.Bar li a:hover, ul.Bar li a:active, ul.Bar li a:focus
    {
    background-color: #303030;
    }

    Thanks,
    Miguel
    Tags: None
    • Andy Dingley
      #2
      Re: List Styling

      On 13 May, 09:23, shapper <mdmo...@gmail. comwrote:
      My anchor tags inside each list item have a background and margin. The
      problem is they are overlapping.
      Post a URL not a fragment.

      In particular, we don't know what doctype declaration you're using, so
      we don't know if IE is in Quirks or Standards mode. That will make a
      difference to many issues about box sizing.
      I then added to the li tag margin-top: 20px.
      When fiddling with lists, always set _all_ the margins and padding on
      both <ul& <li>. This avoids inconsistencies between browser default
      stylesheets (some use padding to control lists, some use margin).
      <li>
      <a title="Page1" href="http://www.name.com/page1">Page1</a>
      </li>
      is better coded like this:

      <li><a title="Page1"
      href="http://www.name.com/page1"
      >Page1</a></li>
      Avoid the whitespace between tags here, as IE is sensitive to it.
      Whitespace (including linebreaks) around the attributes inside the
      start tag is OK.

        Comment

        • Ben C
          #3
          Re: List Styling

          On 2008-05-13, shapper <mdmoura@gmail. comwrote:
          Hello,
          >
          I am creating a simple navigation bar using a list.
          My anchor tags inside each list item have a background and margin. The
          problem is they are overlapping.
          I then added to the li tag margin-top: 20px.
          The problem is that the bottom background of the last element
          disappears.
          >
          I think I might doing something wrong on my styling because when I fix
          something, something else gets wrong.
          >
          Could someone, please, help me out?
          Put the background colour on the LI instead of on the A inside it.

          The LIs don't overlap (this is defined clearly by the spec), but the top
          and bottom edges of inline boxes aren't (they just depend on the font in
          some way).

          That should fix the original problem.

          I don't know what you mean about the bottom background of the last
          element disappearing. I tried your example and it seemed to be OK.

          [...]
          >
          ul.Bar {}
          >
          ul.Bar li
          {
          font: normal 1.2em Verdana, Geneva, sans-serif;
          letter-spacing: 0.1em;
          margin-top: 20px;
          background-color: #202020;
          ^^^^^^^^^^^^^^^ ^^^^^^^^^^^ <----- to here
          }
          >
          ul.Bar li a
          {
          [background-color: #202020;] <----- move this up

            Comment

            • shapper
              #4
              Re: List Styling

              On May 14, 10:25 pm, Ben C <spams...@spam. eggswrote:
              On 2008-05-13, shapper <mdmo...@gmail. comwrote:
              >
              Hello,
              >
              I am creating a simple navigation bar using a list.
              My anchor tags inside each list item have a background and margin. The
              problem is they are overlapping.
              I then added to the li tag margin-top: 20px.
              The problem is that the bottom background of the last element
              disappears.
              >
              I think I might doing something wrong on my styling because when I fix
              something, something else gets wrong.
              >
              Could someone, please, help me out?
              >
              Put the background colour on the LI instead of on the A inside it.
              >
              The LIs don't overlap (this is defined clearly by the spec), but the top
              and bottom edges of inline boxes aren't (they just depend on the font in
              some way).
              >
              That should fix the original problem.
              >
              I don't know what you mean about the bottom background of the last
              element disappearing. I tried your example and it seemed to be OK.
              >
              [...]
              >
              >
              >
              ul.Bar {}
              >
              ul.Bar li
              {
              font: normal 1.2em Verdana, Geneva, sans-serif;
              letter-spacing: 0.1em;
              margin-top: 20px;
              >
              background-color: #202020;
              ^^^^^^^^^^^^^^^ ^^^^^^^^^^^ <----- to here
              >
              }
              >
              ul.Bar li a
              {
              >
              [background-color: #202020;] <----- move this up
              Thank You Ben!

                Comment

                Previous template Next
                Working...