PDA

Click to See Complete Forum and Search --> : UL Navigation Buttons

Dysan
02-24-2008, 07:36 AM
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?

http://www.freewebs.com/ticstacs/buttons.bmp
Centauri
02-24-2008, 10:29 AM
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.
Dysan
02-24-2008, 10:47 AM
Can you give me an example?
Centauri
02-24-2008, 04:39 PM
-- sigh --
<!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>
Dysan
02-24-2008, 06:28 PM
Ta very much! :)
Much Appreciated!