|
 | | |
| Autor | Správa |
|---|
1daemon1
Užívateľ
Založený: 14.04.2009
Príspevky: 824
 |  Zaslal: St 04.01.12 17: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. |
_________________
CPU: Intel Core 2 Duo E6600, 2400 MHz GPU: 2x NVIDIA GeForce 7600 GT (256 MB) MB: Asus P5NSLI RAM: 2GB ddr2 Zdroj: FORTRON BlueStorm II 500W HDD: SEAGATE Barracuda 7200.9 250GB OS: Ubuntu 11.10 32bit & Windows 7 Ultimate 32bit
Mobil: Samsung Galaxy S2 i9100 MicroSDHC: Patriot 32GB class 10 | |
   |
|
Ďuri
Administrátor
Založený: 11.08.2007
Príspevky: 3785
Bydlisko: Brno
| | Zaslal: St 04.01.12 17:36 | |
| 1daemon1 napísal: | | 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
Užívateľ
Založený: 14.04.2009
Príspevky: 824
| | Zaslal: St 04.01.12 18: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 |
_________________
CPU: Intel Core 2 Duo E6600, 2400 MHz GPU: 2x NVIDIA GeForce 7600 GT (256 MB) MB: Asus P5NSLI RAM: 2GB ddr2 Zdroj: FORTRON BlueStorm II 500W HDD: SEAGATE Barracuda 7200.9 250GB OS: Ubuntu 11.10 32bit & Windows 7 Ultimate 32bit
Mobil: Samsung Galaxy S2 i9100 MicroSDHC: Patriot 32GB class 10 | |
|
|
|
Nemôžete pridávať nové témy do tohto fóra.
Nemôžete odpovedať na témy v tomto fóre.
Nemôžete upravovať svoje príspevky v tomto fóre.
Nemôžete mazať svoje príspevky v tomto fóre.
Nemôžete hlasovať v tomto fóre.
|
| |
