| 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 |
#3 · Zasláno: 27. 9. 2009, 16:13:40
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 |
#4 · Zasláno: 27. 9. 2009, 16:21:38
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 |
#7 · Zasláno: 27. 9. 2009, 16:40:18
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 |
#8 · Zasláno: 27. 9. 2009, 16:46:35 · Upravil/a: swetko
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 |
#9 · Zasláno: 27. 9. 2009, 16:50:12
Řešim nefunkčnost margin: 0 auto;
|
||
| Zechy Profil |
#10 · Zasláno: 27. 9. 2009, 16:51:24
Vycentruješ body, a pak prvnímu divu nastavíš align na left jak to je klasicky.
|
||
| Michal Kolesa Profil |
#11 · Zasláno: 27. 9. 2009, 16:54:13
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 |
#12 · Zasláno: 27. 9. 2009, 16:58:55 · Upravil/a: swetko
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 |
#13 · Zasláno: 27. 9. 2009, 22:02:45
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 |
#14 · Zasláno: 28. 9. 2009, 01:29:36
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 |
#15 · Zasláno: 28. 9. 2009, 09:26:07
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 |
#16 · Zasláno: 28. 9. 2009, 10:43:19
Cesta zadaná správně je
|
||
| Bubák Profil |
#17 · Zasláno: 28. 9. 2009, 10:48:44 · Upravil/a: Bubák
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 |
#18 · Zasláno: 28. 9. 2009, 10:56:09
Jaké mám dát doctype ?
|
||
| Bubák Profil |
#19 · Zasláno: 28. 9. 2009, 11:33:30
Třebas stejný, jako máš na stránce, kde ti „to jde“.
|
||
| aha Profil |
#20 · Zasláno: 28. 9. 2009, 11:35:55
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 |
#21 · Zasláno: 28. 9. 2009, 11:40:03
Já potřebuji CSS v externím souboru
Proč tam máš uvnitř těla ? |
||
| Bubák Profil |
#22 · Zasláno: 28. 9. 2009, 11:44:28
„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 |
#23 · Zasláno: 28. 9. 2009, 13:21:48
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 |
#24 · Zasláno: 28. 9. 2009, 13:32:03
|
||
| Michal Kolesa Profil |
#25 · Zasláno: 28. 9. 2009, 13:39:21
Já jsem holt trochu "natvrdlejší".
Proč ten doctype tak "vadí"? |
||
| Davex Profil |
#26 · Zasláno: 28. 9. 2009, 16:59:28
|
||
| Michal Kolesa Profil |
#27 · Zasláno: 28. 9. 2009, 17:06:21
dík zase jsem o něco moudřejší
|
||
|
Časová prodleva: 15 let
|
|||
0