Autor Zpráva
Neas
Profil
Ahoj.
Nedávno jsem začal dělat jednu stránku a chtěl jsem v ní udělat menu v levo od zbytku stránky a celé to hodit na střed. Nejprve jsem si myslel, že se povedlo, ale když změním velikost okna, text se s menu začne překrývat, navíc jsem si pozdě uvědomil, že v IE se stránka zobrazí úplně špatně, protože u menu mám ve style position:fixed, který IE nepodporuje :(
Takhle to zatim vypadá
A zdrojový kód:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <link rel="shortcut icon" href="ramovana.ikona.ico" />
    <style>
body,html{
 text-align: center;
 color:#D57500;
 background-color:#2A0000;
 } 
#stranka{
 padding-left:200px;
 }
#menu{
 position:fixed;
 margin-top:310px;
 padding-left:15px;
 top:20px;
 left:20%;
 width:150px;
 } 
#main{
 text-align:left;
 margin:0 auto;
 width:1024px;
 background: url("background.y.png") repeat-y;
 }
.login{
 padding-left:20%;
 font-size:13;
 }
     </style>
</head>
  <body>
<img src="logo.png" />
<div id=main>
 <div id="stranka">
  Obsah stránky...<br />
  2<br />
  3<br />
  4<br />
  5<br />
  6<br />
  7<br />
  8<br />
  9<br />
  10<br />
  11<br />
  12<br />
  13<br />
  14<br />
  15<br />
  ...
 </div>
 <div id="menu">
  <form action="login.method.php" method="post">
   <div class="login">Jméno:</div>
   <input type="text" name="jmeno" /><br />
   <div class="login">Heslo:</div>
   <input type="pass" name="heslo" /><br />
   <input type="submit" value="Přihlásit" />
  </form>
  Menu stránky...<br />
 </div>
</div><img src="background.down.png" />
  </body>
</html>

Díky moc za pomoc :)
pavuk
Profil
<body>
<div #centrovac>
<div #menu>
...
...
...
</div>  //konec menu
<div #obsah>
...
...
...
</div> //konec obsahu
</div> //konec centrovace
</body>

a ve stylu
#centrovac {
margin: auto;
...;
...}

#menu {
float: left;
...;
...}
#obsah: {float: right; //nebo float: left s odpovídajícím margin-left
...;
...;
...}
pavuk
Profil
podívej se na následující odkaz, z toho to bude mnohem pochopitelnější, když se podíváš do zdrojáku, tak je to v něm i zakomentovaný
Neas
Profil
Díky moc, už to funguje :)
Ten poslední obrázek zatim žádnou funkci neplní, později sem na to místo chtěl dát jinej, se stejnou délkou, jako zakončení stránky.
Mimochodem, díky za tak detailní vysvětlení :)
pavuk
Profil
Pokud ti to pomohlo, to samo je pro mě dostačující :-)
Neas
Profil
A ještě něco bych potřeboval, abych nespamoval, nebudu zakládat nový topic, ale napíšu to sem:
Zdrojový kód teď vypadá takhle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- 
          ***  CREATED BY JAN "NEAS LOPATA" VEGRICHT  ***   
                   ####  Neas-san@email.cz  ####
                     ##  http://neas.ic.cz  ##
                         >>  (C) 2010   <<         
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <link rel="shortcut icon" href="ramovana.ikona.ico" />
    <style>
body,html{
 text-align:center;
 color:#D57500;
 background-color:#2A0000;
 }
#obsah{
 margin:auto;
 float:left;
 margin-left:10px;
 }
#menu{
 float:left;
 width:210px;
 } 
#main{
 margin:auto;
 text-align:left;
 width:1024px;
 height:auto;
 background:url('background.y.png') repeat-y;
 }
.login{
 padding-right:20px;
 font-size:80%;
 }
    </style>
</head>
  <body>
<img src="logo.png" />
<div id="main">
 <div id="menu">
  <form style="text-align:center;" action="login.method.php" method="post">
   <div class="login">Jméno:</div>
   <input type="text" name="jmeno" /><br />
   <div class="login">Heslo:</div>
   <input type="password" name="heslo" /><br />
  <input type="submit" value="Přihlásit" />
  </form>
  <div style="padding-left:10px;">
   Menu stránky...<br />
  </div> 
 </div>
 <div id="obsah">
  Obsah stránky............................................................................<br />
  2<br />
  3<br />
  4<br />
  5<br />
  6<br />
  7<br />
  8<br />
  9<br />
  10<br />
  11<br />
  12<br />
  13<br />
  14<br />
  15<br />
  ...
 </div>
</div><img src="background.down.png" />
  </body>
</html>

Chtěl bych, aby se ten obrázek background.y.png objevoval po ose y, aby to pak vypadalo jako v odkazu, který sem posílal v prvním postu. S tímhle zdrojovým kódem jsem sice opravil, co jsem chtěl, ale už nefunguje tahle maličkost.
Odkaz z prvního postu
Nový odkaz
pavuk
Profil
nerozumím tomu úpně přesně... Protože pokud se bude opakovat po y-ose tak to bude jednolitá barva, a to se dá zapsat mnohem elegantněji
Neas
Profil
ten obrázek není jednou barvou, jenom jak je placatý, tak tak vypadá. na stranách jsou černé čtverečky 2x2 px, prostor mezi nimi je ta tmavě červená. spolu s nadpisem a tou čárou, o které sis myslel, že je něco jako <hr> to tvoří takový rámeček, který ale v té nové verzi nefakčí..
pavuk
Profil
vymaž z názvu jednu z teček a přesvědč se, že je soubor background.png ve stejným adresáři,tedy jestli je správně zadaná cesta. Pak není důvod aby to nefungovalo (za předpokladu že je obrázek širokej 1024px)
Neas
Profil
rozměry obrázku jsou 1024x2
cesta je zadaná správně (2x kontrolováno)
zkoušel jsem i vymazat tu tečku, ale stejně nic, navíc v tý verzi předtim to fungovalo i s ní
ale stejně nefunguje :(
pavuk
Profil
To je způsobený tím, že #menu a #obsah mají oba float:, čili jsou vyjmutý z toku ("Jak funguje float a clear") a tím pádem má #main výšku 0. Zruš u #obsah "float: left" a margin-left dej o kousek větší než je šířka menu. (Mimochodem, ten obrázek pozadí se jmenuje u tebe background.png ale odkazuješ na background.y.png a je skutečně celej černej, žádný červená se čtverečkama:-)
Neas
Profil
dobrý, teď už to funguje přesně, jak jsem chtěl, díky moc :)
a ten obrázek je vážně dvoubarevnej, zkopíruj si ho tak 100x pod sebe a uvidíš sám :)
pavuk
Profil
no já to samozřejmě udělal při testu, ale je to jednolitá plocha. Tak nevím :-)
Neas
Profil
Tady sem nastavil, aby se ten obrazek neustale opakoval po obou osach, je tam dobře vidět, že má 2 barvy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <style>
body{background-image:url('background.y.png');}
  </style>
  </head>
  <body>
  </body>
</html>

A snad bych se ještě mohl zeptat na poslední maličkost: je v praxi nějaký rozdíl, když CSSkem nějak definuju body, nebo když definuju body,html ?
Příklad:
body,html{
 text-align:center;
 color:#D57500;
 background-color:#2A0000;
 }

VS
body{
 text-align:center;
 color:#D57500;
 background-color:#2A0000;
 }
pavuk
Profil
To záleží na tom co s kterým prvkem potřebuješ. V podstatě jedinej rozdíl je v tom, že pokud definuješ jenom body, nechá si html defaultní hodnoty
Neas
Profil
A nenapadá tě příklad, ve kterym by se musely definovat oba prvky? Mě totiž žádný nenapadá, v tom případě, co jsem uvedl, na tom nezáleží.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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