Hi, I'm new to
css and having managed to understand to an extent how navigation works, I've managed to create a menu for my page using the following code.
Linked .
CSS file
- Code: Select all
/* CSS Document */
body {
background-color: #996600;
text-align: center;
padding: 0;
margin: 3em;
}
#container {
width: 100%;
background: #FFFFD6;
text-align: center;
}
#header {
background-color: #FFFFD6;
padding: 1em;
text-align: right;
}
#nav, #nav ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
background: #996600;
margin: 0 0 1em 0;
color: #FFFFD6;
text-align: left;
white-space: nowrap;
}
#nav a {
display: block;
}
#nav li {
float: left;
padding: 0;
width: 7em;
text-align: center;
}
#nav li ul {
position: absolute;
left: -999em;
width: 5em;
w\idth: 5em;
font-weight: normal;
margin: 0;
text-align: left;
}
#nav li li {
width: 5em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
text-align: left;
}
#nav li:hover, #nav li.sfhover {
background: #FFFFD6;
color: #996600;
font-weight: bold;
}
#content {
background-color: #FFFFD6;
color: #996600;
text-align: left;
margin: 1em;
}
.htm file
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu 1</title>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<link href="temp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="" alt="title goes here" name="placeholder" width="160" height="60" id="placeholder" style="background-color: #CCCCCC" /></div>
<ul id="nav">
<li>about</li>
<li>buttons</li>
<li>chairs</li>
<li>contact</li>
<li>gallery
<ul>
<li>gallery 1</li>
<li>gallery 2</li>
</ul>
</li>
<li>links</li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempor. Phasellus ultrices tellus sit amet enim. Ut metus elit, imperdiet eget, pulvinar in, viverra at, nunc. In vel tortor id diam condimentum dictum. Aliquam erat volutpat. Sed dapibus lacus at ligula. Nulla dolor tortor, aliquam at, hendrerit varius, euismod vitae, velit. Praesent sit amet urna. Nulla posuere. Fusce neque diam, feugiat a, porta eu, ultricies in, velit. Integer viverra. Mauris bibendum, justo non venenatis hendrerit, urna justo porta felis, at consequat est urna in ante. Morbi feugiat egestas leo. Pellentesque at tortor nec metus auctor sollicitudin. Curabitur a libero in leo egestas scelerisque. Curabitur vitae ligula. Nulla ut tortor convallis massa pulvinar condimentum. Praesent eu libero in urna congue ornare. Phasellus nec mauris.</p>
<p>Praesent condimentum orci. Suspendisse ac lacus. Pellentesque sed purus. Praesent tempor congue lorem. Praesent eget diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras mollis. Suspendisse rhoncus. Duis eleifend, sapien in faucibus facilisis, massa urna varius orci, ut suscipit felis libero nec lectus. Morbi sed turpis. Aenean tincidunt, ligula et vulputate pretium, nibh lectus blandit eros, quis tristique augue magna a magna. Nullam quis est eu tellus gravida semper. Morbi blandit magna viverra nunc.</p>
</div>
</div>
</body>
</html>
Sorry to be posting so much code.
My problem is that I want to have the menu items evenly spaced out across the navigation div are in the container div. Also, when viewing in IE7 the gallery drop downs don't come bellow, but to the side.
I've done quite a bit of searchin both on here and on the net in general and not been able to find a solution to the issues I've got.
Any help would be greatly appreciated.
Thank you.
Steve
Problems with my navigation
Jun 15th, 2007, 14:28
Great Tutorial
Similar Threads
