CSS problem z rozjeżdzającym się menu

[azupak]

Witam,
co jest źle w kodzie, że element po prawej stronie jest poziom niżej niż dwa pozostałe?

Kod:

#menu{

height: 74px;
padding:30px 0px 0px 0px ;

}
#menu-l {
    background: url("images/header_l.png") no-repeat scroll right top transparent;
    float: left;
    height: 74px;
    width: 13px;

}

#menu-m {
    background: url("images/header_m.png") repeat-x scroll  0 0 transparent;
    height: 74px;
  width:98%;
  margin: 0 16px 0 0px;
}

#menu-r {
    background: url("images/header_r.png") no-repeat scroll left top transparent;
    float: right;
    height: 74px;
    width: 13px;
    
    
}

Kod:

<div id="menu">
             <div id="menu-l"></div>
        <div id="menu-m"></div>
          <div id="menu-r"></div>

      </div>

Prosiłbym o podpowiedź, bo szukam i szukam, a nic z tego dalej nie wychodzi.

[Moody]

A możesz pokazać jak to wygląda na stronie? Może zmień pozycje right na left dla menu-r

[azupak]

A możesz pokazać jak to wygląda na stronie? Może zmień pozycje right na left dla menu-r

Wygląda tak jak jest w załączniku:

  screen.jpg (Rozmiar: 35.76 KB / Pobrań: 11)

[azupak]

czy ktoś wie jak rozwiązać ten problem?

[Heyek]

Cześć,
Myślałem przez chwilę nad twoim problemem i wymyśliłem dużo prostsze rozwiązanie od twojego. Zamiast korzystania z 3 elementów możesz zrobić to w jednym.

Kod css:

Kod:

#menu{
<!-- ustawiasz tło całego menu i powielanie poziome -->
background-image: url("images/header_m.png");
background-repeat: repeat-x;

<!-- zaokrąglenie rogów menu, możesz wpisać dowolną wartość np. 5px -->
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

<!-- styl, wielkość i kolor ramki  -->
border-style: solid;
border-width: 1px;
border-color: kolor;

<!-- wysokość i szerokość twojego menu -->
height: 74px;
width: 800px;

}

Kod HTML

Kod:

<div id="menu">
Zawartość menu
</div>