CSS, vertical-align i skleroza

[ivanhoe]

ne mogu nikako da se setim kako da napravim meni od liste, tako da mi text u linkovima budu postavljen na dno (a sam link je blok visine 70px).Ovo je vrlo cesta fora, ali nikako da nadjem neki primer koji je uradjen bez tabela..

Evo kod da bude jasnije sta pricam:

<ul id="topMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Brushes</a></li>
<li><a href="#">Add Brushes</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

A CSS je:

ul#topMenu {
position:relative;
margin:0; padding:0px;
list-style-type: none;
overflow:hidden;
}

ul#topMenu li {
display:inline; /* fix IE */
float:left;
margin:0; padding:0px;
border: 1px solid green;
}

ul#topMenu li a {
display: block;
float:left;
height:70px;
line-height: 70px;
margin: 0;
padding: 0 20px 0 20px;
border: 1px solid red;
vertical-align: bottom;
}


ovo vertical-align: bottom ne radi... borderi su stavljeni zbog debuga naravno..

[xippi]

pada mi nesto ovako na pamet

ul#topMenu {
margin:0; padding:0px;
list-style-type: none;
height:70px;
}

ul#topMenu li {
display: block;
float:left;
width: 100px;
height: 70px;
margin: 0;
padding: 0 20px 0 20px;
border: 1px solid red;
position: relative;
border: 1px solid green;
}

ul#topMenu li a {
position: absolute;
bottom: 0px;

}



moras apsolutno da pozicioniras. ovaj kod verovatno moze i cistije :)

[noviKorisnik]

Kad pre udari na sklerozu? ... Welcome to the club :-)

[Dragan Babić]

Vertical align osobina za ostale elemente funkcionise malo drugacije od te iste osobine kada je primenjena na td element, tj. celiju tabele.
Ako ti je li element "kontejner", i u njemu hoces da pozicioniras taj link na dno, ja bih ti preporucio da za li das position:relative i onda da link pozicioniras apsolutno sa left:0; bottom:0;, naravno sa display:block; i dimenzijama samog li elementa.
Drugo resenje bez APa ti je da koristis padding, tj. da od gorjne ivice paddujes link da bi se on pribio uz donju ivicu, ali ovo ti nije dobar pristup ako moras da imas fiksnu visinu menija.

[Dragan Babić]

E, da, ovo oko vertical-align. Slobodno zaboravi na tu osobinu kroz CSS, ali for the sake of argument, evo ti objasnjenje kako funkcionise (jako debilno IMHO).
Predpostavimo da imamo paragraf i u paragrafu sledeci sadrzaj:

<p><img src="path/do/slike.png" width="100" height="100" alt="Slika koja je vislja od jedne linije teksta" /> Ovo je neki tekst pored slike.</p>

E sada, kada bi dodao vertical-align:middle; na paragraf -- ne bi se nista promenilo, ali kada bi ga dodao na sledeci nacin:

p *{ vertical-align:middle; }

Onda bi se tekst i slika centrirali na vertikalnu sredinu paragrafa, jer vertical align kada je primenjen na elemente osim td-ova, se odnosi na inline level sadrzaj, a ne na block level parenta.

Enivej, totalno ga izbaci kao opciju slobodno, strokav je property totalno.

[ivanhoe]

Tja, resio sam problem koristeci padding da gurnem link na dole, mada je to mnogo ruzno resenje, jer ako korisnik poveca font onda slova krenu da probijaju sa donje strane... ova druga varijanta sto ste pomenuli sa bottom:0, mi ne radi posao jer link je display:block visine 70px i text ostane na vrhu tog bloka (pozicionira se blok, ali ne i text u njemu)... varijanta koja savrseno radi je display:table-cell u kombinaciji sa vertical-align:bottom, ali narafski to IE ne kapira...

kako bilo, hvala svima, izgubih celu noc na tu glupost ... :1027:

[noviKorisnik]

aha, hoćeš da ti svi 70 pihela visine reaguje na miša... modifikuj html ondak - ubaciš span koji pozicioniraš na patos.

[xippi]

verovatno ce trebati jos nekom

http://klodovik.com/css-lab/menu/bottom.html

ne svidja mi se kako hover radi. pogledacu kasnije sta se sa njim desava

edit: desava se da gledam kroz remote desktop. sve u redu, skleroza ;)

[ivanhoe]

jebem li ga, umesto tabela ispada da treba da koristim listu sa ubacenim linkovima, a u svakom linku po span... ziveo progres... :/

[noviKorisnik]

Hahaha, baš ... no, ako već možeš da menjaš html... ne znam ko bi ti zamerio.

[Dragan Babić]

Ivanhoe, ceo problem ove price je to što imaš fiksno definisan height, a kao što znaš to je depreceated ponašanje. Da si lepo definisao visinu u em-ovima, dao gornji padding -- eto ti mnogo boljeg rešenja koje se daleko bolje skalira. ;)

[ivanhoe]

pa da teoretski... ali to bi bilo super kad bi mogao i pozadinu da resizujem (kao u CSS3), ovako sta da radim kad je background picture definisane velicine u pixelima, a nije pattern pa da moze da se tile-uje...

a sto se tice toga da je visina depreciated to me tek nervira... :D

[Dragan Babić]

a sto se tice toga da je visina depreciated to me tek nervira... :D
Šta ja znam, navikneš se, a kasnije bude bolje, jer sebe nateraš da razmišljaš na drugi način. Meni to nikada nije predstavljalo neki problem.

Trenutno ne mogu da se setim ni jednog primera kada mi je bg slika pravila baš takvo ograničenje, jel možeš ilustrovati (ili čak postaviti sliku da vidimo), možda ima rešenja ali ga ne vidiš. :)

[modeus]

nikada necu razumeti zasto shabani nisu implementirali vertical-align kao shto je na td...