| Autor | Zpráva | ||
|---|---|---|---|
| maks Profil |
#1 · Zasláno: 28. 2. 2009, 18:08:18 · Upravil/a: maks
Ahoj, chci vycentrovat třířádkový text ve vysokém bloku vertikálně, použil jsem display: table-cell a vertical-align: middle. Ve FF ok, v IE pořád nahoře.
menu li {
float: left;
width: 100px;
height: 50px;
background: brown;
}
menu li a {
width: 100px;
height: 50px;
background: yellow;
display: table-cell;
vertical-align: middle;
}
a html
<menu>
<li><a href="">krátký text</a>
<li><a href="">dloooooooooooouhý předloooooooooooouhý text na 3. řádky</a>
</menu>Děkuji za pomoc, Maks |
||
| Fnesveda Profil |
#2 · Zasláno: 28. 2. 2009, 18:19:26
maks
Cituju Jakpsátweb.cz Další hodnoty vlastnosti display Výše uvedené hodnoty fungují v Internet Exploreru (nejlépe v 5.5 a 6), v Mozille a Opeře 7. V moderních prohlížečích fungují také další hodnoty vlastnosti display, vhodné zejména pro stylování XML dokumentů. Jde o hodnoty compact, run-in, marker a hodnoty pro tabulkové vykreslení. Pro práci s HTML stránkami kvůli ignoraci Internet Exploreru nemají význam (psáno 2003). Tabulkové hodnoty fungují v Mozille a Opeře a jejich význam je celkem zřejmý. Jsou to hodnoty: table, table-row-group, table-header-group, table-footer-group, table-cell, table-column, table-column-group, table-caption. Hodnota display: inline-table má udělat tabulku ležící na řádku, ale Mozilla ji vykreslí jako display: table (uvádí Pixy). Používám to např. ve vertikálním centrování. Jakmile čemukoliv nastavíte float rozdílné od none, stává se to blokovým prvkem (jakoby display: block). Takže to asi nebude tvoje chyba, nicméně řešení mě nenapadá. |
||
| Bubák Profil |
#3 · Zasláno: 28. 2. 2009, 22:40:04
Pokud se nepletu, tak display: table-cell; má uvět až IE8.
Zatím to půžeš udělat takto: http://klient.plavacek.net/centrovani.html |
||
| maks Profil |
Bubák
„Zatím to půžeš udělat takto: http://klient.plavacek.net/centrovani.html“ to se mi bohužel nepodařilo. <!--[if IE]>
<style type="text/css">
div.image div { //toto jsem dal k menu li
width: 100%;
position:absolute;
top: 50%;
left: 0;
}
div p { // toto jsem dal k menu li a
position: relative;
top: -50%
}
</style>V divech mi to podle ukázky funguje, ale nedaří se mi to nacpat do toho seznamu. Kdyžtak to, prosím, někdo zkuste, jetli se vám podaří napasovat to na seznam. Děkuji, Maks |
||
| maks Profil |
#5 · Zasláno: 1. 3. 2009, 17:23:49
Tak jsem si s tím hrál dál, ale asi je nad moje síly toto zprovoznit seznamu ul li a..
Nenajde se skutečně nikdo, kdo by zkusil najít v mém zápise chybu? Stylopis jsem nechal tak, jak byl na bubákově odkazu, jen jsem zaměnil div.image div za menu li a div p za menu li a - ve stylech pro IE. Děkuji, Maks |
||
|
Časová prodleva: 15 let
|
|||
0