 |
|
| ivanhoe |
25. 07. 2006. 06:45 |
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;
}
ovo vertical-align: bottom ne radi... borderi su stavljeni zbog debuga naravno.. |
| xippi |
25. 07. 2006. 07:50 |
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;
}
moras apsolutno da pozicioniras. ovaj kod verovatno moze i cistije :) |
| noviKorisnik |
25. 07. 2006. 08:28 |
Kad pre udari na sklerozu? ... Welcome to the club :-)
|
| Dragan Babić |
25. 07. 2006. 08:53 |
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ć |
25. 07. 2006. 08:59 |
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>
E sada, kada bi dodao vertical-align:middle; na paragraf -- ne bi se nista promenilo, ali kada bi ga dodao na sledeci nacin:
Kôd:
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 |
25. 07. 2006. 13:31 |
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 |
25. 07. 2006. 13:58 |
aha, hoćeš da ti svi 70 pihela visine reaguje na miša... modifikuj html ondak - ubaciš span koji pozicioniraš na patos.
|
| xippi |
25. 07. 2006. 15:56 |
|
| ivanhoe |
25. 07. 2006. 23:48 |
jebem li ga, umesto tabela ispada da treba da koristim listu sa ubacenim linkovima, a u svakom linku po span... ziveo progres... :/
|
| noviKorisnik |
26. 07. 2006. 00:56 |
Hahaha, baš ... no, ako već možeš da menjaš html... ne znam ko bi ti zamerio.
|
| Vreme je GMT +2. Trenutno vreme je 12:08. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.