SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with buttons

    hey,

    i'm a bit crap at this and need some help with creating horizontal navigation using lists.

    This is the tutorial that i was basing my code on but i don't seem to be able to amend it for my needs without totally mucking it up

    Basically what i would like to have is a menu similar to this but the buttons all the same px width/height and for them to be split over 2 lines, so that there are 4 top and bottom (8 all together).

    can anyone point me in the right direction perhaps to a tutorial that would better suit what i want. Sorry, i am a bit crap at this!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want the buttons the same width then you would need to float them so that you can add the specific dimensions.

    To keep things simpler it would be easier to use separate ul's for each line although you could do it with one ul but its not so easy to manage.

    Using the code you linked to it could be changed like this.

    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">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Untitled Document</title>
     <style type="text/css">
     #navlist ul
     {
     margin: 0;
     padding: 0;
     white-space: nowrap;
     list-style-type: none;
     clear:both;
     }
     #navlist li
     {
     float:left;
     width:6em;
     text-align:center;
     margin:5px 5px 5px 0
     }
     #navlist a { 
     	padding:0 10px;
     	display:block;
     	line-height:1.4em;
     	height:1.4em;
     }
     
     #navlist a
     {
     color: #fff;
     background-color: #036;
     text-decoration: none;
     }
     
     #navlist a:hover
     {
     color: #fff;
     background-color: #369;
     text-decoration: none;
     }
     </style>
     </head>
     <body>
     <div id="navlist">
     	<ul>
     		<li id="active"><a href="#" id="current">Item one</a></li>
     		<li><a href="#">Item two</a></li>
     		<li><a href="#">Item three</a></li>
     		<li><a href="#">Item four</a></li>
     	</ul>
     	<ul>
     		<li><a href="#">Item five</a></li>
     		<li><a href="#">Item six</a></li>
     		<li><a href="#">Item seven</a></li>
     		<li><a href="#">Item eight</a></li>
     	</ul>
     </div>
     </body>
     </html>

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,

    with a bit of fiddeling, that seems to have worked!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    with a bit of fiddeling,
    My code never needs fiddling

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    My code never needs fiddling
    Hahahaha, agreed!

  6. #6
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •