Autor | Zpráva | ||
---|---|---|---|
bob99 Profil |
#1 · Zasláno: 1. 2. 2012, 14:27:47
Zdravím,
mám tento kód a potřeboval bych zarovnat text na střed vertikálně se zachováním výšky klikatelného odkazu s výškou divu. <style type="text/css"> a:hover { background: #ccc; } </style> <div style="border: 1px solid green; display: table; height: 200px; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div style="border: 1px solid red; #position: relative; #top: -50%; "> <a style="HEIGHT: 100px; DISPLAY: block;" href=""> everything is vertically centered </a> </div> </div> </div> Díky za pomoc |
||
undefined Profil * |
#2 · Zasláno: 1. 2. 2012, 14:55:16 · Upravil/a: undefined
bob99:
Vertikální zarovnání se dá použít jen v několika málo případech. Pokud je výška parent prvku dynamická, je třeba to řešit jinak, například pomocí javascriptu. Pokud je výška statická, tak horní okraj bude (VýškaParent - VýškaPrvek) / 2. Ještě by šlo teoreticky využít návodu Juhůa, snad to bude to, co přesně potřebujete. |
||
bob99 Profil |
#3 · Zasláno: 2. 2. 2012, 08:34:54
Z toho návodu od Juhůa jsem čerpal a ten zdroják jsem si zkoušel upravit, ale bez úspěchu.
Takže zbývá jen javasript? Měl by někdo řešení v javascriptu? Ten bohužel neovládám :-( |
||
hugo123 Profil * |
#4 · Zasláno: 2. 2. 2012, 12:21:17
Mam presne rovnaky problem, asi bude treba JS a ten ani ja neviem ;-(((
Ak by sa tu nasla nejaky velmi dobra dusa, boli sme obaja velmi vdacni. |
||
Keeehi Profil |
#5 · Zasláno: 2. 2. 2012, 14:17:19
Tak tady máte ten návod ještě jednou a v češtině. Nic složitého to není a nemusíte se spoléhat na podporu javasciptu. Vertikální centrování v CSS
|
||
Chamurappi Profil |
#6 · Zasláno: 2. 2. 2012, 14:53:38
Reaguji na Keeehiho:
Nefunguje v Exploreru sedmičce. Reaguji na boba99: „Takže zbývá jen javasript? Měl by někdo řešení v javascriptu?“ Proč JavaScript? Když už by to nešlo vyřešit čistě, použil bych stokrát raději tabulku než JavaScript… |
||
Plaváček Profil |
#7 · Zasláno: 2. 2. 2012, 16:10:53
bob99:
Použij klidně tabulku, třeba takto http://klient.plavacek.net/tabulka-obrazek.html |
||
bob99 Profil |
#8 · Zasláno: 3. 2. 2012, 08:24:08
|
||
bob99 Profil |
#9 · Zasláno: 3. 2. 2012, 13:01:34
Tak jsem opět zde. Ten kód od Plavačka funguje skvěle ne Firefoxu, ale v IE 8 ne. U mě se to chová stejně jako v na uvedené stránce v režimu "kompatibilní zařízení...
|
||
Plaváček Profil |
bob99:
Mně to v IE 8 funguje. IE musíš mít ve standardním režimu (to znamená použít správné DOCTYPE). |
||
bob99 Profil |
#11 · Zasláno: 3. 2. 2012, 15:03:27
Zkoušel jsem tyto 4 se stejným výsledkem:
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
||
Plaváček Profil |
#12 · Zasláno: 3. 2. 2012, 15:26:48
bob99:
Mnou uvedený odkaz ti v IE 8 korekntě nefunguje? |
||
Časová prodleva: 3 dny
|
|||
bob99 Profil |
#13 · Zasláno: 6. 2. 2012, 07:47:27 · Upravil/a: Moderátor (editace znemožněna) 6. 2. 2012, 09:01:19
To jo, ale zobrazí se nabídka "zobrazit v kompatibilním režimu" a pokud je režim zaplý tak se to chová jako u mě na serveru tak nevím kde by mohla být chyba...
http://www.tipypropc.cz/internet-explorer-8-a-kompatibilita/ Moderátor Chamurappi: Vkládej klikatelné odkazy.
|
||
Plaváček Profil |
#14 · Zasláno: 6. 2. 2012, 07:51:52
bob99:
Tak si kompatibilní tlačítko vypni: <meta http-equiv="X-UA-Compatible" content="IE=edge"> Pozor, toto musí být umístěno v kódu jako úplně první meta tag, jinak nebude fungovat. |
||
bob99 Profil |
#15 · Zasláno: 6. 2. 2012, 09:27:48
Díky už to funguje OK i ve firefoxu s IE pluginem :-)
|
||
Časová prodleva: 12 let
|
0