SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Location
    Orlando, Florida, United States of America
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Nav Bar in CSS

    I'm trying to reproduce http://www.primalrecords.com/ 's nav bar up top. The horizontal one using pure CSS. I have been quite unsuccessful.

    <div id="header-bottom">
    <a href="index.php">index.php</a>
    <a href="index.php">index.php</a>
    <a href="index.php">index.php</a>
    <a href="index.php">index.php</a>
    </div>

    #header-bottom {
    border: 1px solid black;
    }
    #header-bottom a {
    border-width: 0px 1px;
    border-style: solid;
    border-color: black;
    }

    Is as far as i've gotten. It produces 4 links with 1px black boarders around it. I want them to collapse upon each other so it forms like a horizontal lader of links just like the website above. If help would be much appreciated.
    Mirrors are more fun than television.

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <html>
      <head>
        <style type="text/css">
        <!-- 
          #header-bottom a {
            background: #003300;
            color: white;
            font-family: arial;
            font-size:10px;
            font-weight: bold;
            text-decoration: none;
            padding: 4px 4px 4px 4px;
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: white;
          }
          #header-bottom a:hover {
            color: red;
          }
        -->
        </style>
      </head>
      <body bgcolor="black">
        <div id="header-bottom">
          <a href="index.php">index.php</a><a href="index.php">index.php</a><a href="index.php">index.php</a><a href="index.php">index.php</a>
        </div>
      </body>
    </html>
    It's not perfect, but it's a start.

    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Location
    Orlando, Florida, United States of America
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    w00t Thanks

    Now problem two



    The div above it is 700px and so is the one below it but I want the 7 links to spread out evenly so basicly they will be 100px in width but width: 100px doesn't seem to work in my #header-bottom a { } maybe i'm doing something wrong but i'm not sure. I just want the links to stretch out 700px in a table like fashion.

    Boy, this was so much easier when I was using tables
    Last edited by TheLizardKing; Jan 29, 2003 at 22:44.
    Mirrors are more fun than television.

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by TheLizardKing
    The div above it is 700px and so is the one below it but I want the 7 links to spread out evenly so basicly they will be 100px in width but width: 100px doesn't seem to work in my #header-bottom a { } maybe i'm doing something wrong but i'm not sure. I just want the links to stretch out 700px in a table like fashion.
    Check your syntax. When I first tried it I missed the semi-colon off the end of the line and the style property took no effect.
    I added it so that my style looks as follows and it worked fine:
    Code:
          #header-bottom a {
            width: 100px;
            text-align: center;
            background: #003300;
            color: white;
            font-family: arial;
            font-size:10px;
            font-weight: bold;
            text-decoration: none;
            padding: 4px 4px 4px 4px;
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            border-color: white;
          }
    Originally I tried playing around with enclosing all the links in a div with text-align: justify; set, but I couldn't make it work. I read however that justify isn't supported in all browsers anyway so it's probably best to steer clear. Of course, if you're going to use a fixed width with text-align: center; then you can pretty much lose the left and right padding as it's redundant.
    Originally posted by TheLizardKing
    Boy, this was so much easier when I was using tables
    Tell me about it!

    Andy
    From the English nation to a US location.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Location
    Orlando, Florida, United States of America
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem I'm having now is that Width: 100px is having no affect whatsoever. No matter what value I set it to the width is only as much as the text and padding. I don't want to try to resort to adding 50px padding to left and right cause then i have to try to compensate for the font size and amount of characters and just isn't going to happen. I'm also trying to figure out if there is a way to add a %'ed left/right padding but i doubt that will work as planned either....
    Mirrors are more fun than television.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Put "display: block; float: left;" in your class (whichever one you're defining width in).

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Location
    Orlando, Florida, United States of America
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    w00t, it works! how dod you get it to work? What does the display: block do and why wouldn't it work before...
    Mirrors are more fun than television.

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by TheLizardKing
    w00t, it works! how dod you get it to work? What does the display: block do and why wouldn't it work before...
    "Display:block" is what gives an element its "box" look and feel. Examples of block-level elements are <p>, <form>, <table>, <h1>, etc. It's any element that produces a line break after it is closed. "float:left" makes block-level elements float with each other to the left if they are within another block (in this case, your wrapper div).

    CSS is one of those languages where learning the theories and models first makes you more proficient in it. I suggest you learn the theory, then try examples based on what you know. Then push the envelope as far as you can go; that's how you'll become great and rule the world!

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Location
    Orlando, Florida, United States of America
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I have always wanted to rule the world. Thanks again everybody!
    Mirrors are more fun than television.

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by TheLizardKing
    well I have always wanted to rule the world.
    Well you are the Lizard King!


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
  •