Autor Zpráva
holdav
Profil *
#1 · Zasláno: 4. 3. 2010, 14:14:17
Odpovědět Citovat
Dobrý den, chtěl bych se zeptat, jak poskládat stranku z grafického návrhu, tak že jednotlivé části vložím do tabulek pomocí CSS nebo do iframe, ale problém nastává, když chci stránku zobrazovat v různých rozlišeních, protože dejme tomu, že mám v hlavičce nahoře obrázek 800x600 a pod něj chci naskládat 3 rámce - levé menu a pravé menu a obsah, ale nevím, jak to celé napozicovat na střed - procenty to nejde, protože potřebuju nahoře obrázek 800x600 a ten zaujímá v různých rozlišeních různá procenta a pixely to nikdy nedám na střed prohlížeče, protože v rozlišení 1024x768 by to vycházelo na 112px od každé strany, při rozlišení 1280x1024 na 240px, takže to taky nemůžu použít, poraďte mi prosím, jak to teda vyřešit, poněvač jak to teda dělají na většině webových stránek, že se takto přizpůsobují rozlišení, jako např. stránka wow.herniweb.cz. Děkuji.
panther
Profil
#2 · Zasláno: 4. 3. 2010, 14:43:06
Odpovědět Citovat
holdav:
o centrování je toho napsáno spousta, hledej.
HOLDAV
Profil *
#3 · Zasláno: 4. 3. 2010, 18:00:43
Odpovědět Citovat
Fakt děkuju za radu.
denCo
Profil
#4 · Zasláno: 4. 3. 2010, 18:03:45
Odpovědět Citovat
treba byť trošku samostatný, zadaj slovíčko do vyhľadávania a máš to
špecíalne pre teba
HOLDAV
Profil *
#5 · Zasláno: 4. 3. 2010, 19:20:04
Odpovědět Citovat
Hele možná sem úplně blbej, ale nenašel by se někdo kdo by mi ukázal na tomhle příkladu jak to vycentrovat cely pro různý rozlišení.




<html>


<head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Příklad sloupcového designu pozicováním</title>
<style>
#obsah { position: absolute; width: 500px; top: 120px; left: 150px; }
#patka { width: 100%; }
#hlavicka { position: absolute; width: 760px; top: 0px; left: 0px; height: 120px; }
#levy { position: absolute; width: 150px; top: 120px; left: 0px; }
#pravy { position: absolute; width: 110px; top: 120px; left: 650px; }
#levy { background-color: green; color: white; border-style: none; border-width:
medium; }
#levy h3 { color: black; }
#levy a:link { color: yellow; }
#levy a:visited { color: silver; }
#levy a:hover { color: red; }
#pravy { background-color: green; color: white; border-style: none; border-width:
medium; }
#hlavicka, #patka { background-color: navy; color: yellow; border-style: none; border-width:
medium; }
#vtipek { position: absolute; width: 100px; top: 90px; left: 570px; height: 100px;
text-align: center; background-color: yellow; z-index: 1;
border-style: none; border-width: medium; }
#vtipek { filter: Alpha(opacity=90, style=3); -moz-opacity: 0.9; opacity: 0.9; }
div { padding: 6px; }
* {-moz-box-sizing: border-box; box-sizing: border-box;} /* pocitani marginu a paddingu jako v Exploreru */
</style>
</head>

<body>

<p>&nbsp;</p>
<div id="obsah">
<h1>Příklad pozicování</h1>

<p>Sloupce na této stránce jsou postaveny pomocí CSS pozicování. Dá se to
udělat i tabulkami, ale ty mají nevýhodu, že se pomalu zobrazují. Oddíly
pozicované pomocí CSS se na rozdíl od tabulek zobrazují hned, jak se
načítají.</p>
<p>Další perfektní věcí je možnost načítání vlastního obsahu (tohoto textu)
jako prvního. Teprve až se načte vnitřek prostředního sloupce s
důležitým obsahem, začne se načítat grafická hlavička a levý sloupec s
odkazy.</p>
<p>Toto je pouze nedokonalá ukázka toho, co lze s pozicováním vykouzlit. Pro
praktické použití je potřeba lépe ji odladit podle aktuálních potřeb.</p>
<p>Popis stavby a HTML syntaxe je v textu o <a href="../css/css-design-position.html">
sloupcích pomocí pozicování</a>. Pro detailní pochopení příkladu si
zobrazte zdroj.</p>
<p id="patka">Toto je patka.</div>

<div id="hlavicka">
<h3>Hlavička s libovolným obsahem</h3>
<p>Pro Nestcape je dobré mít výšku obsahu přibližně stejnou jako výška
objektu, aby vykreslil pozadí.</p>
<p>&nbsp;</div>
<div id="levy">
Levý sloupec
<p>Zde se obvykle vyskytuje hodně odkazů</p>
<p><a href="../css/css-design-position.html">Jak postavit tuhle stránku</a></p>

<p><a href="overflow-layout.html">Další příklad pozicovaného layoutu</a></p>
<p><a href="http://www.gawain.pc-slany.cz">Gawain</a></p>
<p><a href="http://dusan.pc-slany.cz">Yuhů</a></p>
<p><a href="http://dusan.pc-slany.cz/rebusy/">Rébusy</a></p>
<h3>Nadpis jinou barvou</h3>
</div>
<div id="pravy">

Pravý sloupec
<p>Zde obvykle bývají jiné odkazy.</p>
<p>Odkaz</p>
<p>odkaz</p>
<p>odkaz</p>
<p>odkaz</p>
<p>odkaz</p>

<p>odkaz jinam
</div>
<div id="vtipek">
Objekt ilustrující možnosti překrývání
</div>

</body>

</html>
denCo
Profil
#6 · Zasláno: 4. 3. 2010, 19:24:51
Odpovědět Citovat
tak dobre teda... celý html kód čo sa nachádza v značke <body> a končí </body> uzatvor do ďalšieho tagu <center>... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> 
<title>Příklad sloupcového designu pozicováním</title> 
<style> 
#obsah { position: absolute; width: 500px; top: 120px; left: 150px; } 
#patka { width: 100%; } 
#hlavicka { position: absolute; width: 760px; top: 0px; left: 0px; height: 120px; } 
#levy { position: absolute; width: 150px; top: 120px; left: 0px; } 
#pravy { position: absolute; width: 110px; top: 120px; left: 650px; } 
#levy { background-color: green; color: white; border-style: none; border-width: 
medium; } 
#levy h3 { color: black; } 
#levy a:link { color: yellow; } 
#levy a:visited { color: silver; } 
#levy a:hover { color: red; } 
#pravy { background-color: green; color: white; border-style: none; border-width: 
medium; } 
#hlavicka, #patka { background-color: navy; color: yellow; border-style: none; border-width: 
medium; } 
#vtipek { position: absolute; width: 100px; top: 90px; left: 570px; height: 100px; 
text-align: center; background-color: yellow; z-index: 1; 
border-style: none; border-width: medium; } 
#vtipek { filter: Alpha(opacity=90, style=3); -moz-opacity: 0.9; opacity: 0.9; } 
div { padding: 6px; } 
* {-moz-box-sizing: border-box; box-sizing: border-box;} /* pocitani marginu a paddingu jako v Exploreru */ 
</style> 
</head> 

<body> 
<center>
<p>&nbsp;</p> 
<div id="obsah"> 
<h1>Příklad pozicování</h1> 

<p>Sloupce na této stránce jsou postaveny pomocí CSS pozicování. Dá se to 
udělat i tabulkami, ale ty mají nevýhodu, že se pomalu zobrazují. Oddíly 
pozicované pomocí CSS se na rozdíl od tabulek zobrazují hned, jak se 
načítají.</p> 
<p>Další perfektní věcí je možnost načítání vlastního obsahu (tohoto textu) 
jako prvního. Teprve až se načte vnitřek prostředního sloupce s 
důležitým obsahem, začne se načítat grafická hlavička a levý sloupec s 
odkazy.</p> 
<p>Toto je pouze nedokonalá ukázka toho, co lze s pozicováním vykouzlit. Pro 
praktické použití je potřeba lépe ji odladit podle aktuálních potřeb.</p> 
<p>Popis stavby a HTML syntaxe je v textu o <a href="../css/css-design-position.html"> 
sloupcích pomocí pozicování</a>. Pro detailní pochopení příkladu si 
zobrazte zdroj.</p> 
<p id="patka">Toto je patka.</div> 

<div id="hlavicka"> 
<h3>Hlavička s libovolným obsahem</h3> 
<p>Pro Nestcape je dobré mít výšku obsahu přibližně stejnou jako výška 
objektu, aby vykreslil pozadí.</p> 
<p>&nbsp;</div> 
<div id="levy"> 
Levý sloupec 
<p>Zde se obvykle vyskytuje hodně odkazů</p> 
<p><a href="../css/css-design-position.html">Jak postavit tuhle stránku</a></p> 

<p><a href="overflow-layout.html">Další příklad pozicovaného layoutu</a></p> 
<p><a href="http://www.gawain.pc-slany.cz">Gawain</a></p> 
<p><a href="http://dusan.pc-slany.cz">Yuhů</a></p> 
<p><a href="http://dusan.pc-slany.cz/rebusy/">Rébusy</a></p> 
<h3>Nadpis jinou barvou</h3> 
</div> 
<div id="pravy"> 

Pravý sloupec 
<p>Zde obvykle bývají jiné odkazy.</p> 
<p>Odkaz</p> 
<p>odkaz</p> 
<p>odkaz</p> 
<p>odkaz</p> 
<p>odkaz</p> 

<p>odkaz jinam 
</div> 
<div id="vtipek"> 
Objekt ilustrující možnosti překrývání 
</div> 
</center>
</body> 

</html>
HOLDAV
Profil *
#7 · Zasláno: 4. 3. 2010, 20:21:13
Odpovědět Citovat
Kdyby to bylo tak jednoduchý :-( sem to udělal takhle a stejně se to nevycentrovalo


<html>

<head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Příklad sloupcového designu pozicováním</title>
<style>
#obsah { position: absolute; width: 500px; top: 120px; left: 150px; }
#patka { width: 100%; }
#hlavicka { position: absolute; width: 760px; top: 0px; left: 0px; height: 120px; }
#levy { position: absolute; width: 150px; top: 120px; left: 0px; }
#pravy { position: absolute; width: 110px; top: 120px; left: 650px; }
#levy { background-color: green; color: white; border-style: none; border-width:
medium; }
#levy h3 { color: black; }
#levy a:link { color: yellow; }
#levy a:visited { color: silver; }
#levy a:hover { color: red; }
#pravy { background-color: green; color: white; border-style: none; border-width:
medium; }
#hlavicka, #patka { background-color: navy; color: yellow; border-style: none; border-width:
medium; }
#vtipek { position: absolute; width: 100px; top: 90px; left: 570px; height: 100px;
text-align: center; background-color: yellow; z-index: 1;
border-style: none; border-width: medium; }
#vtipek { filter: Alpha(opacity=90, style=3); -moz-opacity: 0.9; opacity: 0.9; }
div { padding: 6px; }
* {-moz-box-sizing: border-box; box-sizing: border-box;} /* pocitani marginu a paddingu jako v Exploreru */
</style>
</head>
<div style="align: center" align="center">
<body><center>

<p>&nbsp;</p>
<div id="obsah">
<h1>Příklad pozicování</h1>

<p>Sloupce na této stránce jsou postaveny pomocí CSS pozicování. Dá se to
udělat i tabulkami, ale ty mají nevýhodu, že se pomalu zobrazují. Oddíly
pozicované pomocí CSS se na rozdíl od tabulek zobrazují hned, jak se
načítají.</p>
<p>Další perfektní věcí je možnost načítání vlastního obsahu (tohoto textu)
jako prvního. Teprve až se načte vnitřek prostředního sloupce s
důležitým obsahem, začne se načítat grafická hlavička a levý sloupec s
odkazy.</p>
<p>Toto je pouze nedokonalá ukázka toho, co lze s pozicováním vykouzlit. Pro
praktické použití je potřeba lépe ji odladit podle aktuálních potřeb.</p>
<p>Popis stavby a HTML syntaxe je v textu o <a href="../css/css-design-position.html">
sloupcích pomocí pozicování</a>. Pro detailní pochopení příkladu si
zobrazte zdroj.</p>
<p id="patka">Toto je patka.</div>

<div id="hlavicka">
<h3>Hlavička s libovolným obsahem</h3>
<p>Pro Nestcape je dobré mít výšku obsahu přibližně stejnou jako výška
objektu, aby vykreslil pozadí.</p>
<p>&nbsp;</div>
<div id="levy">
Levý sloupec
<p>Zde se obvykle vyskytuje hodně odkazů</p>
<p><a href="../css/css-design-position.html">Jak postavit tuhle stránku</a></p>

<p><a href="overflow-layout.html">Další příklad pozicovaného layoutu</a></p>
<p><a href="http://www.gawain.pc-slany.cz">Gawain</a></p>
<p><a href="http://dusan.pc-slany.cz">Yuhů</a></p>
<p><a href="http://dusan.pc-slany.cz/rebusy/">Rébusy</a></p>
<h3>Nadpis jinou barvou</h3>
</div>
<div id="pravy">

Pravý sloupec
<p>Zde obvykle bývají jiné odkazy.</p>
<p>Odkaz</p>
<p>odkaz</p>
<p>odkaz</p>
<p>odkaz</p>
<p>odkaz</p>

<p>odkaz jinam
</div>
<div id="vtipek">
Objekt ilustrující možnosti překrývání
</div>
</div>

</center></body>

</html>
Chazzy
Profil *
#8 · Zasláno: 5. 3. 2010, 16:53:55
Odpovědět Citovat
Stačí trošku přemýšlet. Především zruš tag <center>, protože ti je stejně k ničemu. pak také nechápu proč máš blok v hlavičce. Jinak postup vycentrování:
1. Musíš celý web obalit do nějakého bloku (třeba <div id="wrapper">

2. Teď to chce trošku zapnout hlavu

3. Nastavit bloku wrapper absolutní pozici (position: absolute;)

4. Celý blok umístit o 50% do leva. (left: 50%;)

5. Spočítat si přesnou šířku webu. V tomto případě sečteš #obsah, #levy a #pravy (případně pokud budeš chytrej, všimneš si že hlavička má stejnou šířku jak všechny bloky dohromady a použiješ její hodnotu, konkrétně 760px

6. Když si nyní web zobrazíš zjistíš že na středu rozhodně není, proto musíš celý wrapper do leva

7. Správnou pozici získáš jednoduše, nastavením záporného marginu s hodnotou přesně polovinu šířky (760 / 2 = 380) od leva. Tedy margin-left: -380px;

8. Pokud jsi vše provedl správně, máš nyní celý web na středu

Celý css kód 
#wrapper {
    position: absolute;
    left: 50%;
    margin-left: -380px;
}


Technik vycentrování je samozřejmě víc. například nastavením margin: 0 auto; ale to někdy dělá neplechu (hlavně v IE)
panther
Profil
#9 · Zasláno: 5. 3. 2010, 17:44:58
Odpovědět Citovat
Chazzy, denCo:
oba špatně, pozicování sem nepleťte. Zkuste si Vaší stránku zobrazit na rozlišení menším než je šířka webové stránky, levou část webu neuvidíte.

holdav:
kdybys nebyl líný, nahoře je vyhledávací políčko. Jsi asi stopadesátý, kdo se na totéž ptá, mně ani jiné nebaví to tu psát pořád dokola. Jestli nejsi schopný hledat, asi se na to raději vykašli.

Chazzy:
„například nastavením margin: 0 auto; ale to někdy dělá neplechu (hlavně v IE)“
v IE centrování neplechu nedělá, když víš, jak na něj správně.
Chazzy
Profil *
#10 · Zasláno: 5. 3. 2010, 20:14:29
Odpovědět Citovat
panther
odpovídám pouze na dotaz týkající se pozicování

v IE centrování neplechu nedělá, když víš, jak na něj správně.
ale já jsem řekl někdy, možná jsem měl napsat v určitých případech ..
Časová prodleva: 14 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0