Method 1
Right now, you are using img
s to show your borders. This can work, and I'll show you how here, but I really recommend you go with using CSS border
s instead, as I'll show below in part 2.
HTML:
<nav id="menu">
<ul>
<img src="http://i.stack.imgur.com/z45Gy.png">
<li><a id="menu1" href="#">Corturi Alutent</a></li>
<img src="http://i.stack.imgur.com/z45Gy.png">
<li><a id="menu2" href="#">Schema Bloc</a></li>
<img src="http://i.stack.imgur.com/z45Gy.png">
<li><a id="menu3" href="#">Galerie Foto</a></li>
<img src="http://i.stack.imgur.com/z45Gy.png">
</ul>
</nav>
CSS:
#menu {
background-image:url("./kepek/menu.png"); //YOUR BACKGROUND THAT I DON'T HAVE
background-color:red; // TEMP COLOR TO REPLACE THE BACKGROUND IN THE FIDDLE. REMOVE THIS LINE.
height:60px; //IF YOU FLOAT ITEMS, YOU NEED TO SPECIFY A HEIGHT
}
#menu ul {
list-style:none;
height:100%;
}
#menu ul li {
float:left;
margin-top:10px;
}
#menu ul img {
float:left;
margin-top:10px;
}
#menu ul li a {
color:white;
text-decoration:none;
padding:10px;
display:block;
}
Method 2
The better method is to use border
s on the left and right. Here are some advantages over using inline img
s"
- One less HTTP request, which will save time when loading your page.
- Easier to change in the future. By using rgba, white/black, and transparency, we can get borders that will look perfect even if you change the background color of the header under them.
The way we do this is add a border-left
to each a
, and make it light. Then a border-right
and make it dark.
HTML:
<nav id="menu">
<ul>
<li><a id="menu1" href="#">Corturi Alutent</a></li>
<li><a id="menu2" href="#">Schema Bloc</a></li>
<li><a id="menu3" href="#">Galerie Foto</a></li>
</ul>
</nav>
CSS:
#menu {
background-image:url("./kepek/menu.png");
background-color:red;
height:60px;
}
#menu ul {
list-style:none;
height:100%;
}
#menu ul li {
float:left;
margin-top:10px;
}
#menu ul li a {
color:white;
text-decoration:none;
padding:10px;
display:block;
border-left:solid 1px rgba(255,255,255,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
}
The above will get you borders in between looking perfect, but on the outside, you'd be missing the very outer ones. We can fix this by using child selectors:
#menu ul li:first-child {
border-left:solid 1px rgba(0,0,0,0.3);
}
#menu ul li:last-child {
border-right:solid 1px rgba(255,255,255,0.3);
}
This method fits best practices better, and it'll be easier for you to maintain in the long run. However, the great thing about the web is flexibility, so really you can choose either.