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.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.
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/.
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.
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.
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