Autor Zpráva
RadekV
Profil *
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">&nbsp;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
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
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 *
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
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 *
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">&nbsp;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

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: