Position: absolute - Centrování obsahu stránky
Velmi rozšířený problém. Vycentrování stránky na horizontální střed pomocí position: absolute. Vše je řešeno pomocí dvou fíglů:
- 50% odsunutí stránky zleva
- záporný margin z levé strany o hodnotě poloviny šířky divu
Takže zápis css bude:
#centrovany_div {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
background: #777;
color: #fff;
}
A v html:
<div id="centrovany_div">
<p>Lorem ipsum dolor sit amet consectetuer Donec Nulla massa faucibus pharetra. Scelerisque justo justo purus gravida orci Nam velit faucibus elit nisl. Congue laoreet In consequat nunc Aliquam orci Nam Curabitur ut urna. Nisl orci Sed enim lacus cursus mi libero Sed turpis ac. Aenean nulla tincidunt convallis vitae a Pellentesque Vivamus ipsum orci semper. Condimentum senectus.</p>
</div
A k čemu je to dobré? Největší výhodou asi je, že uvnitř tohoto divu můžete opět pomocí position: absolute pozicovat objekt od okrajů ůvodního divu a ne od okrajů stránky.
That´s all folks!
nemáš tam správně napsané to jak uzavíráš ten div..
Nápad dobrý, dokonce je to i gramaticky správně napsané
, ale v CSS deklaruješ identifikátor
centrovany_div a pak otevíráš třídu
vprostred, která tím pádem neexistuje
jo a pak zapomenutý zavřený
div, ale za nápad a zpracování si pětku zasloužíš
.
Komentáře mohou posílat jen přihlášení.
touto problematikou sem se uz zaobiral..
tady nastane problem jakmile nad
<div id="vprostred">
<p>Lorem ipsum...</p>
</div>
nasadis:
<div id="neco">
</div>
<div id="vprostred">
<p>Lorem ipsum...</p>
</div>
nebo:
<div id="neco">
<div id="vprostred">
<p>Lorem ipsum...</p>
</div>
</div>
css:
#neco{
position: absolute; //nezalezi jestli relative bo absolute...
left: 50%;
width: 1000px;
margin-left: -500px;
background: #777;
color: #fff;
}
pak se ten tvuj div id="vprostred" posune kamsi do aleluja a este sem nevyresil proc
heh... pokud to nekdo muzete smaznout (ty moje dva predesli) tak dik... trosku sem se sek v marginu
Nevím, co je na tomto tut špatného
IMHO perfektně zpracovaný a užitečný
.
spatny je na nem to ze je position:absolute, kdyz takovejch divu budes mit vic tak se ti rozsype layout. navic se to samy da vyresit pomoci div align="center" a nemusej se tam dopocitavat nejaky zaporny hodnoty do marginu. Za dalsi je spatny uz jen to margin-left, protoze opticky to vypada posunuty o 400 px jinam, ale v nekterejch prohlizecich ten div bude sirokej 800px + 400px to posunuti = 1200px.
Co to má jako bejt ?!? to je dost vodfláklý, mohl bys aspon zacatecniku problizit co to umisťování absulute je ? rozdíl mezi relative apod. tohle fakt vodfláklý jinde by tě s tim hnaly, kvalitní článek mám mít minimálně 7000 znaků s mezerami
Jj, taky centruju přes align="center", resp. přes CSS hodnoty
text-align: center;
margin-left: auto;
margin-right: auto;
. Tak to u mně funguje, nevím.. podle mně jde hlavně o kód, a tenhle tut celkem jde
je ale pravdam že věřím autorovu slovu, netestoval jsem
.
Hlavním účelem tohoto zpúsobu centrování je to, že když potřebuješ umístít nějaký prvek např.: 10px od levého okraje layoutu, tak k tomu stačí zápis position: absolute; left: 10px, zatímco když to zapíšeš v normalním text-align: center; margin: 0px auto, tak se to posune 10px od levého okraje stránky
Jo za to špatné pojmenování divu pardon, jestli to bude někdo chtít použít, tak v css se ten div musí jmeovat stejně, jako v html, což jsem v tomto utu přehlídl. Ještě jednou promiňte.
To je sice možný, ale já de-facto margin nepoužívám
takže je mi to jedno
.
#11: kdyz potrebujes umistit prvek 10px od okraje layoutu, tak vnejsimu prvku nastavis padding-left:10px, cimz se bude takhle zarovnavat uz vsechno, co bude uvnitr. Nerikam ze je tenhle postup spatnej, ale ja jsem spis nepochopil proc tam vsude cpes ten position:absolute? proc ne relative? a proc tam vubec davat nejakej position?
Mě přijde lepší text-align="center"; pro body a margin:auto; prvku, ale to je věc názoru.
No tak koukám, že to vůbec nikdo nepochopil
Muzete si okopcit ozkousenou verzi na www.oslamecka.wz.cz/webreport/ Tuto techniku pouziva i Jeffrey Zeldman (dost znamy clovek - jeho dilem je treba stnadartizace html atd. atd.) Ondrej'S - xHTML, CSS, PHP, and DOM programming/coding
[16] vubec nikdo nepochopil? jak vubec tohle muzes vypustit z pusy... mozna jsou jen proste jednodussi reseni jak udelat to samy to te nenapadlo?
Úžasná kravina. Komplikované, nesmyslné a zbytečné. Stačí margin: 0 auto, jediný řádek a je vymalováno. Zbytek je už na úsilí tvůrce, pokud není neschopný, tak si objekty uvnitř taky bez problémů napozicuje, jak chce.
