| Autor | Zpráva | ||
|---|---|---|---|
| tony2 Profil |
Já se tady pořád pokouším napsat obdelník s šířkou 770px výškou automatickou.Ať má margin-top 50px.magrin left a right auto a min-height 600px a background color black a furt mi to blbne:
#hlavni {
height:auto;
min-height:600px;
_height:600px; /*pro IE 6 a starší */
width:770px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
background-color:black;
}
#cleaner {
visibility:hidden;
clear:both;
}a to bych pak chtěl rozdělit nahoru na logo dole patičku vlevo na kraj mezi logo a patičku by patřilo menu a to co zbylo uprostřed by byl text. Mělo by to být primitivní ale mě to pořád nefunguje |
||
| Pinqui Profil |
#2 · Zasláno: 28. 6. 2009, 08:00:33
tony2
Děláš to složitě. a s automatickou šířkou se budeš jen zlobit. Radši se zkus podívat na toto a trochu si to upravit: http://www.pixy.cz/blogg/clanky/css-3col-layout/ Nebo je možnost, udělat si 4 základní divy: hlavicka - například width:1000px; margin: 0 auto; stred- například width:1000px; margin: 0 auto; (tady si pak dáš podle potřeby menu-left - float:left; menu-right - float:right) srovnani- clear:both; paticka- například width:1000px; margin: 0 auto; trochu si s tím pohraj a ono to pujde, jinak kdyby jsi chtěl už používat _height, tak já osobně bych radši použil =height |
||
| tony2 Profil |
#3 · Zasláno: 28. 6. 2009, 08:16:27 · Upravil/a: tony2
tam je ale výška NE šířka ok já jen že mám od toho Pixiho knížku a tam to psal nějak tímhle stylem a docela se mě ten styl líbil ale tohle se mi zdá jednodůší.Díky tohle snad zvládnu napsat
|
||
| Pinqui Profil |
#4 · Zasláno: 28. 6. 2009, 08:29:56
oprava s výškou se budeš zlobit.. na výšku bych se vykašlal a nechal ji podle obsahu.
|
||
| tony2 Profil |
prosímtě řekl bys mi proč mi to blbne?
design.css body {
background-color:lightgrey;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#logo {
margin-top:30px;
height:200px;
background-color:green;
width:770px;
margin-left:auto;
margin-right:auto;
}
#obsah {
margin-top:230px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#menu {
text-align:center;
width:170px;
float:left;
min-height:400px;
=height:400px;
background-color:yellow;
}
#text {
width:500px;
float:left;
margin-left:170px;
min-height:500px;
background-color:blue;
}index.php <html>
<head>
<link href="./css/design.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="logo"></div>
<div id="obsah">
<div id="menu">
</div>
<div id="text"></div>
</div>
</body>
</html>Dyť tam mám vše správně ne? |
||
| tony2 Profil |
#6 · Zasláno: 28. 6. 2009, 08:31:05
„oprava s výškou se budeš zlobit.. na výšku bych se vykašlal a nechal ji podle obsahu.“
no však tak jsem to myslel.Aby se nastavila podle obsahu.To se udělá jak? |
||
| Pinqui Profil |
#7 · Zasláno: 28. 6. 2009, 08:33:09
Když ve stylech nikde nezadáš height tak se bude automaticky dělat podle obsahu. To znamená v tvém případě u hlavičky si height nastav podle loga, u patičky podle toho co tam chceš a střed a menu dej jen width a height tam vůbec nepiš
|
||
| Pinqui Profil |
#8 · Zasláno: 28. 6. 2009, 08:36:47
K tomu kódu co jsi napsal.. co ti tam blbne? Ty chceš ty divy u sebe?? V tom případě nepoužívej pořád ten margin-top ten ti to od každého posledního prvku odsune
|
||
| tony2 Profil |
#9 · Zasláno: 28. 6. 2009, 08:41:42 · Upravil/a: tony2
aha jo vlastně já jsem si neuvědomil že to mám rozdělené na několik divu.
Jo a po těchto upravách mi tam vzniklo #obsah {} :D mám to tam nechat?A ještě jak nastavím ať je to ve středu.A jak bych měl udělat patičku? |
||
| Pinqui Profil |
Jinak ten css k tomu se dá napsat nějak takto:
body {
background-color:lightgrey;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#logo {
height:200px;
background-color:green;
width:770px;
margin:0 auto;
margin-top: 30px;
}
#obsah {
width: 770px;
margin:0 auto;
}
#menu {
text-align:center;
width:170px;
float:left;
min-height:400px;
=height:400px;
background-color:yellow;
}
#text {
width: 600px;
float:right;
min-height:400px;
=height:400px;
background-color:blue;
}
|
||
| tony2 Profil |
Takže už to mám omrkneš mě ten kod?
body {
background-color:lightgrey;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#logo {
height:200px;
background-color:green;
width:770px;
margin:0 auto;
margin-top: 30px;
}
#obsah {
width: 770px;
margin:0 auto;
}
#menu {
text-align:center;
width:170px;
float:left;
min-height:400px;
=height:400px;
background-color:yellow;
}
#text {
width: 600px;
float:right;
min-height:400px;
=height:400px;
background-color:blue;
}
#paticka {
width:770px;
height:10px;
background-color:black;
}
#cleaner {
visibility:hidden;
clear:both;
}a ještě bych chtěl vědět jestli se ta výška když v textu bude napsáno něco víc jestli se tomu přízpúsobí menu a natáhne se do stejné výšky |
||
| Pinqui Profil |
Zkus něco jako toto:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="czech, cs" />
<title></title>
<style type="text/css" media="screen, projection">
@import "./css/design.css";
</style>
</head>
<body>
<div id="header">
</div>
<div id="middle">
<div id=left-menu></div>
<div id=body-center></div>
</div>
<div class="both"> </div>
<div id="footer"></div>
</body>
</html>
a css:
body {
margin:0; padding:0;
}
#header {
width: 1000px;
height: 200px;
margin: 0 auto; padding:0; /* --- centrovani --- */
}
#middle {
width: 1000px;
margin: 0 auto;
}
#left-menu {
float: left;
text-align: left;
width: 170px;
margin: 0; padding:0;
}
#body-center {
text-align:left;
margin: 0 0 0 190px; padding:0;
}
.both {
clear:both;
height:1px;
font-size:1px;
border: 0 none;
margin:0; padding:0;
background:transparent;
}
#footer{
width: 1000px;
margin: 0 auto;text-align:center;
font-size: 8pt;
}
|
||
| Pinqui Profil |
#13 · Zasláno: 28. 6. 2009, 08:58:21
Hodíš nějaký obsah a ono už se to roztáhne podle něj... Doporučuji nepoužívat min-height, =height. Zbytečné starosti.
|
||
| tony2 Profil |
#14 · Zasláno: 28. 6. 2009, 09:00:43
Ok Díky jo a neznáš stránku ze všema rozdílama mezi XML a HTML?Umím html a chtěl bych se naučit XHTLM.
|
||
| tony2 Profil |
#15 · Zasláno: 28. 6. 2009, 09:12:36 · Upravil/a: tony2
A proč je v tomto zdrojaku tak divně nahravane CSS?
|
||
| Pinqui Profil |
#16 · Zasláno: 28. 6. 2009, 09:17:16 · Upravil/a: Pinqui
tony2
to ořeže styly ze starých prohlížečů, to je novější include stylu, a nechápu na co potřebuješ em, ale tak když si seženeš poměry tak asi ano |
||
| tony2 Profil |
#17 · Zasláno: 28. 6. 2009, 09:22:50
aha ok.A minimální výšku bych měl nějakou nastavit?A to XHTML nevíš?
|
||
| Pinqui Profil |
#18 · Zasláno: 28. 6. 2009, 09:25:14
tony2
xhtml pracuje i s XML XML je uplně jiné než HTML.. výšku doporučuji nenastavovat |
||
| tony2 Profil |
#19 · Zasláno: 28. 6. 2009, 09:27:02
Aha a tak kde bych se to měl naučit neznáš nějaky pěkný web kde je to i česky?
|
||
| Pinqui Profil |
#20 · Zasláno: 28. 6. 2009, 09:32:54
tony2
nevím třeba poradí někdo jiný :-) |
||
| Bubák Profil |
#21 · Zasláno: 28. 6. 2009, 11:27:57
„pěkný web kde je to i česky?“
Stačí jedna stránka: http://atd.havrlant.net/jak-na-dokonale-xhtml O výhodách XHTML si můžeš za dlouhých zimních večerů číst ve zdejším vlákně Jaké jsou výhody XHTML? http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=30&topic=11358 |
||
| tony2 Profil |
#22 · Zasláno: 28. 6. 2009, 13:47:52
Ok díky jo a ještě jak v tom zdrojaku co jsi mi sem napsal nastavím aby to mělo od vrchu menší mezeru?Daval jsem do header margin-top a to nic to mi akorat začalo logo rolovat po webu :D
|
||
| Pinqui Profil |
#23 · Zasláno: 28. 6. 2009, 14:55:15
to margin-top: 50px; dej por ten margin co tam je
|
||
| tony2 Profil |
#24 · Zasláno: 28. 6. 2009, 15:01:04
jo díky už mám
|
||
| tony2 Profil |
#25 · Zasláno: 28. 6. 2009, 15:11:03
takže to by bylo jen jak bych měl udělat aby bylo left-menu vždy stejně dlouhe jako body-center?Napsal jsem do obsahu toho víc a ten se protahl ale menu zustalo na stejném místě
|
||
| Chamurappi Profil |
#26 · Zasláno: 28. 6. 2009, 15:13:42 · Upravil/a: Chamurappi
Reaguji na tonyho2:
Nerozděluj prosím své odpovědi do několika příspěvků, tady není chat. „Umím html a chtěl bych se naučit XHTLM“ Co si od něj slibuješ? Nezmění se vůbec nic, dáš svému kódu pár dekorací, které si prohlížeče stejně zase odmyslí. „neznáš nějaky pěkný web kde je to i česky?“ Teď jsem zrovna četl hezký článek. Reaguji na Pinqui: „xhtml pracuje i s XML XML je uplně jiné než HTML“ Většinou se s tím, čemu se říká XHTML, pracuje všude jako s HTML a odchylky od syntaxe HTML, které XML povoluje, mohou být nebezpečné. „xml:lang="cs">“ To ti budou prohlížeče ignorovat, v HTML se používá atribut „lang“. |
||
| Pinqui Profil |
#27 · Zasláno: 28. 6. 2009, 15:31:56
tony2
Clear:both; ten tam je, aby se to vyrovnávalo, takže menu i střed by měli být pořád stejně dlouhé |
||
| panther Profil |
#28 · Zasláno: 28. 6. 2009, 15:36:27
Pinqui
„Clear:both; ten tam je, aby se to vyrovnávalo, takže menu i střed by měli být pořád stejně dlouhé“ Ne. tony2 „jak bych měl udělat aby bylo left-menu vždy stejně dlouhe jako body-center?“ lze to pouze opticky. Dělá se to obrázkem na pozadí nadřazeného prvku. |
||
| tony2 Profil |
#29 · Zasláno: 28. 6. 2009, 15:51:17
ok :D ale ja nevim který bude delší :D takže kterou barvu tam mam dat ? Jako menu je různě velké mám tam pomocí JS že se muže po kliknutí rozbalit další položky ale normálně je zase větší pozadí za textem?Nejde to jinak?
|
||
| panther Profil |
#30 · Zasláno: 28. 6. 2009, 16:15:04
tony2
„ale ja nevim který bude delší“ to nevadí. „takže kterou barvu tam mam dat“ nevíš, co je to obrázek? Pokud chceš levý sloupec 100px modrý, prostřední 600px zelený a pravý 200px červený, uděláš si obrázek, který bude 1px vysoký a bude zleva 100px modrý, 600px zelený a vpravo bude červený. Ten se pak bude opakovat na backgroundu nadřazeného prvku po ose y. |
||
|
Téma pokračuje na další straně.
|
|||
0