| Autor | Zpráva | ||
|---|---|---|---|
| RadekV Profil * |
#1 · Zasláno: 11. 6. 2009, 15:43:26
Nazdar,
na stránkách http://spsasou.prostejov.cz jsem kdysi vytvořil levé menu, které sice nebylo validní, ale zato funkční. Ovšem IE8 ho nechce zobrazit, takže se k němu vracím. Kód vypadá takto:
<div id="levy_div">
<ul id="hlavniMenu">
<li class="gray" style="padding-bottom: 0.5em"> Naše škola</li>
<li><a href="/index.php">O škole</a>
<ul>
<div class="rbox">
<div class="rboxin1">
<div class="rboxin2">
<li><a href="/index.php">Úvod</a></li>
<li><a href="/aktual/65let.php">65. výročí založení</a></li>
<li><a href="/o_skole/mapy.php">Kde nás najdete</a></li>
<li><a href="/o_skole/dokumenty.php">Dokumenty</a></li>
<li><a href="/o_skole/historie.php">Historie</a></li>
<li><a href="/evaluace/evaluace.php">Evaluace školy</a></li>
<li><a href="/o_skole/rada.php">Školská rada</a></li>
<li><a href="/o_skole/oceneni.php">Ocenění pro školu</a></li>
</div>
</div>
</div>
</ul>
</li>
<li><a href="/aktual/aktual.php">Aktuality</a>
<ul>
<div class="rbox">
<div class="rboxin1">
<div class="rboxin2">
<li><a href="/aktual/aktual.php">Novinky</a></li>
<li><a href="/aktual/65let.php">65. výročí založení</a></li>
<li><a href="/aktual/plan0809.doc" target="_new">Plán práce</a></li>
</div>
</div>
</div>
</ul>
</li>
<li><a href="/pracovnici/pracov.php">Pracovníci</a>
...
.rbox { /* vysouvací menu nalevo */
width: 150px;
background:transparent url("/l_stred.gif") 0 0 repeat-y;
}
.rboxin1 {
background:transparent url("/l_horni.gif") left top no-repeat;
}
.rboxin2 {
background:transparent url("/l_dolni.gif") left bottom no-repeat;
padding: 7px 7px 7px 7px;
}
+ pro MSIE předefinovaný padding
a špatně je, že v <ul> jsou přímo značky <div>. Pokud <ul> dám až za ty tři divy (a na konci opačně), tak je to sice validní, ale nefinkční, jak se lze přesvědčit na http://spsasou.prostejov.cz/index2.php . Můžete mi prosím poradit, jak to udělat validně a současně funkčně? Díky, Radek |
||
| Bubák Profil |
#2 · Zasláno: 11. 6. 2009, 15:57:45
Nechce se mi to studovat, ale co ti brání místo DIV použít UL, nebo LI, samozřejmě s patřičným formátem, vynulovaný margin, padding a odrážky.
Zda je validita nutná, se probírá v http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=17&topic=95841, to jenom aby neběželo 2× menší OT na totéž téma současně. |
||
| Miloš Profil |
#3 · Zasláno: 11. 6. 2009, 18:45:48
Ostatně jak tě napadla tahle prasárna:
<ul>
<div class="rbox">
<div class="rboxin1">
<div class="rboxin2">
<li><div> nemá v <ul> co dělat. V <ul> může být jen <li>. Teprve do <li> můžeš nacpat další blok. No a <li> zase nemá co dělat bezprostředně v <div>u – rodič <li> musí být nějaký seznam (<ol>, <ul>, <menu> nebo <dir>). |
||
| RadekV Profil * |
#4 · Zasláno: 11. 6. 2009, 20:27:30
Miloš: Nenapadla, opsal jsem ji. Kostra webu byla udělána z části podle Pixiho knížky, z části podle Intervalu... nabalovalo se to postupně.
Bubák: Mým cílem není validita jako taková, ale bezproblémová zobrazitelnost v IE8. Bohužel někteří naši žáci a rodiče si neumějí zapnout kompatibilní režim a je oheň na střeše. O přestylování <ul> nebo <li> jsem přemýšlel, ale nepovedlo se mi vrazit do jedné značky troje pozadí. Menu se průběžně mění, takže dělat to nějak rozměrově přesně v jednom obrázku je nemyslitelné. Radek |
||
| Bubák Profil |
#5 · Zasláno: 11. 6. 2009, 21:38:58
„Bohužel někteří naši žáci a rodiče si neumějí zapnout kompatibilní režim a je oheň na střeše.“
Tak jim ho vnuť, přesněji, přepni IE do kompatibilního režimu. „O přestylování <ul> nebo <li> jsem přemýšlel, ale nepovedlo se mi vrazit do jedné značky troje pozadí.“ Ale UL LI jde do sebe validně zanořovat, a jak zmínil Miloš, navíc do LI můžeš vložit (nejen) DIV. „nabalovalo se to postupně.“ Pravděpodobně jsi to překombinoval. |
||
| RadekV Profil * |
#6 · Zasláno: 11. 6. 2009, 23:14:54
K tomu webu existuje "mapa", která má stejnou (a doufám validní) dvouúrovňovou strukturu <ul> a <li> - akorát se text zobrazuje pod sebe.
<ul style="margin-left: 10px; padding-left: 10px; list-style-type: disc; font-family: Times, serif; font-size: 120%">
<li class="gray" style="padding-bottom: 0.5em"> Naše škola</li>
<li><a href="/index.php">O škole</a>
<ul>
<li><a href="/index.php">Úvod</a></li>
<li><a href="/aktual/65let.php">65. výročí založení</a></li>
<li><a href="/o_skole/mapy.php">Kde nás najdete</a></li>
<li><a href="/o_skole/dokumenty.php">Dokumenty</a></li>
<li><a href="/o_skole/historie.php">Historie</a></li>
<li><a href="/evaluace/evaluace.php">Evaluace školy</a></li>
<li><a href="/o_skole/rada.php">Školská rada</a></li>
<li><a href="/o_skole/oceneni.php">Ocenění pro školu</a></li>
</ul>
</li>
<li><a href="/aktual/aktual.php">Aktuality</a>
<ul>
<li><a href="/aktual/aktual.php">Novinky</a></li>
<li><a href="/aktual/65let.php">65. výročí založení</a></li>
<li><a href="/aktual/plan0809.doc" target="_new">Plán práce</a></li>
</ul>
</li>
...
No a v menu to má být vyjížděcí (bez problémů) a s obrázkovým pozadím (řešené nevalidně, viz výše). Není mi tedy jasné, jak blok začínající čtvrtým řádkem podložím obrázky, resp. jak k tomu využít Bubákovu prostřední radu. Mám stylovat první odrážku <li> (Úvod) anebo vytvářet další úroveň zanoření? Jestli se jedná o pozicování obrázků pod <li>, prosím o nakopnutí, protože tomuto teď opravdu nerozumím. Děkuju, Radek |
||
|
Časová prodleva: 16 let
|
|||
0