Autor Zpráva
MichalK
Profil *
Dobrý večer, mám dotaz ohledně toho, jak zarovnat mou stránku na střed, svoje stránky dělám už dlouho, ale nikdy se mi to nepovedlo, ale moc bych toho chtěl dosáhnout. moje stránka je

http://meganfoxfans.org

mám nastaveno pevné odsazení, ale teď mám nové pc s větším rozlišením a zjistil jsem, že to vypadá hrozně. style css je na

http://meganfoxfans.org/wp-content/themes/fox/style.css

jsou tam všechny divy, přesně jak to používám, mohl by mi prosím někdo do podrobna vysvětlit co a jak přesně změnit abych mohl změnit zarovnání na střed? Předem děkuji (kdyžtak opravdu velmi laicky, nejsem žádný programátor, děkuji)
panther
Profil
MichalK:
http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php
pavuk
Profil
Nejjednodušší způsob - celej obsah <body> vlož do <div>u, kterýmu nastavíš požadovanou šířku a "margin: 0 auto", čímž zajistíš že nahoře i dole nebude žádná mezera a vlevo i vpravo si automaticky vytvoří stejně velký okraje - tím se vycentruje
MichalK
Profil *
pavuk:
Děkuji to by bylo ideální, můžete to prosím popsat přesněji? Do index.php jsem vložil:
<div class="meinl"><body>

<body></div>


a do style.css

.meinl{
        margin: 0px auto;}


ale nic se nestalo :(
pavuk
Profil
Obsah <body>, ne <body> samotný. A lepší bude použít ID
...
...
...
<body>
<div id="meinl">...
...
...
</div>
</body>
...

a ve stylu
#meinl{margin: 0 auto}
MichalK
Profil *
Ok, tak jsem to tak udělal, nic, zkusil jsem to z té stránky http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php, nic, ani se to nehne :(
pavuk
Profil
dej sem živej odkaz na tvý stránky, jinak je to jen vaření z vody
MichalK
Profil *
jo je hned v prvním příspěvku

http://meganfoxfans.org
http://meganfoxfans.org/wp-content/themes/fox/style.css

A index vzhledu nevím jak bych ukázal je na stránce:

http://meganfoxfans.org/wp-content/themes/fox/index.php
MichalK
Profil *
Tak jsem to vymyslel ten soubor vzhledu je

http://meganfoxfans.org/wp-content/themes/fox/index.zip ke stažení
pavuk
Profil
Ačkoliv máš ve stránce <div id="meinl">,ve tvým přilinkovaným stylu (<link href="/wp-content/themes/fox/style.css" rel="stylesheet" type="text/css">)
jsem nikde nenašel nadeklarovanej styl pro #meinl
MichalK
Profil *
jo už tam je ale stále nic :(
Trejpa
Profil
MichalK:
1. Abys mohl něco v něčem vystředit, tak to uvnitř musí být menší. Nastav #meinl jeho šířku.
2. Potom zjistíš, že #meinl je sice na středu, ale ostatní bloky nejsou. Je to tím, že používáš absolutní pozicování. Pozicované bloky jsou vytrženy ze stránky a na změny okolí nereagují. Buď můžeš layout předělat na floatovaný, nebo nastav pro #meinl position: relative (bez left a top) a vnitřním prvkům přepočítej pozici, protože se nyní jejich absolutní poloha nebude počítat od začátku stránky, ale od začátku #meinl.
3. Dalším laděním bys možná zjistil, že staré verze IE na takové vystředění nereagují (nemají totiž standardní režim). Pro ně stačí do body vložit text-align: center, který v nich vystředí #meinl a pro #meinl opět zarovnání vrátit text-align: left.
4. A také budeš muset změnit / posunout obrázek na pozadí. Jen ti doporučím, aby měl nějakou rozumnější výšku.
MichalK
Profil *
děkuji, funguje to! obrázek na pozadí mám tak nízký kvůli velikosti, web už tak obsahuje spoustu vekých obrázků, jinak jestli se můžu zeptat co to je ten floatovaný? nevím, zda bych se do toho pouštěl, ale za pokus by to možná stálo.
Trejpa
Profil
MichalK:
co to je ten floatovaný?
Floatovaný je plovoucí. Většina webdesignérů upřednostňuje tento způsob rozvržení stránky do sloupců pomocí CSS vlastnosti float. Oproti pozicování není třeba počítat a zadávat polohy bloků – mají-li dost místa, tak se naskládají vedle sebe.
<style>
body { text-align: center; }
#vse { text-align: left; margin: 0 auto; width: 960px; }
#levy { width: 720px; float: left; }
#pravy { width: 240px; float: left; }
#paticka { clear: left; }
</style>
<div id=vse>
  <div id=hlavicka>...</div>
  <div id=levy>...</div>
  <div id=pravy>...</div>
  <div id=paticka>...</div>
</div>

Podstatný je tam ten prvek s clear za posledním plaváčkem. Ukončuje plavání a tím podle nejdelšího sloupce natahuje obalový blok. Důležité zejména pro potřeby nastavení pozadí obalovému bloku.
MichalK
Profil *
Dobře, mnohokrát děkuji, asi to nechám tak, nebo se v příštím layoutu třeba pokusím udělat ten floatovaný, každopádně jsem velmi rád, že to funguje a za to jsem vám opravdu vděčný, už jsem to zkoušel několikrát, ale vždycky se mi nějak rozjel, nebo něco nefungovalo, teď je vše jak má být.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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