DesigntheWorld
New Member
I am experimenting using different methods of making navigation menus
I made a nav from scratch in Photoshop. I used a sprite image I made.
I have a couple of questions and would appreciate help with any of them.
Question 1:
I was able to get the navigation working correctly, BUT are there any discrepancies, errors or unnecessary markup in my HTML or CSS?
Question 2:
Should the nav ul li be display: inline as opposed to float: left ?
Since they both achieve what seems to be the same effect, which one is recommended in this situation and why?
Question 3:
I previously made another PSD navigation menu but I included the home,about,services and contact text and saved it all as a jpeg. I have seen that method used alot, but then I read somewhere that we should avoid putting the link texts as images for various reasons, such as for SEO purposes, screen readers and such...that is why the current navigation I am working on uses the html text that is styled using CSS. Should I always leave the text as html, and style it using CSS when using a psd navigation sprite, such as the one I made? Or is it okay to include the text inside the PSD nav sprite?
This is the browser view, that shows the text as actual html styled with CSS and you can see the hover state of one of the links:
Here is the HTML:
Here is the CSS:
Thank you again!!
I made a nav from scratch in Photoshop. I used a sprite image I made.

I have a couple of questions and would appreciate help with any of them.
Question 1:
I was able to get the navigation working correctly, BUT are there any discrepancies, errors or unnecessary markup in my HTML or CSS?
Question 2:
Should the nav ul li be display: inline as opposed to float: left ?
Since they both achieve what seems to be the same effect, which one is recommended in this situation and why?
Question 3:
I previously made another PSD navigation menu but I included the home,about,services and contact text and saved it all as a jpeg. I have seen that method used alot, but then I read somewhere that we should avoid putting the link texts as images for various reasons, such as for SEO purposes, screen readers and such...that is why the current navigation I am working on uses the html text that is styled using CSS. Should I always leave the text as html, and style it using CSS when using a psd navigation sprite, such as the one I made? Or is it okay to include the text inside the PSD nav sprite?
This is the browser view, that shows the text as actual html styled with CSS and you can see the hover state of one of the links:

Here is the HTML:
HTML:
<nav>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</nav>
Here is the CSS:
Code:
* {
margin: 0;
padding: 0;
}
nav {
display: block;
background: url(images/nav_bg.jpg);
}
nav ul {
background: #0C0 url(images/nav_sprite2.jpg) no-repeat;
width: 500px;
height: 50px;
margin: 0 auto;
list-style-type:none;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
width: 125px;
height: 50px;
font-family: segoe "Segoe UI", "Segoe UI Light", sans-serif;
color: #fff;
text-transform: uppercase;
font-weight: bold;
line-height: 50px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 2px #333;
}
nav ul li a:hover {
background: url(images/nav_sprite2.jpg);
}
nav ul li.home a {
background-position: 0 -50px;
}
nav ul li.about a {
background-position: -125px -50px;
}
nav ul li.services a {
background-position: -250px -50px;
}
nav ul li.contact a {
background-position: -375px -50px;
}
Thank you again!!