Vertikalno poravnjanje texta u meniju

[ bild-studio @ 06.09.2008. 21:12 ] @

Problem je sledeci na sledem linku: http://vasdomen.com/kosarka/HTML_CSS/ U Mozili je sve ok. Ali u IE vertical-align neradi da si pita! Da li zna neko hack za to ili nesto slicno sto bi odradilo problem ali da nediram sintaksu html koda koji je sledeci:

Code:

<ul>
     <li><a href="#">O NAMA</a></li>
     <li><a href="#">DVORANA I SPORTSKI TERENI</a></li>
     <li><a href="#">KLUB I &Scaron;KOLA KO&Scaron;ARKE</a></li>
     <li><a href="#">KAMPOVI</a></li>
     <li><a href="#">PG BASKET AGENCIJA</a></li>
     <li><a href="#">FOTOGALERIJE</a></li>
     <li><a href="#">PI&Scaron;ITE</a></li>
     <li><a href="#">LINKOVI</a></li>
</ul>

Nebih volio da imam gomilu css klasa i hackova koji ce ispraviti ovaj problem u IE ukoliko to bar nemora.... Volim clean code.

Ali bitno je da je meni "relativan" (ako ima vise od jedne ili 2 rijeci da se sam nacentrira na sredinu i da se transformise u 2 reda, ako je toliko potrebno). Kao sto je u Firefoxu 3 i Google Chrome. Nisam testirao za Operu.

Hvala unaprijed.

[ Aleksandar Ružičić @ 08.09.2008. 10:42 ] @

pa vertical-alignment ne radi to sto mislis (tj trebao bi, ali browseri to ne podrzavaju), ja za te stvari (kada imam samo jednu liniju texta u elementu koju hocu da centriram) koristim line-height, dakle ovako nesto:

Code:

li
{
height: 20px; /* ili koliko vec */
}

li a
{
line-height: 20px; /* isto kao height kod li-a */
}

[ askaratazor @ 08.09.2008. 13:17 ] @

Da, da..

Ali da stavis to u tabelu i postavis u td valign: top, ne bi imao problema ni u jednom pretrazivacu..

Ali na zalost, to nije po standardu :)

[ Aleksandar Ružičić @ 08.09.2008. 15:16 ] @

naravno, to nije po standardu, i ne samo to vec e da stvori vise problema nego sto ce da resi, ali necemo sad ponovo o tome...

[ bild-studio @ 08.09.2008. 21:28 ] @

Taj line height sam probao ali neradi posao. Posto ako ima 2 reda onda sve ode u .... :) A tabelama neradimo... Tako da sam ponovo na istom problemu... Ima li ko drugo resenje? Jos uvjek nisam resio ovo cudo... Dosta se bavim HTML om i CSS om mada prvi put radim ovu vrstu problema :) Za jedno-redne menije koristim taj line height i kad hocu da poravnjam sliku u ravni sa textom ali ovde... Nema upotrebu... Ako ko ima resenje nek pomaga :). Svakako hvala za odvojeno vrijeme!

[ bild-studio @ 09.09.2008. 00:34 ] @

Odlucio sam da radim ovaj problem programerski :).
Ukoliko me neko "uskoci" sa nekim HTML i CSS resenjem tim bolje ukoliko ne sta cemo sad :).

[ Aleksandar Ružičić @ 09.09.2008. 15:31 ] @

pa ja sam pretpostavio da ce biti jedna linija texta, jer je u pitanju meni (gde je logicno da bude samo jedna linija texta), ali ukoliko ti treba html/css resenje za bilo koji broj linija onda pogledaj ovo: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[ vatri @ 09.09.2008. 16:17 ] @

Mozes ovo rjesiti pomocu padding, stavi ovako:

Code:

padding-top:5px;
padding-bottom:5px;

[ Aleksandar Ružičić @ 10.09.2008. 11:35 ] @

@vatri: to nije pozeljno (mada sam i ja tako nekada radio) ali u nekim situacijama moze da posluzi, samo treba da se vodi racuna da padding-top i padding-bottom ulaze u visinu elementa, tako da height treba (u ovom slucaju) smanjiti za 10px

[ bild-studio @ 10.09.2008. 15:43 ] @

Sve ove linkove sa vertikalnom pozicijom sam obisao i pokusao primeniti ali sve je na principu za boxove, a ne za menije tako da je skoro nemoguce nacentrirati. Ali ovo programerski je najbolje resenje (bar se za sad sa mog gledista ispostavilo) napravio sam klasu citanje BW i funkciju sa brojanje rijeci i onda u zavisnosti od toga stavljam paddinge (top 5 ili top 10). I extra :) A optimizovano je za bukvalno svaki EXPLORER uzuzev IE 5.5, IE 4 i ispod tih :). Pogledajte link za par dana trebalo bi da je sve gotovo. Zanimaju me Vase profesionalne sugestije. Ali samo sugestije.