UL Navigation Buttons

@DysanFeb 24.2008

Hi,

Using an Unordered List & pure CSS (no images) how do I create the buttons as shown in the image shown at the following URL?

~~[URL=”http://www.freewebs.com/ticstacs/buttons.bmp”]~~http://www.freewebs.com/ticstacs/buttons.bmp[/URL]

to post a comment

CSS

@CentauriFeb 24.2008 — #Float both the <li>s and <a>s left, set the width and height of the <a>s, set text align to centre and line height equal to height on the <a>s, set the borders on either the <a> or <li> elements, and then set the width of the <ul> such that only three <li>s will fit across.

@DysanauthorFeb 24.2008 — #Can you give me an example?

@CentauriFeb 24.2008 — #-- sigh --

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 <style type="text/css">
 <!--
 * {
 margin: 0;
 padding: 0;
 }
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 }
 #nav {
 width: 310px;
 }
 #nav li {
 list-style: none;
 float: left;
 }
 #nav a {
 float: left;
 width: 102px;
 height: 47px;
 line-height: 47px;
 background-color: #333333;
 color: #DDDDDD;
 text-transform: uppercase;
 text-decoration: none;
 font-size: 90%;
 font-weight: bold;
 text-align: center;
 border: 1px solid #666;
 border-width: 0 1px 1px 0;
 }
 -->
 </style>
 </head>
 
 <body>
 <ul id="nav">
 <li><a href="#">About Us</a></li>
 <li><a href="#">Releases</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">Register</a></li>
 <li><a href="#">Community</a></li>
 <li><a href="#">Contacts</a></li>
 </ul>
 </body>
 </html>
 [/CODE]

@DysanauthorFeb 24.2008 — #Ta very much! ?

Much Appreciated!

UL Navigation Buttons

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

UL Navigation Buttons

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴