Junior Spellweaver
- Joined
- Nov 30, 2010
- Messages
- 141
- Reaction score
- 16
<ul id="nav">
<li><b><a href="index.php">Home</a></b></li>
<li><b><a href="bio.php">Biography</a></b></li>
<li><b><a href="web.php">Web Design</a></b></li>
<li><b><a href="writing.php">Writing</a></b></li>
<li><b><a href="cooking.php">Cooking</a></b></li>
<li><b><a href="music.php">Music</a></b></li>
<li><b><a href="gfx.php">GFX</a></b></li>
<li><b><a href="contact.php">Contact</a></b></li>
</ul>
#nav ul
{
margin: 0px;
padding: 0px;
}
#nav li
{
display: inline;
list-style-type: none;
}
#nav li a
{
padding: 5px;
}
#nav li a:hover
{
background-color: #2a9cd0;
}
background-image: url(path/to.img);
#nav li a:hover
{
background-color: #2a9cd0;
}
#nav li a:hover
{
background-image: url(path/to-hover.img);
}
<div id="nav_links">
<a href="./" class="selected">Home</a>
<a href="./about.php">About</a>
<a href="./portfolio.php">Portfolio</a>
<a href="./services.php">Services</a>
<a href="./contact.php">Contact</a>
</div>
#nav_links a {
display: block;
color: #FFF;
font-family: Trebuchet MS;
font-size: 18px;
float: left;
height: 22px;
padding: 6px;
text-decoration: none;
}
#nav_links a:hover {
color: #000;
background-color: #EEEEEE;
}
#nav_links a.selected {
color: #000;
background-color: #EEEEEE;
}
The CSS attribute is background-position.That makes sense, I wasn't really planning on doing the alteration in the first place I only did it because I thought it would be usefull. Could you possibly post a code that would alter the background position? I will edit the topic post.
Hmmm, a nice tutorial, but you do not need to use <li> etc. it just clutters up your code. Here's how I do mine:
HTML
CSSCode:<div id="nav_links"> <a href="./" class="selected">Home</a> <a href="./about.php">About</a> <a href="./portfolio.php">Portfolio</a> <a href="./services.php">Services</a> <a href="./contact.php">Contact</a> </div>
Copied straight from my source code, you can easily change the div IDs and CSS though.Code:#nav_links a { display: block; color: #FFF; font-family: Trebuchet MS; font-size: 18px; float: left; height: 22px; padding: 6px; text-decoration: none; } #nav_links a:hover { color: #000; background-color: #EEEEEE; } #nav_links a.selected { color: #000; background-color: #EEEEEE; }
Yes you do need to use lists in HTML for certain features other tags don't single-handedly support (such as in-line element tags- like <a>, <p>, <span>, and many more)
It's not completely useless, but (like everything) shouldn't be used if your not using it for any particular reason..
In this case there's (arguably) some reason.. I'm not arguing that there really is, but.. <li> isn't clutter, it actually reduces code in A LOT of cases.
That's shenanigans. You do need to use a list for a LIST. If not, you are just a bad coder with a terrible semantics. Even if you plan to use html5Hmmm, a nice tutorial, but you do not need to use <li> etc. it just clutters up your code. Here's how I do mine:
HTML
CSSCode:<div id="nav_links"> <a href="./" class="selected">Home</a> <a href="./about.php">About</a> <a href="./portfolio.php">Portfolio</a> <a href="./services.php">Services</a> <a href="./contact.php">Contact</a> </div>
Copied straight from my source code, you can easily change the div IDs and CSS though.Code:#nav_links a { display: block; color: #FFF; font-family: Trebuchet MS; font-size: 18px; float: left; height: 22px; padding: 6px; text-decoration: none; } #nav_links a:hover { color: #000; background-color: #EEEEEE; } #nav_links a.selected { color: #000; background-color: #EEEEEE; }
<a href="#">Foo</a>
<a href="#">bar
<a href="#">Something</a>
<a href="#">Something</a>
<a href="#">Something</a>
</a>
Yea, right right, and do you realize that by clicking anywhere insideThe CSS used I styled the links in a certain div class/ID this means you can change the link styling for a separate class if you wish; thus allowing a multilevel menu.
<a href="#">Foo
<a href="#">bar</a>
<a href="#">bar</a>
</a>
You are completely clueless. You need to use list because it is a list, it's calledAs I said in my previous post, the "display: block;" method gives the link all of the properties that a div class for example would hold, height, width etc. etc. therefore you don't need to use a list.
Neither can be better(of these two anyway), because the only right and valid method is the one with a list. What you are doing it confusing people with your bad coding, some might believe you and here we go - another bad coder on the internet.I was showing another method of how to do it, now I've got two smart arses trying to prove my method wrongI'm not saying that either is better, I'm just showing a neater way of doing the same thing.
The simple fact that you are using avatar with a php shirt, stating that you are web developer, web designer and "Knowledgeable Developer", while you are clearly not really experienced is quite enough for me.Also, that's my twitter background, and it gives people an idea of what I do in my spare time - no where throughout that image is be bragging that I can code/program well, I simply start that I am a website designer, which I am. So gf, gtfo, goodnight