| Autor | Zpráva | ||
|---|---|---|---|
| MichalK Profil * |
#1 · Zasláno: 15. 1. 2010, 22:48:23
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 |
#2 · Zasláno: 15. 1. 2010, 22:58:51
|
||
| pavuk Profil |
#3 · Zasláno: 15. 1. 2010, 23:01:02 · Upravil/a: pavuk
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 |
#5 · Zasláno: 15. 1. 2010, 23:30:16 · Upravil/a: pavuk
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 * |
#6 · Zasláno: 15. 1. 2010, 23:36:48
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 |
#7 · Zasláno: 15. 1. 2010, 23:38:42
dej sem živej odkaz na tvý stránky, jinak je to jen vaření z vody
|
||
| MichalK Profil * |
#8 · Zasláno: 15. 1. 2010, 23:41:50
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 * |
#9 · Zasláno: 15. 1. 2010, 23:43:41
Tak jsem to vymyslel ten soubor vzhledu je
http://meganfoxfans.org/wp-content/themes/fox/index.zip ke stažení |
||
| pavuk Profil |
#10 · Zasláno: 16. 1. 2010, 00:00:26 · Upravil/a: pavuk
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 * |
#11 · Zasláno: 16. 1. 2010, 00:23:16
jo už tam je ale stále nic :(
|
||
| Trejpa Profil |
#12 · Zasláno: 16. 1. 2010, 00:49:08
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 * |
#13 · Zasláno: 16. 1. 2010, 01:04:12
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 |
#14 · Zasláno: 16. 1. 2010, 02:00:03
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 * |
#15 · Zasláno: 16. 1. 2010, 11:01:34
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.
|
||
|
Časová prodleva: 16 let
|
|||
0