nefunguje min-width

1daemon1 · Napísal **1daemon1**: 04.01.2012 16:29

Dobrý deň. Mám menu a v ňom vnorené menu.
html:

Kód:

<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="css/basic.css" />
      </head>
      <body>
               <ul id="menu">
                  <li id="Polozka">
                     <ul>
                        <li>Toto je polozka dlhsia nez 100px.</li>
                     </ul>
                  </li>
               </ul>
      </body>
</html>

položka li v hlavnom menu má vlastnosti určené cez id, pretože potrebujem pre každú položku určiť obrázkové pozadie + hover efekt (toto je zjednodušený kód).

css:

Kód:

      ul#menu {
            list-style-type: none;
      }
      
      ul#menu li ul li {
            width: auto;
            min-width: 100px;
            border: 1px solid #000000;
      }
      
      li#Polozka {
            width: 50px;
      }

Tieto kódy majú tento výsledok:

Potrebujem, aby sa položka vnoreného menu roztiahla na potrebnú šírku a nezalamovala riadky pri 100px. Ale zároveň aby mala minimálne 100px, pokiaľ je text položky kratší.

Pokiaľ položku li v hlavnom menu nenaštýlujem pomocou id ale pomocou ul#menu li, tak to funguje. Takže nechápem aký je rozdiel medzi ul#menu li a li#Polozka.

Prosím o pomoc. Ďakujem.

Ďuri · Napísal **Ďuri**: 04.01.2012 16:36

1daemon1 píše:

Pokiaľ položku li v hlavnom menu nenaštýlujem pomocou id ale pomocou ul#menu li, tak to funguje. Takže nechápem aký je rozdiel medzi ul#menu li a li#Polozka.

Zatial som to iba tak preletel, ale ak je toto cely problem, tak je to jasne - pravidlo ul#menu li sa uplatni nielen na #Polozka, ale aj na ten najvnutornejsi element <li>.

1daemon1 · Napísal autor témy **1daemon1**: 04.01.2012 17:07

Lenže pre vnútornú položku li som tú hodnotu predsa vynuloval pomocou width: auto; a dalšia vec, že na jakpsatweb píšu, že min-width by malo prebiť width.

Určite sa to bije s width, to mi je jasne, ale nechápem ako to vyriešiť.

edit//
Už to mám, stačí pri li#polozka prepisat width na min-width.

Ale mám ďalší problém s týmto css (html pôvodný):

Kód:

      * { margin: 0; padding: 0; }
      
      ul#menu {
            width: 300px;
            height: 21px;
            list-style-type: none;
            border: 1px solid black;
      }

      ul#menu li {
            position: relative;
            height: 100%;
            float: left;
      }
      
      ul#menu li ul {
            position: absolute;
            left: 0px;
            top: 21px;
            list-style-type: none;
             border: 1px solid #000000;
      }
      
      ul#menu li ul li {
            width: auto;
            min-width: 100px;
      }
      
      li#Polozka {
            min-width: 50px;
      }

problém ako na začiatku. Spôsobuje ho float: left pri ul#menu li, lenže ja to tam potrebujem. Skúšal som nastaviť float none pre ul#menu li ul li ale nepomáha to.

// Vyriešené, stačilo pridať white-space:nowrap; pre ul#menu li ul li

nefunguje min-width

Podobné témy