Autor Zpráva
usher11
Profil
Dobrý večer,
mám na Vás takový dotaz jak vycentrovat tuto stránku tak aby se zobrazovala na středu monitoru. Vím že je to pro mnohé banalita ale mě to prostě nějak nejde. Děkuji.

Odkaz na stránku: Příklad pozicování je to pouze zkušební stránka od jak psát web
Trejpa
Profil
usher11:
jak vycentrovat tuto stránku
Nepoužívat pozicování.

Jednoduché schéma stránky

(Absolutní pozicovaný obsah lze ukotvit k relativnímu obalujícímu bloku a ten spolu s ukotveným obsahem vystředit klasickou metodou pomocí margin: auto a zadané šířky.)
mencik
Profil
Trejpa Jen ještě asi hloupý zvědavý dotaz:
V tom příkladu "Jednoduché schéma schránky" v <body> nevidím v <menu> vůbec <ul>, ani uzavření </li>.
To je schválně - jinak by to tak pěkně nefungovalo??
Trejpa
Profil
mencik:
Značka <menu> od prvních verzí HTML fuguje stejně, jako další seznamy: <ul>, <dir>, případně <ol>. Prostě obal pro značky <li>. V připravované verzi HTML 5 někoho napadlo dát značce úplně jiný význam, nicméně ten starý funguje stále (i v připravované specifikaci).

V jazyce HTML jsou elementy, u kterých se nemusí psát koncová značka, protože jejich konec lze odvodit z okolního kontextu. Mezi ně patří i element LI. V seznamu totiž mohou být jen elementy LI, ty jsou uzavřeny buď svou koncovou značkou (</li>), začátkem další položky (<li>) nebo ukončením daného seznamu (například </ul>). Takových značek je více, některé mají i nepovinnou počáteční značku. Více ve článku Jak funguje HTML.
usher11
Profil
Dobrý den,
chtěl bych poprosit o radu udělal jsem se tréningovou "stránku" a pořád se mi nedaří aby se zobrazovala ve středu obrazovky.

Kód:

<html>
<head>
<title> New page </title>

<meta http-equiv="content-Type" content="text/html"; charset="utf-8">                                      

<link href="style2.css" rel="stylesheet">                                                                                         

</head>


<body> 

<div id="obalovaci" style>
    <div id="hlavicka">Hlavička</div>
    <div id="leve-menu">Levé menu</div>
    <div id="prave-menu">Pravé menu</div>
    <div id="centr">Centr</div>
    <div id="paticka">Patička</div>
</div>


</body>

CSS

<style>

#obalovaci {margin:0 auto; text-align: left; width:1090px;}

#hlavicka {position:absolute; width:1090px; height: 150px; top: 0px; left: 10px}
#hlavicka {background-color: yellow;}
#hlavicka {background-position: 50% 50%}


#leve-menu {position:absolute; width: 150px; height: 800px; top: 160px; left: 10px;}
#leve-menu {background-color: yellow;}


#centr {position:absolute; width: 770px; height: 800px; top: 160px; left: 170px;}
#centr {background-color:#00FF26;}





#prave-menu {position:absolute; width: 150px; height: 800px; top: 160px; left: 950px;}
#prave-menu {background-color: yellow;}

#paticka {position:absolute; width: 1090px; height: 200px; top: 970px; left: 10px;}
#paticka {background-color:yellow}




</style> 
Trejpa
Profil
usher11:
chtěl bych poprosit o radu
Ty’s mé rady nečetl? Tak to zopakuji: Absolutní pozicovaný obsah lze ukotvit k relativnímu obalujícímu bloku a ten spolu s ukotveným obsahem vystředit klasickou metodou pomocí margin: auto a zadané šířky.
#obalovaci { position: relative; }

Ta důležitější rada byla nepozicovat. Tipuji, že do týdne sem přijdeš pro radu znova, až ty prázdné bloky naplníš obsahem, který z nich bude přetékat a překrývat další bloky pod sebou. A budeš se ptát, jak to udělat, aby se bloky roztahovaly podle obsahu a ty další za nimi aby se o to zvětšení posouvaly. A rada bud stejná, nepozicovat. Možná se někdo smiluje a řešení ti ukáže nebo tě pošle na hotový příklad.

Je to pořád stejné. Problémem začátečníků je, že pozicují vše, pozicují každou maličkost zvlášť a nedomýšlí vytržení z obsahu, výšky elementů a různé velikosti okna. Takže doporučuji ze začátku vůbec nepozicovat. Nauč se nechávat plynout prvky přirozeně za sebou; bloky vedle sebe řešit plaváním a mezery mezi nimi vyřešit marginem.
usher11
Profil
Trejpa:
Moc děkuji, občas mám dlouhé vedení ;)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0