Hello guys. I am having a problem with some menus I am trying to write in XHTML&CSS.
the dropdown menus on my page(id="dropdown" - see HTML below) are not rendering the same size as the corrasponding buttons, despite being set by the css statement ('#navbar div div { width:5em; }' - full CSS below)
HTML Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="This website is a work in progress..." />
<meta name="keywords" content="Ben, Wainright, under, construction" />
<title>Twenty something for nothing</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<!-- Top menu bar-->
<div id="navbar">
<div id="buttons">
<div><a href="">Navigation</a></div>
<div><a href="">Profiles</a></div>
<div><a href="">Links</a></div>
</div>
<div id="dropdown">
<div>
<div>Home</div>
<div>Archives</div>
<div>About</div>
<div>Contact</div>
</div>
<div>
<div>Gaydar</div>
<div>Faceparty</div>
<div>Outpages</div>
</div>
<div>
<div>Gaydar.co.uk</div>
<div>GayYouthUk</div>
<div>Gay.Com</div>
</div>
</div>
</div>
<div id="main">
<h1>Twentysomething For Nothing</h1>
<p id="pageDetails">Site written by Ben Wainwright in 2005 with strict <abbr title="eXtensible HyperText Markup Language">XHTML</abbr> 1.0. Click <a href="http://validator.w3.org/check?uri=referer">here</a> to validate code.</p>
</div>
<script type="text/javascript" src="javascript/global.js"></script>
</body>
</html>
Code:
@import url(global.css);
/* Individual Formatting */
/* - Formatting the main content */
#main
{
position:absolute;
width:100%;
left:0;
z-index:0;
}
#pageDetails
{
font-size:9px;
}
/*
Individual Formatting
- Formatting the dropdown menu
- These settings apply to the entire menu
*/
#navbar
{
font-size:1em;
position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
}
#navbar div div
{
width:5em;
font-family:Arial, Helvetica, sans-serif;
background-color:#66FF99;
float:left;
padding: 0 0.5em 0 0.5em;
margin-left:0.3em;
}
/*
- These settings apply to the top level nav buttons
*/
#buttons
{
positon:absolute;
top:0;
left:0;
}
#buttons div a
{
text-decoration:none;
}
/*
- These settings apply to the second level dropdown menus
*/
#dropdown
{
position:absolute;
top:1.5em;
z-index:1;
left:0;
}
#dropdown div div
{
background-color:#66FF99;
}
body
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:62.5;
}
|
