| Autor | Zpráva | ||
|---|---|---|---|
| Neas Profil |
#1 · Zasláno: 9. 1. 2010, 00:25:38 · Upravil/a: Neas
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 |
#2 · Zasláno: 9. 1. 2010, 00:41:57
<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 |
#3 · Zasláno: 9. 1. 2010, 08:39:26
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 |
#4 · Zasláno: 9. 1. 2010, 20:04:01 · Upravil/a: Neas
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 |
#5 · Zasláno: 9. 1. 2010, 21:47:30
Pokud ti to pomohlo, to samo je pro mě dostačující :-)
|
||
| Neas Profil |
#6 · Zasláno: 9. 1. 2010, 22:15:05 · Upravil/a: Neas
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 |
#7 · Zasláno: 9. 1. 2010, 22:20:26
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 |
#8 · Zasláno: 9. 1. 2010, 22:54:39 · Upravil/a: Neas
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 |
#9 · Zasláno: 9. 1. 2010, 22:58:00
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 |
#10 · Zasláno: 9. 1. 2010, 23:15:11
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 |
#11 · Zasláno: 10. 1. 2010, 00:07:12
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 |
#12 · Zasláno: 10. 1. 2010, 11:05:15
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 |
#13 · Zasláno: 10. 1. 2010, 11:07:49
no já to samozřejmě udělal při testu, ale je to jednolitá plocha. Tak nevím :-)
|
||
| Neas Profil |
#14 · Zasláno: 10. 1. 2010, 11:25:20
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 |
#15 · Zasláno: 10. 1. 2010, 11:27:59
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 |
#16 · Zasláno: 10. 1. 2010, 11:38:55
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ží.
|
||
|
Časová prodleva: 13 let
|
|||
0