I just bought the book THE CSS ANTHOLOGY and in the book there is a program call listnav_button.html. I need the code to center the haoizontal buttons and have dropdown menus for the button. Can anybody help me.
| SitePoint Sponsor |
I just bought the book THE CSS ANTHOLOGY and in the book there is a program call listnav_button.html. I need the code to center the haoizontal buttons and have dropdown menus for the button. Can anybody help me.
Hi,
You will need to post the code you are using or give us a link to the problem as not everybody here has that book at hand and chances are that you have changed the code from the book anyway
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Here is the code that is in the book
listnav_button.css
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 2px;
padding: 3px 10px 2px 10px;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
listnav_button.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="listnav_button.css" />
</head>
<body id="contact">
<div id="navigation">
<ul>
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
Hi, the centering part is easy:
However dropdown menus come in many shapes and sizes, have a look at the drop down low down and choose one that fits your requirements.Code:#navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 4px; text-align: center; }
Posting Permissions
Bookmarks