...

View Full Version : css menu help



twistedsoul
01-11-2010, 06:28 PM
Hi,

I'm having a little trouble with a simple meu I'm working with. Basically it won't line up next to div below, it has padding or a margin on the first link which I can't seem to get rid of.

Any help would be great, thanks.


<div class="span-24" id="nav">
<ul>

<li><a href="/" title="Go to the Welcome" class="current"><span>Home</span></a></li>
<li><a href="/website-design/" title="Go to the Website design" class="link"><span>Design</span></a></li>
<li><a href="/content-management-systems/" title="Go to the Content management systems" class="link"><span>Content Management Systems</span></a></li>
<li><a href="/ecommerce-systems/" title="Go to the eCommerce systems" class="link"><span>eCommerce</span></a></li>
<li><a href="/search-engine-services/" title="Go to the Search engine services" class="link"><span>Search</span></a></li>
<li><a href="/pro-image-manager/" title="Go to the Pro Image Manager" class="link"><span>PIM</span></a></li>
<li><a href="/news/" title="Go to the News" class="link"><span>News</span></a></li>
<li><a href="/our-clients/" title="Go to the Our clients" class="link"><span>Our clients</span></a></li>
<li class="last"><a href="/contact-us/" title="Go to the Contact us" class="link"><span>Contact us</span></a></li>

</ul>
</div>

and the css.


#nav {
margin-top: 10px;
}
#nav ul li {
display:inline;
border-right:1px solid #CCCCCC;
}
#nav ul li.last {
border-right:none;
}
#nav ul li a {
padding: 10px 10px 10px 10px;
color:#999999;
font-weight:normal;
font-size:1em;
}
#nav ul li a:hover {
text-decoration:underline;
}

Excavator
01-11-2010, 07:28 PM
Hello twistedsoul,
Sometimes it helps to put a background color on each element, just so you can see what it's doing.

<!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 {
background: #fc6;
}
#nav {
margin-top: 10px;
background: #0F0;
}
#nav ul li {
display:inline;
border-right:1px solid #CCCCCC;
background: #F00;
}
#nav ul li.last {
border-right:none;
background: #9C6;
}
#nav ul li a {
padding: 10px 10px 10px 10px;
color:#999999;
font-weight:normal;
font-size:1em;
background: #FF0;
}
#nav ul li a:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<div class="span-24" id="nav">
<ul>
<li><a href="/" title="Go to the Welcome" class="current"><span>Home</span></a></li>
<li><a href="/website-design/" title="Go to the Website design" class="link"><span>Design</span></a></li>
<li><a href="/content-management-systems/" title="Go to the Content management systems" class="link"><span>Content Management Systems</span></a></li>
<li><a href="/ecommerce-systems/" title="Go to the eCommerce systems" class="link"><span>eCommerce</span></a></li>
<li><a href="/search-engine-services/" title="Go to the Search engine services" class="link"><span>Search</span></a></li>
<li><a href="/pro-image-manager/" title="Go to the Pro Image Manager" class="link"><span>PIM</span></a></li>
<li><a href="/news/" title="Go to the News" class="link"><span>News</span></a></li>
<li><a href="/our-clients/" title="Go to the Our clients" class="link"><span>Our clients</span></a></li>
<li class="last"><a href="/contact-us/" title="Go to the Contact us" class="link"><span>Contact us</span></a></li>
</ul>
</div>
</body>
</html>

Do you have firebug (http://getfirebug.com/) for your FireFox yet? That's the best way to find this sort of thing.

brightyoursite
01-12-2010, 05:46 AM
http://www.brightyoursite.com/blog/2010/01/10/the-simple-ul-li-css-seo-friendly-horizontal-menu/ same menu with clean codes.u can use this directly

abduraooft
01-12-2010, 07:20 AM
I'm having a little trouble with a simple meu I'm working with. Basically it won't line up next to div below, it has padding or a margin on the first link which I can't seem to get rid of.

Can we have a link to your page?

twistedsoul
01-12-2010, 06:39 PM
Still can't seem to figure it out, sorry it's not actually online as of yet

abduraooft
01-13-2010, 07:23 AM
Still can't seem to figure it out, sorry it's not actually online as of yetI'd like to ask the same question that I've asked here (http://www.codingforums.com/showpost.php?p=909778&postcount=13), a while ago.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum