Autor Zpráva
Klasounek
Profil *
Zdravím, mrkněte prosím sem (viz. zdrojový kód stránky, ať to sem nemůsím kopírovat) Mám tam pár vnořených DIVů.
Ale někde je chyba a já už jsem asi slepej. Proč mi např. když napíšu text s <p>
do main divu (s textem: "Tady bude hlavni obsah") to posune s celým DIVem, do kterého je
text vepsán? Lze vidět, jak je celý blok posunut dolů o jeden řádek...


CSS:

body {
	margin: 0px; 
	padding: 0px;
	background-color: #37424b;
	text-align: center;  
	font-family: tahoma;
	font-size: 12px;
	line-height: 15px;
	color: #a2adb7;
	}

#content {
	margin: 8px auto 0em;
	width: 850px;
	height: 895px;
	background-color: #24292f;
	text-align: center;
	}

#content2 {
	width: 760px;
	margin: 0em auto 0em auto;
	}

#logo {
	float: left;
	margin:0; 
	width: 238px;
	}

#logo-content {
	margin:0; padding: 0;
	height: 111px;
	}

#menu {
	float: left;
	margin:0; 
	width: 522px;
	}

#menu-content {
	margin:0; padding: 0;
	height: 111px;
	background-color: #2e353b;
	}

#hlavicka {
	float: left;
	width: 760px;
	_margin:-3px 0px 0px 0px; 
	height: 203px;	
	background: url('soubory/hlavicka.jpg'); background-repeat: no-repeat;
	}

#hlavicka-content {
	}

#ucebny-nadpis {
	float: left;
	margin:0; 
	width: 238px;
	}

#ucebny-nadpis-content {
	margin:0; padding: 0;
	height: 45px;
	background-color: #000000;
	text-align: left; 
	font-family: arial;
	font-size: 18px;
	line-height: 15px;
	color: #e5e5e5;
	}

#onas {
	float: left;
	margin:0; 
	width: 522px;
	}

#onas-content {
	margin:0; padding: 0;
	height: 45px;
	background: url('soubory/o-nas-podklad.jpg'); background-repeat: no-repeat;
	background-color: #383f47;
	text-align: left; 
	font-family: arial;
	font-size: 18px;
	line-height: 15px;
	color: #e5e5e5;
	}

#ucebny {
	float: left;
	margin:0; 
	width: 238px;
	height: 463px;
	background-color: #383f47;
	}

#ucebny-content {
	margin:0; padding: 0;
	height: 199px;
	background: url('soubory/linka_ruzova.jpg'); background-repeat: no-repeat;
	}

#kontakt-nadpis-content {
	margin:0; padding: 0;
	height: 45px;
	background-color: #000000;
	text-align: left; 
	font-family: arial;
	font-size: 18px;
	line-height: 15px;
	color: #e5e5e5;
	}

#kontakty-content {
	margin:0; padding: 0;
	height: 219px;
	background-color: #383f47;
	background: url('soubory/linka_ruzova.jpg'); background-repeat: no-repeat;
	}

#main {
	float: left;
	margin:0; 
	width: 522px;
	background-color: #2e353b;
	}

#main-content {
	margin:0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	height: 463px;
	text-align: left;
	background: url('soubory/linka_cerna.jpg'); background-repeat: no-repeat;
	}

#zapati-copy {
	float: left;
	margin:8px 0px 0px 0px; 
	width: 238px;
	height: 45px;
	padding: 0px 0px 0px 0px;
	background-color: #e50083;
	text-align: left;
	color: white;
	}

#zapati-g73 {
	float: left;
	background-color: #000000;
	height: 45px;
	width: 522px;
	margin: 8px 0px 0px 0px;
	text-align: left;
	}

img   {
	border: 0px;
	} 

hr.cleaner {
	clear:both;
	height:1px;
	margin: -1px 0 0 0; padding:0;
	border:none;
	visibility: hidden;
	}

Moderátor Chamurappi: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
zvěřiňák
Profil
Takhle to tam máš zapsaný:
<div id="main">
<div id="main-content">
<p style="margin: 10px 0px 0px;">Tady bude hlavni obsah </p>
</div>
</div>

Tak se posune dolů.
Klasounek
Profil *
Hmm, a kde je problém, nějak to nechápu. (u margin pokud dobře koukám, mám všechny 4 hodnoty). Nechápů, proč se posune celý DIV, když odstavec je uvnitř? Pokud hodím text bez odstavce, třeba jen mezeru, a pak teprve odstavec, tak už je to ok, ale já to prostě nepobírám. Proč mi to u předešlých webů fungovalo...? To samé mi to dělá i pro <div id="ucebny-content"> a <div id="kontakty-content">
zvěřiňák
Profil
Promiň, nevšimnul jsem si, že se posouvá celý div a ne jenom odstavec.
Dá se to řešit border-top u divu, který bude mít stejnou barvu jako podklad, aby nebyl vidět.
<div id="main">
<div id="main-content" style="border-top: 1px solid #2E353B;">
<p style="margin: 10px 0px 0px;">Tady bude hlavni obsah </p>
</div>
</div>

Někdy se to tady už probíralo, ale nemůžu to najít. Bylo tam i vysvětlení, proč se to tak chová. Třeba to vysvětlí nějaký větší odborník.
Klasounek
Profil *
No, já to tak nějak částečně vyřešil tím, že jsem ponechal pouze <div id="main"> jemu nadefinoval výšku, atd (výška je důležitá, jelikož jak je vidět na webu, je hodně barevně členitej - každý blok, jiná barva). A <div id="main-content"> jsem prostě zrušil. Pak už to nehabruje. Ale teď to řeším pro <div id="ucebny-content"> a <div id="kontakty-content">, kde už nemám co zrušit...jsem z toho jelen.

Děkuji za tip, ale nějak to nechápu (nejsem teď doma, abych to testnul). Co to vyřeší? Border nějak zamezí tomu, aby se div hnul, nebo tak podobně?
zvěřiňák
Profil
Mně to taky dělá a tak jsem to tenkrát řešil odstavcem:
<p style="font-size: 0; line-height: 0; height: 0; margin:0; padding: 0;">&nbsp;</p>

Ale nějaké vysvětlení pro to nemám.
Klasounek
Profil *
No, nějak zalaborovat s prázdným <p> mě taky napadlo, takže tam asi loupnu to co jsi mi tu nadhodil a uvidím --> děkuji Ti.

Zaráží mě třeba i <img> a display:block, na webu před tím mě to nezlobilo a teď jsem na to taky narazil (mezera pod img). Před tím jsem použil průhledný png. Že by se to chovalo jinak než jpg... Fakt divočina občas.

Takže díky...
Klasounek
Profil *
Funguje to bravůrně! Danke

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: