| Autor | Zpráva | ||
|---|---|---|---|
| Onecar Profil |
#1 · Zasláno: 24. 12. 2010, 11:38:50 · Upravil/a: Onecar
Zdravím,
na internetu jsem našel kód na pěkné měnící se pozadí odkazů pomocí CSS, nejspíše se jedná o tuto metodu: http://wellstyled.com/css-nopreload-rollovers.html Můj kód je následující: CSS .strankovani {overflow: hidden;}
.strankovani li {float: left; padding: 0px 5px}
.strankovani li a {float: left; width: 40px; height: 40px; overflow: hidden;}
.strankovani li a:hover {background-position:0 -40px !important;}
.strankovani li a.paging1 {background:url(../images/paging-1.png) no-repeat 0 0;}
.strankovani li a.paging2 {background:url(../images/paging-2.png) no-repeat 0 0;}
.strankovani li a.paging3 {background:url(../images/paging-3.png) no-repeat 0 0;}
.strankovani li a.paging4 {background:url(../images/paging-4.png) no-repeat 0 0;}
.strankovani li a.paging5 {background:url(../images/paging-5.png) no-repeat 0 0;}HTML <ul class="strankovani"> <li><a class="paging1" href="./fotografie_1"></a></li> <li><a class="paging2" href="./fotografie_12"></a></li> <li><a class="paging3" href="./fotografie_23"></a></li> </ul> Problémem je, že se mi zaboha nedaří výsledné obrázky zarovnat na střed. Všechno je zarovnané nalevo (ne, změna atributu float nepomáhá a na text-align to nereaguje). Hraju si s tím už hodinu, vyzkoušel jsem snad vše, ale nic nefunguje. Najde se odborník, kdo by mi poradil? Předem velký dík a šťastné a veselé. |
||
| PecanCZ Profil |
#2 · Zasláno: 24. 12. 2010, 11:46:13
zkus celý ten <ul> obalit divem kde nastavíš text-align: center
|
||
| Onecar Profil |
#3 · Zasláno: 24. 12. 2010, 12:09:13
To už jsem zkoušel, bohužel nefunguje :-(.
|
||
| Railbot Profil |
#4 · Zasláno: 24. 12. 2010, 14:35:35 · Upravil/a: Railbot
Pokud obrázky máš na mysli to pozadí, které mají odkazy, pak musí kód vypadat takto, příklad:
.strankovani li a:hover {background-position:50% -40px !important;}
.strankovani li a.paging1 {background:url(../images/paging-5.png) no-repeat 50% 0;}
To je horizontální zarovnání na střed. Více o background-position. |
||
| Onecar Profil |
#5 · Zasláno: 24. 12. 2010, 21:17:05
Nene to si nerozumíme, s tímhle problém nemám. Problém je, že všechny položky seznamu (dá-li se to tak říci), v tomto případě odkazy, se zarovnávají vlevo. Jsem si vědom toho, že je to způsobeno hodnotou float: left;, není však z mé hlavy a snaha o zacentrování zatím naprosto selhala.
Překvapuje mě, že prohlížeče se úpěnlivě brání vystředění, stále jsem na řešení v tomto konkrétním případě nepřišel :-(. |
||
| PecanCZ Profil |
#6 · Zasláno: 24. 12. 2010, 21:21:02
a co ten před <ul> dát <center>? taky nešlo? a za </ul> dát </center>
|
||
| Davex Profil |
#7 · Zasláno: 24. 12. 2010, 21:46:36 · Upravil/a: Davex
Onecar:
Nevím, zda úplně chápu, co všechno se má zarovnat na střed a jak to souvisí s těmi obrázky. Celý ten blok odkazů má být zarovnán na střed stránky? Něco jako Menu li horizontálne centrované s premenlivou šírkou? |
||
| Onecar Profil |
#8 · Zasláno: 24. 12. 2010, 23:47:25 · Upravil/a: Onecar
Posílám ilustrační obrázek:
http://img148.imageshack.us/img148/8819/tokrgalerie.jpg Obrázky 1, 2, 3 odpovídají kódem tomuto: <ul class="strankovani"> <li><a class="paging1" href="./fotografie_1"></a></li> <li><a class="paging2" href="./fotografie_12"></a></li> <li><a class="paging3" href="./fotografie_23"></a></li> </ul> Jak vidno, jsou vlevo. Nejsou přesně zacentrovány pod těmi dvěmi obrázky traktoru a kytky výše. Toho se snažím docílit. Pecanův nápad s <center> je taktéž nefunkční. |
||
| margin Profil * |
#9 · Zasláno: 25. 12. 2010, 09:11:34
Spočítej si, jak je široké UL a vycentruj ho (jako stránku). Pamatuj, že UL má levé 40px odsazení, v některých prohlížečích marginem, v jiných paddingem, pokud nepoužíváš CSS reset, musíš odsazení vynulovat.
|
||
| Onecar Profil |
#10 · Zasláno: 25. 12. 2010, 11:27:58
VYŘEŠENO
Děkuji za nakopnutí správným směrem uživateli Davex. V ním zmiňovaném vlákně jsem čerpal z odkazu níže: http://pokusy.1-webdesign.cz/centrovany-float.html Výsledný HTML kód je identický. <ul class="strankovani"> <li><a class="paging1" href="./fotografie_1"></a></li> <li><a class="paging2" href="./fotografie_12"></a></li> <li><a class="paging3" href="./fotografie_23"></a></li> </ul> Změna nastala v CSS: .strankovani {overflow: hidden; margin: 0 auto; display: table;}
.strankovani li {float: left; padding: 0px 5px}
.strankovani li a {float: left; width: 40px; height: 40px; overflow: hidden;}
.strankovani li a:hover {background-position:0 -40px !important;}
.strankovani li a.paging1 {background:url(../images/paging-1.png) no-repeat 0 0;}
.strankovani li a.paging2 {background:url(../images/paging-2.png) no-repeat 0 0;}
.strankovani li a.paging3 {background:url(../images/paging-3.png) no-repeat 0 0;}
.strankovani li a.paging4 {background:url(../images/paging-4.png) no-repeat 0 0;}
.strankovani li a.paging5 {background:url(../images/paging-5.png) no-repeat 0 0;}Vzhledem k tomu, že seznam iniciovaný tagy <ul></ul> je vložen na stránce, která má všechny prvky centrované, zmíněná změna výše způsobila, že prohlížeče konečně začaly poslouchat řídící <div align="center"></div>, do kterého je celá stránka uzavřena. Bez úpravy to nefungovalo, toto řešení je funkční v IE, FF, Opeře a Google Chrome (vše nejnovější verze). Díky všem, kteří přispěli nápady, snad toto vlákno někomu pomůže i do budoucna. |
||
| margin Profil * |
#11 · Zasláno: 25. 12. 2010, 13:26:59
Onecar:
„zhledem k tomu, že seznam iniciovaný tagy <ul></ul> je vložen na stránce, která má všechny prvky centrované, zmíněná změna výše způsobila, že prohlížeče konečně začaly poslouchat řídící <div align="center"></div>, do kterého je celá stránka uzavřena.“ Ne, díky !margin: 0 auto" se seznam vycentruje i bez "řídícího divu". „toto řešení je funkční v IE, FF, Opeře a Google Chrome (vše nejnovější verze)“ A nefunkční v IE6 a IE7, a pokud nikde nevynuluješ levý padding seznamu, máš strankovani posunuté oproti středu posunuté 0 40px doprava. Kód pro všechny běžné prohlížeče včetně IE6: .strankovani {overflow: hidden; width: 150px; padding: 0; margin: 0 auto;} |
||
| Onecar Profil |
#12 · Zasláno: 26. 12. 2010, 15:43:59
Děkuji ti. Nyní to fakt nemá chybu :-)
|
||
|
Časová prodleva: 13 let
|
|||
0