« 1 2 »
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
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
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
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
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
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
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
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">&nbsp;</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
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
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
A proč je v tomto zdrojaku tak divně nahravane CSS?
Pinqui
Profil
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
aha ok.A minimální výšku bych měl nějakou nastavit?A to XHTML nevíš?
Pinqui
Profil
tony2
xhtml pracuje i s XML XML je uplně jiné než HTML.. výšku doporučuji nenastavovat
tony2
Profil
Aha a tak kde bych se to měl naučit neznáš nějaky pěkný web kde je to i česky?
Pinqui
Profil
tony2
nevím třeba poradí někdo jiný :-)
Bubák
Profil
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
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
to margin-top: 50px; dej por ten margin co tam je
tony2
Profil
jo díky už mám
tony2
Profil
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
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
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
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
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
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.
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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