SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with a CSS menu with hover-buttons

    I'm close but having trouble with making it look nice. The problems are:

    1) I want the text and picture to be aligned at the top of the button, not the bottom like it is now.

    2) If the text is too long for one line, I'd like it to wrap around but stay to the right of the picture.

    3) When you hover over each buttom, there is more padding below the button than above it.

    Here's the code I have so far:

    Code:
    <html>
    <head>
    <style type="text/css">
    ul#cssnav {
            list-style-type:none;
    }
    
    #cssnav li a {
            display:block;
            width: 150px;
            text-decoration:none;
            padding:5px;
    }
    
    #cssnav li a:hover {
            background:#1f1f1f;
            color:#fffff8;
    }
    </style>
    </head>
    <body>
    <ul id="cssnav">
    <li><a href="#"><img src="pic.jpg" width="40" border="1" />Home</a></li>
    <li><a href="#"><img src="pic.jpg" width="40" border="1" />Sometimes there will be 2 lines</a></li>
    <li><a href="#"><img src="pic.jpg" width="40" border="1" />Contact</a></li>
    <li><a href="#"><img src="pic.jpg" width="40" border="1" />Links</a></li>
    <li><a href="#"><img src="pic.jpg" width="40" border="1" />Email</a></li>
    <li><a href="#"><img src="pic.jpg" width="40" border="1" />Login</a></li>
    </ul>
    </body>
    </html>
    Thanks!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding :
    Code:
    #cssnav li a img {
            vertical-align: top;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, that fixed the vertical alignment issue! Now just the other two parts:

    2) If the text is too long for one line, I'd like it to wrap around but stay to the right of the picture.

    3) When you hover over each buttom, there is more padding below the button than above it.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The text could be kept to the right by using left padding and pulling the image into the padding area with a negative left margin :
    Code:
    #cssnav li a {
            display:block;
            width: 100px;
            text-decoration:none;
            padding:5px 5px 5px 50px;
    }
    
    #cssnav li a img {
            vertical-align: top;
            margin-left: -45px;
    }
    Not sure about the padding issue without seeing this with the graphics - can you put what you have so far online?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You are also in quirks mode-try adding a valid doctype with a URI.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •