Placing Images in the css file instead of the html file - html

Question

For my header I'm using the ul and li tags for my nav menu (Portfolio/Contact/About) I'm trying to place the images text (Portfolio/Contact/About) and the slashes in the CSS file instead of my div "navigationMain" in the HTML file but every attempt I tried has failed. Is there a certain way dealing with ul, li tags and placing images within the tags using CSS? Because I've placed my logo and header background in the header within the css file. Also I'm creating this website in notepadd++
http://jsfiddle.net/J4h9Q/7/embedded/result/ http://jsfiddle.net/J4h9Q/8/
HTML:
<div class="header">
<div class="container">
<div class="headerMain"> </div>
<div class="navigationMain">
<ul class="nav">
<li><img src="images/portfolio2.png" alt="portfolio" id="portfoliobutton"></li>
<li><img src="images/slash.png" alt="slash"></li>
<li><img src="images/about.png" alt="about" id="aboutbutton"></li>
<li><img src="images/slash.png" alt="slash"></li>
<li id="contactbutton" class="contact"><img src="images/contact.png" alt="contact"></li>
</ul>
</div>
</div>
CSS:
body,div,ul,li,p{
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
height:100%;
background: url(../images/background11.png) repeat scroll 0 0;
}
.header {
background: black;
height: 165px;
min-width: 1075px;
}
.container {
height: 165px;
margin-left: auto;
margin-right: auto;
width: 1075px;
}
.headerMain{
height: 165px;
position: relative;
width: 195px;
float: left;
left: 20px;
top: 4px;
background:url(../images/ARlogo8.png) no-repeat center center;
}
.navigationMain{
height: 154px;
margin-left: auto;
margin-top: -4px;
position: relative;
width: 665px;
right: 30px;
}
li{
display: inline;
}
.nav li{
display: inline;
color:white;
position: relative;
top: 70px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
left: 160px;
font-size:44px;
}

Answer 1

How tied are you to putting the images in CSS? I recommend putting the slashes, if anything, in the CSS. That would immediately reduce the number of list items down to 3 - so it's more "semantic". You should not have a list item just to denote a slash.
Demo: http://jsfiddle.net/YBzA9/1/
Feel free to tweak the dimensions in .nav a when you use your real images.
After you reduce the number of list items, consider one of the following:
(easy solution) putting the images inside of anchor tags in the markup and calling it a day
(a more "correct" solution) styling your anchor like such:
HTML
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul
CSS
.nav li {
background: url('http://dummyimage.com/26x34/000000/fff&text=//');
padding-left: 26px;
}
.nav li:first-child {
background: none;
}
.nav a {
display: block;
text-indent: -999px;
height: 35px;
width: 120px;
}
#portfolio-link {
background: url('http://dummyimage.com/146x35/000000/fff&text=Portfolio');
}
#about-link {
background: url('http://dummyimage.com/146x35/000000/fff&text=About');
}
#contact-link {
background: url('http://dummyimage.com/146x35/000000/fff&text=Contact');
}
This allows text to still be read (search engines, screen readers) but still maintain visual appeal.

Answer 2

You could set that images as background without repeating it. You also need to set a min height and width to be sure that you can see the image later. You can also store the image in the css file if you store it base64 encoded.
In general I would just fix the links to your images. Try using absolute urls beginning with a single slash.