Menu
I’m trying to make just one of my navigation tabs a little wider then the rest. That tab is called Accessible Design. Is there a setting I can make a tab stretch according how big the word is?
[CODE]
[code=html]<!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>Home-Accessible</title>
<link href=”css/main.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<img src=”images/banner.jpg” alt=”banner”>
<ul id=”menu”>
<li><a href=”index.html”>Home</a></li>
<li><a href=””>Destinations</a></li>
<li><a href=””>Accessibility Design</a></li>
<li><a href=””>Transportation</a></li>
<li><a href=””>Link 5</a></li>
<li><a href=””>Link 6</a></li>
</ul>
</div><!– End header–>
<br><br>
<!– Start Advertising–>
<div id=”content”>
<blockquote>
<h3>Accessible Destinations</h3>
<p> Accessible Destinations is an informational website that provides listings of hotels in vacation spots that have accessible accommodations. Also provides accessible transportation information. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</blockquote>
</div><!– End content–>
<div id=”footer”>
<h6>Copyright © 2011 Accessible Destinations | All rights
reserved | </h6>
</div><!–End footer–>
</div><!–End wrapper–>
</body>
</html>body {
background-color:#f0f0f0;
}
#wrapper {
width:780px;
margin:auto;
background-color:#fff;
box-shadow:#777 4px 4px 12px;
}
#header {
display:block;
width:780px;
height:229px;
}
#menu {
display:block;
margin:0 0 0 1px;
padding:0;
font-family:arial,verdana,sans-serif;
font-size:14px;
list-style:none;
}
#menu li {
position:relative;
float:left;
width:111px;
text-align:center;
}
#menu li ul {
position:relative;
display:none;
margin:0;
padding:0;
z-index:1;
list-style:none;
}
#menu li a {
display:block;
padding:5px 0;
margin-left:1px;
border-top:1px solid #fff;
text-decoration:none;
color:#000;
background-color:#39F;
white-space:nowrap;
}
#menu li a:hover {
background-color:#03F;
}
#menu li:hover ul {
display:block;
position:absolute;
}
#menu li:hover li {
float: none;
font-size:11px;
}
#menu li:hover a {
background-color:#0CF;
}
/* — navigation ends — */
h1 {
clear:both;
padding-top:13px;
font-size:24px;
text-align:center;
}
/* — content starts — */
#content {
font-family:verdana,geneva,sans-serif;
font-size:12px;
}
.column {
float:left;
width:140px;
}
#nfandl {
width:220px;
}
.column ul {
padding-left:30px;
}
.column p {
padding-left:16px;
font-weight:bold;
}
/* — content ends — */
#footer {
clear:both;
padding:20px 0;
font-size:11px;
font-weight:bold;
text-align:center;
}