Autor Zpráva
klokyn
Profil
Ako mám pomocou divu, spanu, alebo tabulkou vytvoriť niečo ako toto: www.klokyn.wz.cz/priklad.htm. Mám to pomocou rámov a neviem prísť na to ako pomocou niečoho iného nalepiť to lavé menu na okraje stránky. Ide to aj inak ako pozicovaním?
Georgík
Profil
Dobrý den.

klokyn

Místo rámů bych dal například toto, nebo variace.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
</head>
<body style="margin:0px;border:0px;padding:0px;">
<div style="margin:5px;border:0px;padding:0px;">
<div style="float:left;margin:0px;border:0px;padding:0px;width:200px;">
<div style="margin:0px;border:1px solid #000000;padding:5px;font-family:Tahoma;font-size:18px;">
<div style="text-align:center;font:120%;">menu</div>
<a style="display:block;" href="./" title="hlavní stránka">hlavní stránka</a>
<a style="display:block;" href="./odkazy.htm" title="odkazy">odkazy</a>
<a style="display:block;" href="./kontakt.htm" title="kontakt">kontakt</a>
</div>
</div>
<div style="margin:0px 0px 0px 205px;border:0px;padding:0px;width:auto;">
<div style="margin:0px;border:1px solid #000000;padding:5px;">
<h1 style="text-align:center;font:inherit;font-size:25px;">Nadpis</h1>
<p style="padding:5px;border:0px;margin:0px;text-indent:2em;font-size:16p x;font-style:italic;">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
<p style="padding:5px;border:0px;margin:0px;text-indent:2em;font-size:16p x;">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
</div>
</body>
</html>

Schválně jsem to udělal tak, aby jste to mohl dolaďovat podle svého.

Mějte se fajn. Jirka
Charlie
Profil
Georgík, teď si zakopal hlavní výhodu CSS, šetření místa. Je to všechno zbytečně moc předefinované, dalo by se to udělat s použitím pár ID, a se třetinovým CSS.
Georgík
Profil
Dobrý den.

Charlie, vždyť to tam píšu - chlapík si to osahá, doladí a pak to překlopí do něčeho pořádného. Hlavně, když jede bez tabulek, ne?

Jirka
Charlie
Profil
Já vím, že to tam píšeš, ale stejně si myslím, že se to lépe dolazuje rovnou pohromadě. Ale promiň, ten kód je pěknej, žádné tabulky, framy, to se cení.
Georgík
Profil
Dobrý den.

Tak ještě jednou jak radí Charlie.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<style media="all" type="text/css">
body {margin:0px;border:0px;padding:0px;}
#envelope {margin:5px;border:0px;padding:0px;}
#leftside {float:left;margin:0px;width:200px;}
#leftmenu {border:1px solid #000000;padding:5px;font-family:Tahoma;line-height:16px;font-size:12px ;}
#leftmenu div {text-align:center;line-height:120%;font-size:120%;font-weight:bold;}
#leftmenu a {display:block;border:solid #000000;border-width:1px 0px 0px 0px;padding:0px 5px 0px 5px;text-decoration:none;}
#leftmenu a:hover {text-decoration:underline;}
#leftmenu a.printitem {border:0px;}
#main {margin:0px 0px 0px 205px;}
#mainborder {margin:0px;border:1px solid #000000;padding:5px;text-indent:2em;font-family:Batang, New Times Roman;font-size:16px;}
#mainborder h1 {text-align:center;font-size:25px;}
#mainborder p:first-letter {font-size:150%;}
#mainborder p.firstparagraph {font-style:italic;}
</style>
<style media="print" type="text/css">
#leftside {display:none;}
#main {margin:0px;}
</style>
</head>
<body>
<div id="envelope">
<div id="leftside">
<div id="leftmenu">
<div>menu</div>
<a href="./" title="hlavní stránka">hlavní stránka</a>
<a href="./odkazy.htm" title="odkazy">odkazy</a>
<a href="./kontakt.htm" title="kontakt">kontakt</a>
<br />
<a class="printitem" href="javascript:window.print();" title="Kliknutím na tento odkaz vytisknete tuto stránku na své tiskárně">tisk stránky</a>
</div>
</div>
<div id="main">
<div id="mainborder">
<h1>Nadpis</h1>
<p class="firstparagraph">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</div>
</div>
</body>
</html>

Snad již je to lepší. I když naostro bych asi ještě dal CSS kód do oddělených souborů společných pro všechny soubory webu.

Hodně úspěchů! Jirka
klokyn
Profil
Ďakujem pekne, zaujímavé, trochu zložitejšie, ale chápem tomu a viem to doladiť. A neišiel by ten divový odstavec naľavo úplne nalepiť na kraj. Ako keby bol top 0px a left 0px, ale bez pozicovania. Za ten príklad hore ešte raz ďakujem.
Georgík
Profil
Dobrý den.

klokyn:

Jestli Vám dobře rozumím, tak úpravou divu s id="envelope". Takto:

#envelope {margin:0px 0px 0px 0px;border:0px;padding:0px;}/* margin(okraj):nahoře vpravo dole vlevo; */

nebo podobně pro příklad nahoře - první div zezhora:

<div style="margin:0px 0px 0px 0px;border:0px;padding:0px;">/* margin(okraj):nahoře vpravo dole vlevo; */

Je to dobré?

Mějte se pěkně. Jirka
Georgík
Profil
Dobrý den.

Ještě pro klokyna. Určitě si zkuste i mojí druhou verzi. IMHO je skvělá pro publikaci stránek, které se mají tisknout! A to jediným kliknutím a bez balastu, všiml jste si?

Hodně úspěchů. Jirka
filip
Profil *
vy ste mudri, ale ako docielit to aby sa vam do bunky v tabulke nacital odkaz?
klokyn
Profil
Georgík: Ďakujem Vám veľmi pekne, teraz už všetko potrebné na vytvorenie stránky podľa mojich predstáv viem. Horúca vďaka za obohacujúce príklady.
krteczek
Profil
http://www.krteczek.czweb.org/jpw/2/ dvousloupcový layout, česky popsaný
Georgík
Profil
Dobrý den.

Krteczek mně připomenul, že se musíme učit celý život. 8-)

Dík a dovi zůčastněným. Jirka
Toto téma je uzamčeno. Odpověď nelze zaslat.

0