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 4 of 4

Thread: CSS Button/Menu

  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Button/Menu

    I've been stumped as to how I should code this menu in html/css. The fact that the text is right aligned, and the placement of the button background throws me off.

    Can anyone help me out/guide me in the right direction?
    Attached Thumbnails Attached Thumbnails CSS Button/Menu-menu.jpg  
    Last edited by coliv; 11-05-2010 at 11:59 PM.

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    I would cry if that was in a design given to me

    Just have an unordered list inside a container with a fixed width and text-align:right;

    Your list item that is then selected, can have a selected class to show the background.

    I am really not a fan of negative margins but could those be used in this case, to move the main background left and the menu items up.. ugh!

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You shouldn't need any negative margins (which, as digitalclubb points out, can be troublesome and are to be avoided). Just because the list "appears" to end at the edge of the background image doesn't mean that it needs to.

    Try something like this (works in IE7 and FF3 at least):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Sample</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
    *{margin:0;padding:0;}
    img{border:0;}
    body{background-color:#6e6e6e;}
    ul{background:transparent url(bg.png) no-repeat left top;height:179px;padding-top:20px;}
    li{width:98px;padding-left:92px;height:30px;}
    li a{display:block;height:40px;padding-right:40px;text-align:right;text-decoration:none;width:57px;}
    li a:hover{background:transparent url(link_bg.png) no-repeat right top;}
    </style>
    </head>
    <body>
    <div>
    <ul>
    <li><a href="#nogo">home</a></li>
    <li><a href="#nogo">about</a></li>
    <li><a href="#nogo">services</a></li>
    <li><a href="#nogo">contact</a></li>
    <li><a href="#nogo">links</a></li>
    </ul>
    </div>
    </body>
    </html>
    I attached the very rough images I used from your attachment. This will need fine-tuning for your needs, but this is the general method I would suggest.
    Attached Thumbnails Attached Thumbnails CSS Button/Menu-bg.png  
    Attached Images Attached Images  
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Rowsdower!, your method was exactly what I was looking for


  •  

    Posting Permissions

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