[CSS] Menu - zablokowanie, bo teraz lata przy zmianie rozmiaru okna przeglądarki

[kgs]

Witam serdecznie,

Problem dotyczy menu stworzonego z pociętej grafiki - jeden element graficzny to jeden przycisk. Przy otwartej przeglądarce w pełnym oknie strona wygląda w porządku, ale po zmniejszeniu jej do połowy szerokości, przyciski nie mieszczące się w oknie przeskakują do linii niżej. Chodzi mi o zablokowanie ich, aby zawsze były w jednej linii. Próbowałem z różnymi ustawieniami i ciągle to samo, największe nadzieje pokładałem w display in-line ale to również nie pomogło albo źle to zastosowałem. Poniżej kod z usuniętymi nieudanymi próbami aby nie wprowadzać zamieszania.

Kod menu ze strony:

Kod:

<div class="menu">
        <ul>
            <li><a href="#" ><img src="../../image/1.jpg" width="170" height="59" /></a>
                <ul>
                    <li><a href="#">Historia</a></li>
                    <li><a href="#">Filozofia</a></li>
                    <li><a href="#">Dokumenty korporacyjne</a></li>
                    <li><a href="#">Struktura organizacyjna</a></li>
                    <li><a href="#">Działalność społeczna</a></li>
                    <li><a href="#">Nagrody i wyróżnienia</a></li>
                    <li><a href="#">Koncesje</a></li>
               </ul>
        </li>
            <li><a href="#" id="current"><img src="../../image/2.jpg" width="190" height="59" /></a>
<ul>
                <li><a href="#">Karta momo</a></li>
                <li><a href="#">e-Faktura</a></li>
                <li><a href="#">Wnioski</a></li>
                <li><a href="#">Instrukcja momo</a></li>
                </ul>
                
          </li>
            <li><a href="/faq.php"><img src="../../image/3.jpg" width="195" height="59" /></a>
                <ul>
                <li><a href="#">Stacje momo</a></li>
                <li><a href="#">Stacje w budowie</a></li>
                <li><a href="#">Poszukujemy nieruchomości</a></li>
                </ul>
          </li>
  </li>
            <li><a href="/faq.php"><img src="../../image/4.jpg" width="269" height="59" /></a>
             <ul>
                    <li><a href="#">Władze spółki</a></li>
                    <li><a href="#">Dokumenty informacyjne</a></li>
                    <li><a href="#">Raporty bieżące</a></li>
                    <li><a href="#">Raporty okresowe</a></li>
                    <li><a href="#">Walne zgromadzenie</a></li>
                    <li><a href="#">Istotna informacja</a></li>
                    <li><a href="#">Kontakt</a></li>
               </ul>
          </li>
            <li><a href="/contact/contact.php"><img src="../../image/5.jpg" width="164" height="59" /></a></li>

Kod z pliku css:

Kod:

.menu {
    border-bottom-style : none;
    border-bottom-width : 0px;
    border-left-style : none;
    border-left-width : 0px;
    border-right-style : none;
    border-right-width : 0px;
    border-top-style : none;
    border-top-width : 0px;
    display : inline-block;
    font-family : "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
    font-size : 14px;
    font-weight : bold;
    margin-bottom : 0px;
    margin-left : 0px;
    margin-right : 0px;
    margin-top : 0px;
    padding-bottom : 0px;
    padding-left : 0px;
    padding-right : 0px;
    padding-top : 0px;
    position : fixed;
top: 233px;
  }


.menu ul {
    background:#FFFFFF;
    height:10px;
    list-style:none;
    margin:0;
    padding:0;
  }


.menu li {
    float:left;
    padding:0px;
  }


.menu li a {
    background:#FFFFFF;
    color:#000000;
    display:block;
    font-weight:normal;
    line-height:20px;
    margin:0px;
    padding:0px 0px;
    text-align:center;
    text-decoration:none;
  }


.menu li a:hover, .menu ul li:hover a {
    background: #A31A1A url("images/hover.gif") bottom center no-repeat;
    color:#000000;
    text-decoration:none;
  }


.menu li ul {
    background:#FFFFFF;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;
    */;
  }


.menu li:hover ul {
    display:block;
  }


.menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
  }


.menu li:hover li a {
    background:none;
  }


.menu li ul a {
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 0px 0px 0px;
    text-align:left;
  }


.menu li ul a:hover, .menu li ul li:hover a {
    background:#EEEEDD;
    border:0px;
    color:#000000;
    text-decoration:none;
  }


.menu p {
    clear:left;
  }

Nieudane próby:

- wpisanie całej strony w diva i ustalenie mu stałej szerokości.

Udane próby:

- wpisanie min-width dla całego kontenera, tylko pytanie czy to jest politycznie dobre rozwiązanie, czy przypadkowo uzyskany pozytywny efekt?

[Pedro84]

1. Matko Boska, gdzieś Ty się uczył CSS pisać? Można by to napisać skracając o jakieś 60-70 procent....
2. Jaki masz DOCTYPE?
3. Musisz stworzyć kontener.

PS Podaj URL.

[kgs]

1. Matko Boska, gdzieś Ty się uczył CSS pisać? Można by to napisać skracając o jakieś 60-70 procent....
2. Jaki masz DOCTYPE?
3. Musisz stworzyć kontener.

PS Podaj URL.

Kontener utworzyłem, wpisałem do niego min-width i zadziałało - co już wyżej pisałem, tylko ciekawi mnie czy jest to poprawna metoda.

Nie uczyłem się CSS, to moje pierwsze podejście, i korzystam z przykładowego menu. Rozumiem ze nadmiarowość dotyczy tych rożnych parametrów do menu w css. W siec jeszcze nie wrzucone.

[aleksanderek]

min-width nie działa w ie6, a to nadal ok. 5% użytkowników.
Zastosuj po prostu width.

Pozdrawiam