Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question padding text and links in inline list

    here's the html:
    Code:
    <div id="navcontainer">
    <ul>
    
    <li><a href="#">Login</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Brothers</a></li>
    <li><a href="#">About</a></li>
    <li>
    <!--when on a page, the page's button is not a link 
    <a href="#">Home</a>
    -->
    Home</li>
    
    </ul>
    </div>
    here's the css
    Code:
    #navcontainer ul
    {
    position:absolute;
    TOP:170px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #036;
    background-color: #036;
    width: 100%;
    }
    
    #navcontainer ul li 
    {
    font:normal 15px arial,sans serif;
    color:#FFFFFF; 
    text-decoration:none;
    display: inline;
    float: right;
    color: #fff;
    background-color: #369;
    border: 1px solid #000;
    }
    
    #navcontainer ul li a
    {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
    border: 1px solid #000;
    }
    
    #navcontainer ul li a:hover
    {
    color: #fff;
    background-color: #369;
    }
    the problem is, when i make the "home" item just text, i lose the padding around the text... i tried putting the padding command in the #navcontainer ul li entry, but it made all my entries, including links, have extra padding of the wrong color for links

    help?

    also, the borders on the left and right side of the list do not double, like the inner ones do... i.e. the list you get now is

    |item||item||item||item|

    i want...

    ||item||item||item||item||

    anyone know how to do these things? i'm new and totally lost.
    Last edited by singedpiper; 02-10-2005 at 09:28 PM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    That's tricky. I'm assuming you've meant to have the padding of the floated links expand past the absolutely positioned ul, giving it that "big-button" look? I like it.

    Unfortunately, I don't see a way out of this one for you, maybe someone else will... the thing is the usual way to fix your problem would be to give the li the padding, and declare a width, then assign "display: block" to the links and give those the same width and height as the list items. So the links would expand to the edges of their container, the list item.

    The thing is, though, once those links are block rather than inline elements, the ul will expand to accommodate them, losing the cool button effect. I'd just leave the button as a link, personally, or position the links over a separate bg or block level element that give the same stripe effect.

    I'd like to see it work, though; hopefully someone else can give this a shot...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •