(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
|
25. 07. 2006. | #1 |
Ivan Dilber
Sir Write-a-Lot
|
CSS, vertical-align i skleroza
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: Kôd:
<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; }
__________________
Leadership is the art of getting people to want to do what you know must be done. Poslednja izmena od ivanhoe : 25. 07. 2006. u 07:52. |
25. 07. 2006. | #2 |
xippster
Master
Datum učlanjenja: 16.06.2005
Lokacija: Beograd
Poruke: 681
Hvala: 102
138 "Hvala" u 84 poruka
|
pada mi nesto ovako na pamet
Kôd:
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; } Poslednja izmena od xippi : 25. 07. 2006. u 09:11. |
25. 07. 2006. | #3 |
Dejan Katašić
Wrote a book
Datum učlanjenja: 10.06.2005
Lokacija: Novi Sad
Poruke: 1.017
Hvala: 129
86 "Hvala" u 43 poruka
|
Kad pre udari na sklerozu? ... Welcome to the club :-)
|
25. 07. 2006. | #4 |
Designer guy
Wrote a book
|
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. |
25. 07. 2006. | #5 |
Designer guy
Wrote a book
|
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: Kôd:
<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> Kôd:
p *{ vertical-align:middle; } Enivej, totalno ga izbaci kao opciju slobodno, strokav je property totalno. |
25. 07. 2006. | #6 |
Ivan Dilber
Sir Write-a-Lot
|
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 ...
__________________
Leadership is the art of getting people to want to do what you know must be done. |
|
|
Slične teme | ||||
Tema | Početna poruka teme | Forum | Odgovori | Poslednja poruka |
vertical marquee | dootzky | (X)HTML, JavaScript, DHTML, XML, CSS | 6 | 25. 03. 2009. 20:45 |
CSS LAYOUT: Align DIV center? | maksim | (X)HTML, JavaScript, DHTML, XML, CSS | 1 | 21. 04. 2007. 20:54 |