How to align pictures on a menu bar?

Question

I'm working on a menu bar. I have the red bar as a backgorund and the list items are the menu points and the lines between them.

Everything goes fine without the lines, but when I put them in, they ruin the whole menu because they are too low and the text goes down and I can't get it back to their position and neither the lines.

Some of the code:

HTML

<nav id="menu">
        <ul>
            <li><a id="menu1" href="#">Corturi Alutent</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu2" href="#">Schema Bloc</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu3" href="#">Galerie Foto</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu4" href="#">Accesorii Alutent</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu5" href="#">Oferte Speciale</a></li>
        </ul>
    </nav>

CSS

#menu{
padding:13px 5px 13px 5px;
background-image:url("./kepek/menu.png");
}

#menu1{
color:#fff;
margin:0 40px 0 10px;
line-height:20px;
}

#menu2,#menu3,#menu4,#menu5{
color:#fff;
margin:0 40px 0 35px;
padding-bottom:10px;
}

How can I move both of them upper, to the center of the bar?

Answer 1

Method 1

Right now, you are using imgs to show your borders. This can work, and I'll show you how here, but I really recommend you go with using CSS borders instead, as I'll show below in part 2.

Working Fiddle

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 borders on the left and right. Here are some advantages over using inline imgs"

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

Working Fiddle

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.