Autor Zpráva
Onecar
Profil
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
zkus celý ten <ul> obalit divem kde nastavíš text-align: center
Onecar
Profil
To už jsem zkoušel, bohužel nefunguje :-(.
Railbot
Profil
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
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
a co ten před <ul> dát <center>? taky nešlo? a za </ul> dát </center>
Davex
Profil
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
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 *
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
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 *
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
Děkuji ti. Nyní to fakt nemá chybu :-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: