Adding icons to my nav menu

[skelleex]

I have a simple nav menu in which I want to add icons to the icon should appear above the text in the center. However I cannot seem to figure out how to do this. Below is my code:

 <ul class="nav">
      <li class="whoweare"><a href="#">who we are</a></li>
      <li class="services"><a href="#">services</a></li>
      <li class="contact"><a href="#">contact</a></li>
  </ul>

ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 20px solid #FFF; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	/*margin-bottom: 15px;  this creates the space between the navigation on the content below */
}
ul.nav li {
	float: left;
	text-align:center;
	width: 23%;
	/*border-bottom: 1px solid #666;  this creates the button separation */
}

I have tried an after class but that doesn't seem to work either.

[kohoutek]

Hi skelleex,

this thread has two methods you can use.

[skelleex]

Hi skelleex,

this thread has two methods you can use.

tks

[skelleex]

I added the file i am working to my web server. I am still trying to add my menu to be inline with the logo and get all the icons to line up just above the text. Can anyone help the link is http://www.webapp-testing.com/rethink/.

[skelleex]

still tryin to get some help with this

[TechnoBear]

Did you try the methods in the thread @kohoutek linked to? They apply the images as background images in the CSS, not as <img> tags in the HTML as you have.

[skelleex]

Actually I got lost in the code a bit am I suppose to add

#nav a:link, #nav a:visited {
background:url(sprite.png) no-repeat 0; /*  need to declare bg image once for all nav links to follow */
}

to my css referening to my images (they are not sprites by the way). Also how will I move the images to the top of the menu

[kohoutek]

Are you not planning to use sprites? If you want to keep your current CSS and HTML structure and use images within your HTML document, then just add margin:auto; to your ul.nav li img to center the image.

[skelleex]

really ok will give it a try later. What about getting the menu next to the image will that be an easy fix also

[skelleex]

I am not using sprites as I have no experience with them at this time. Hopefully you can point me to a tutorial on how to create them and use them.

[kohoutek]

really ok will give it a try later. What about getting the menu next to the image will that be an easy fix also

Without changing anything except the CSS, you can replace your current declaration with this:

ul.nav li img {
vertical-align: middle;
margin-right:10px;
}

[kohoutek]

I am not using sprites as I have no experience with them at this time. Hopefully you can point me to a tutorial on how to create them and use them.

The link I've posted in #2 shows how you can use a sprite. If you don't need the various link states, then one row is sufficient.

[skelleex]

but how do i create the sprite if i have several images separate from each other

[skelleex]

Without changing anything except the CSS, you can replace your current declaration with this:

ul.nav li img {
vertical-align: middle;
margin-right:10px;
}

I think we are not on the same page with this code all the others worked fine. I am trying to get the menu to go in the space to the right of the logo marked "Rethink" how can I accomplish that

[kohoutek]

but how do i create the sprite if i have several images separate from each other

By using a graphics editor and creating a new image out of the single source images, placing them side by side or top to bottom.

[kohoutek]

I think we are not on the same page with this code all the others worked fine. I am trying to get the menu to go in the space to the right of the logo marked "Rethink" how can I accomplish that

You'd apply a width and a float for each container you want to have sit side by side. In your case, it'd be #insert_logo and ul.nav.

[skelleex]

Ok tks never real used photoshop in any significant way but I will look into this tks for the advice

[skelleex]

yeah kinda figured that out when playing around with the css just now tks for pinpointing it though

[TechnoBear]

You can apply the images (png or gif) individually at first, then use http://spriteme.org/ to convert them to a sprite.