...

View Full Version : CSS menu help



estigma
06-15-2010, 09:39 PM
I need some help with a menu.
I want to make a menu that is divided in two, one to the left and one to the right. Between them I want a gap/space that is 200px wide.
The gap will be between Link3 and Link4 (se code)

Like this:

Link1 Link2 Link3 //////GAP////// Link4 Link5 Link6

This is the code I have so far:

<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>

<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>
</div>

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Bar2aYunie
06-15-2010, 09:52 PM
Not sure if this is the solution you need, but you can try this:



<div style="position: absolute; left: 0px; top: 0px; width: 100px">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
<div style="position: absolute; left: 200px; top: 0px; width: 100px">
<ul id="navlist">
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>
</div>

Excavator
06-16-2010, 01:25 AM
Something like this estigma?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#nav {
overflow: hidden;
position: relative;
margin: 10px 0 400px; /*for display only*/
}
ul#navlist {
float: left;
list-style: none;
position: relative;
left: 50%;
}
#navlist li {
float: left;
position: relative;
right: 50%;
padding: 0 20px;
}
#gap {margin: 0 200px 0 0;}
ul#navlist li a:hover {color: #f00;}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li id="gap"><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>
<!--end nav--></div>
<!--end container--></div>
</body>
</html>

estigma
06-16-2010, 03:55 PM
Thanks alot for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum