Autor Zpráva
Michal Kolesa
Profil
Potřebuji zarovnat element telowebu na střed okna prohlížeče

Kod v HTML souboru

<div id="telowebu">
<div id="menu">
  Položka 1<br />
<br />
  Položka 2<br />
  Položka 3<br />
  Položka 4< br />
  <br />
  Položka 5
 
  
</div>

<div id="text">
Lorem ipsum dolor sit amet consectetuer Cras id mollis nibh est. Adipiscing Morbi Fusce adipiscing nibh volutpat ultrices eget quam eget aliquet. Aliquam felis augue urna ipsum lacus enim orci Vestibulum quis Ut. At sed Nullam tincidunt et accumsan magna Lorem pellentesque a orci. Enim Aenean Curabitur sapien et tempus egestas nec magna eros nec. Metus Curabitur Nam nec id nibh Ut pellentesque metus dapibus Vivamus. 
Magna accumsan ullamcorper dis nibh Ut eu tempor Ut porttitor penatibus. Vestibulum nibh lacinia leo neque libero tincidunt Nam augue laoreet egestas. Cursus urna eu tristique montes purus sem Suspendisse tincidunt Mauris mauris. Tellus id vel nonummy metus nibh ipsum Nulla et volutpat eleifend. Lacinia ipsum In laoreet pede convallis est sit justo turpis pulvinar. Molestie Maecenas ante tincidunt nibh mauris id consectetuer Nullam in.
Ante lorem tincidunt dapibus dui enim malesuada cursus at consequat vitae. Rhoncus semper dictum vel consectetuer id a felis rhoncus mattis odio. Lacus wisi nibh ut Integer vestibulum Sed tincidunt hac nec Praesent. Urna consectetuer quis dolor vitae montes Duis mauris Morbi id semper. Dignissim pellentesque et In consectetuer ac feugiat Nam Vestibulum netus.
Pellentesque malesuada et et ante ut turpis Duis wisi platea metus. Cursus id enim ut Aenean dui sollicitudin In malesuada Pellentesque Nam. Turpis est laoreet augue quis Duis sapien leo odio neque in. Leo eu tellus Vivamus interdum adipiscing Donec sit adipiscing Vestibulum libero. Congue et Phasellus Ut Vestibulum orci sodales felis mattis vitae consequat. Hac interdum at tincidunt odio pellentesque ipsum eu senectus consectetuer id. Id.


</div></div>


Kód v CSS souboru

#telowebu
{
width:960px;
margin: 0 auto;
padding: 20px;
}
#menu
{
width:20%;
float:left;
}
#text
{
width:80%;
float:right;
}


Vytáhl jsem jen to důležité
swetko
Profil
No, pravdepodobne ide o zarovnanie v IE, tam treba použiť zarovnanie textu do stredu v nadradenom prvku

body, html
{
text-align:center;
}
Michal Kolesa
Profil
To nemyslím
toto margin: 0 auto;
má zarovnat CELÝ element div s id telowebu na střed, ale mě to nějak nefunguje
swetko
Profil
A nefunguje to v každom prehliadači?
Respektíve v ktorom prehliadači to testuješ?
Michal Kolesa
Profil
IE 8

Na mé home page (http://michal.kolesa.zde.cz) to jde

To bude nějaká blbost, ale nemůžu to najít
swetko
Profil
Pozeral som sa na tvoju stránku cez IE7 a nie je zarovnaná na stred, asi je len taká široká že si si to nevšimol.
pridaj si na začiatok tvojho css súboru:
body, html
{
text-align:center;
} 
Michal Kolesa
Profil
Já nechci zarovnat text, ale zarovnat element!

Omlouvám se, že jsem to nenapsal do původní ho příspěvku. Po odeslání tohoto to tam dopíšu, pokud to půjde.
swetko
Profil
A vyskúšal si to prosím ťa?
Trošku zacitujem z jpw.cz:
...V Exploreru se na vycentrování bloku stránky může použít text-align. Pro standardní prohlížeče se používá centrování pomocí margin: auto...

//edit: neviem či je to tak aj v IE8, ale predpokladám že áno
Michal Kolesa
Profil
Řešim nefunkčnost margin: 0 auto;
Zechy
Profil
Vycentruješ body, a pak prvnímu divu nastavíš align na left jak to je klasicky.
Michal Kolesa
Profil
Já nemluvím o textu, ale o elelementu. Chci to jako to mám na svém webu (http://michal.kolesa.zde.cz)
swetko
Profil
Michal Kolesa
Řešim nefunkčnost margin: 0 auto;

margin:0 auto; není funkční v prohlížečích z rodiny IE, tam musíš použít řešení na zarovnávání textu nadřazeného bloku, je to takový css hack pro IE.

A vyskúšal si to prosím ťa?
Bubák
Profil
Michal Kolesa
Vytáhl jsem jen to důležité
Ne. Co máš na prvém řádku HTML souboru?

swetko
margin:0 auto; není funkční v prohlížečích z rodiny IE
To není pravda už hezky dlouho, pokud je prohlížeč IE6 a vyšší ve standardním režimu, blok se vycentruje, viz příklad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>center box</title>
<style type="text/css">
.box	{margin: 0 auto; width: 900px; background: #ff0; }
</style>
<div class="box">BOX</div>
Michal Kolesa
Profil
Stránka začíná hlavičkou
pak je elekemnt body a hled pod ním je element div



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">;
<title>Titulek webu</title>
<link rel="stylesheet" href="styl.css" type="text/css">

</head>
<body>
<div id="telowebu">
aha
Profil
Ahoj,
takhle když to uděláš, tak to funguje ve všem. Pozn. máš tam externě připojený styly, tak jestli ti to nereaguje, vyzkoušej, zda je správně zadaná cesta - např. "obarvi" v ext. css nějaký prvek, nebo mu dej border.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
<meta name="generator" content="PSPad editor, www.pspad.com">; 
<title>Titulek webu</title> 
<link rel="stylesheet" href="styl.css" type="text/css"> 
<style type="text/css">
body{
	text-align:center;
	}
#telowebu{
	background-color:cyan;
	border:1px solid green;
	width:960px;
	margin:0 auto;
	text-align:left;
	}
#uvnitrtela{
	border:1px solid red;
	background-color:#cfc;
	margin:2em 0 0 1em;
	width:600px;
	}
</style>
</head> 
<body> 

<div id=telowebu>
	<div id=uvnitrtela>
<p>Lorem ipsum dolor sit amet consectetuer ipsum ut vitae eget ac. Tellus cursus convallis id Aenean semper eu elit felis et enim. Tellus adipiscing wisi nibh aliquam habitasse amet vitae Vestibulum Nunc Curabitur. Cursus enim ligula netus Donec urna Curabitur tempor hac elit quis. Natoque cursus cursus Vestibulum Pellentesque semper convallis Nam ultrices Suspendisse diam. Nibh a et laoreet.</p>
<p>Vestibulum wisi id facilisis Phasellus dictumst accumsan nulla egestas Vestibulum sed. Enim at wisi ac vel et Quisque eget condimentum Sed ut. Natoque nec Curabitur tincidunt tellus quis quis Aenean odio accumsan adipiscing. Nunc vel vitae non pede nulla ullamcorper ac sodales Phasellus amet. Dictum vitae Vestibulum nisl hendrerit Curabitur semper auctor orci nonummy aliquam. Quis ut sed tempor turpis wisi id elit lacinia tristique tortor. Condimentum Vestibulum id.</p>
<p>Nibh rhoncus semper sit semper id leo id nibh metus ac. Sit ut Quisque amet ullamcorper Aenean neque consectetuer eu accumsan elit. Nunc eget sed lobortis suscipit Duis semper risus id est Aliquam. Semper turpis Ut vel habitasse augue non Nam in lorem id. Dolor tincidunt ac congue justo pretium enim nascetur at ornare lacus. Eu molestie metus velit Vivamus In consectetuer enim tellus Suspendisse semper. </p>
<p>Ut cursus nibh eget leo et sed pede convallis a pretium. Venenatis turpis hac ridiculus leo pretium ante pretium dui at dui. Sociis tincidunt condimentum mi vitae neque ut ac Quisque mauris eget. Metus Nam pulvinar vel et laoreet semper habitasse faucibus elit semper. Et sollicitudin sed vel odio Nam Nulla nunc Donec Nam Pellentesque. Parturient gravida accumsan Quisque Lorem lorem pellentesque Vestibulum Vivamus Aenean volutpat. Nec vitae.</p>
	</div><!--konec divu uvnitrtela-->
</div><!--konec divu telowebu-->
</body>
</html>
Michal Kolesa
Profil
Cesta zadaná správně je
Bubák
Profil
Michal Kolesa
Chtěl jsem vědět, co máš na prvém řádku, dalších 10 je v tomto případě zbytečných.
Stránka začíná hlavičkou...“
Na prvném řádku máš doctype!, který způsobí, že IE je ve quirk režimu, proto ti v IE margin: 0 auto; nefunguje.

Řešim nefunkčnost margin: 0 auto;
Máš dvě možnosti:
zfunkčnit v IE margin: 0 auto; použitím vhodného doctype!
obejít nefunkčnost http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php
Dodatek: odkázané řešení je prakticky totéž, co tady vložil [#15] aha
Michal Kolesa
Profil
Jaké mám dát doctype ?
Bubák
Profil
Třebas stejný, jako máš na stránce, kde ti „to jde“.
aha
Profil
Michal Kolesa
No tak použij ten kód co jsem ti napsal, ten funguje všude (odzkoušeno), doctype tam je. Dělá to na mě dojem, že's to ani nezkusil a diskutuješ dál. Napiš jak to funguje. Jinak se dál nehodlám namáhat s odpověďmi.
Michal Kolesa
Profil
Já potřebuji CSS v externím souboru
Proč tam máš uvnitř těla ?
Bubák
Profil
Já potřebuji CSS v externím souboru
Tak ho tam dej.

Proč tam máš uvnitř těla ?
Protože jde o příklad.

Zase mezera před otazníkem, proč?
Michal Kolesa
Profil
kód jsem zkoušel a mate mě tam ten text-align. Svůj kód jsem opsal z knihy 33 tipů a triků pro CSS od Martina domese z Cpress

V čem se liší můj problém viz zdrojový kód od kódu co mám na své homepage http://michal.kolesa.zde.cz Já tam žádný rozdíl nevidím
Davex
Profil
Problematická a funkční stránka se liší v doctype. Pokud bys neignoroval rady [#13], [#17] a [#19] od Bubáka, tak už by ti to dávno fungovalo.
Michal Kolesa
Profil
Já jsem holt trochu "natvrdlejší".

Proč ten doctype tak "vadí"?
Davex
Profil
Viz módy prohlížečů, vliv !doctype na vykreslování stránky.
Michal Kolesa
Profil
dík zase jsem o něco moudřejší

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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