Autor Zpráva
zuza
Profil
Dobrý den,
prosím o radu ohledně vycentrování celé stránky. Já vím, že už jsem asi 100 jubilejní člověk, který to nechápe, ale přes veškerou snahu a čtení těchto stránek ty svoje nemůžu dostat doprostřed prohlížeče, takže na velké obrazovce je to celé namáčklé vlevo, jak v IE, tak v Opeře, tak ve Foxu. Nevím, jestli to není mícháním absolutních a relativních pozic.

Tady je kód:
body {
text-align: center; 
}
#all {
text-align: left; 
margin: 0 auto; 
}
#header {
top:0px;
position:relative;
width:955px;
height:149px;
background-image:url(../Bilder/header.jpg);
}
#banner {
position:relative;
top:10px;
width:950px;
height:15px;
border:groove; border-color:#669900;
text-align:left;
}
#navigace {
position:relative;
top:20px;
width:955px;
height:193px;
padding-top:5px;
}
#info {
position:relative;
top:20px;
width:250px;
height:416px;
}
#liste {
position:absolute;
width:700px;
height:23px;
margin:2px;
background-image:url(../Bilder/feilnavi.jpg);
background-repeat:no-repeat;
left: 251px;
top: 396px;
}
#container {
position:absolute;
left:263px;
top:432px;
width:583px;
height:397px;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:left;
color: #000000;
font-weight: bold;
padding-left: 50px;
padding-right: 50px;
background-image:url(../Bilder/container.jpg);
}
Str4wberry
Profil
Zuzo, zkus přidat position: relative pro #all.
zuza
Profil
Str4wberry.. přidáno a nic...
Str4wberry
Profil
A přidej width (taktéž pro #all).
vertigo4
Profil
zuza
já nevim, to position: relative; tam máš hodně zbytečně... odstraň ho + to dorovnej marginem či paddingem a pak ti to půjde bez problémů...
zuza
Profil
vertigo4takže ještě blbá otázka: ty pozice tedy nemusí být zadané?
zuza
Profil
Str4wberry j
pro upřesnění - po tom přidání #all se to vycentrovalo v IE, Fox nereaguje.
zuza
Profil
Str4wberry
v IE je vycentrovaný header a banner, s tím zbytkem budu muset něco udělat, ale Fox nereaguje. Nevíš proč?
kletely
Profil
zuza
Možno že to to zaberie ale pochybujem.
#all {
text-align: left; 
margin: 0px auto; 
width: xxxpx;
}

Možno by si mohol povedať aj usporiadanie v HTML.
zuza
Profil
vertigo4
Na blbou otázku si odpovím sama: nemusí. Margin a padding - to nebude problém. Jenom pořád nevím, proč Mozilla zatvrzele odmítá vycentrování...
zuza
Profil
kletely nezabralo, ale dík.
Lexter
Profil
body
{
text-align: center;
}

#all
{
margin: 0 auto;
width: 700px;                          // Kde 700 Nahradíš šířkou tak jak ji tam máš.
text-align: left;
}

Není možná, aby nefungovalo.
Str4wberry
Profil
Reakce na zuzu:
Ukaž živou ukázku. Povede to k rychlejšímu vyřešení.


Reakce na Lextra:
Není možná, aby nefungovalo.
Je. Protože absolutně pozicované části z toho <div>u „vyletí“.
zuza
Profil
Str4wberry
ještě s tím něco udělám a zítra dám vědět, jak to dopadlo včetně ukázky. Zatím díky moc za pomoc :-))
Trejpa
Profil
zuza
Neznám sice pořadí a zanoření bloků v HTML kódu, ale po troše domýšlení jsem to splácal. Ve tvém kódu není třeba žádné pozicování, stačí jeden float. Přetékání dlouhých textu v FF nebude při nastavené výšce elementů pěkné, doporučuji vhodný overflow.

Centrování bloků se provádí zápisem typu (šířka je důležitá):
<body style="text-align: center;">
<div style="text-align: left; margin: 0 auto; width: 955px;"></div>


Pozicování v rámci jednoho elementu se provádí tak, že se obalovému elementu nastaví position: relative;, všem vnitním position: absolute; a jejich pozice se počítá od levého horního okraje toho nadřazeného bloku:
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 2em;">hlavička</div>
<div style="position: absolute; top: 2em; left: 0; width: 20%; height: 30em;">navigace</div>
<div style="position: absolute; top: 2em; left: 20%; width: 80%; height: 30em;">obsah</div>
</div>


Uvedené metody můžeš zkombinovat.

takže ještě blbá otázka: ty pozice tedy nemusí být zadané?
Ne. Přiřadíš-li elementu position relative nebo absolute a nezadáš-li hodnotu left/right a (nebo) top/bottom, je tato chápána jako nulová.



kletely
Možno že to to zaberie ale pochybujem. [...] margin: 0px auto;
Hloupost. Nulové hodnoty v CSS lze zapisovat bez jednotky.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0