Nav Links... do I use <UL> or just <a>'s?
Posted: Fri Jan 23, 2009 6:43 pm
I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE.
My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>?
Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop)
My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>?
Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop)
Code: Select all
<html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="#">links</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="links2">
<a href="#">links</a>
<a href="#">link 2</a>
<a href="#">three</a>
</div>
</div>
</body>
</html>