Autor Zpráva
PerToon
Profil
#1 · Zasláno: 27. 10. 2005, 18:16:06
Odpovědět Citovat
Tohle je tu taky docela často, ale už si nevím rady.

Mám jeden div, který nemá nastavenou šířku, ale má margin: 30px, takže vyplňuje kolik může.
V něm je druhý div, který má nastavený margin, kvůli nepředvídatelnosti paddingu (matrjoška).
V něm je pět odkazů, které mají display: block; ale zároveň jsou floatovaný, aby byly vedle sebe a měly nastavitelnou velikost.
Těch pět odkazů by mělo dohromady vyplňovat celý prostor druhého divu, ale jak to udělat?

Když jim nastavím šířku 20%, tak je to 20% celý stránky.
Absolutně nemůžu jejich velikost nastavit, protože je neznámá.

Jak se to dá chytře udělat? Děkuji předem.
Leo
Profil
#2 · Zasláno: 27. 10. 2005, 18:23:19
Odpovědět Citovat
Ten druhy div ma nastavenou sirku nebo ne? Leo
Martin Kuželka
Profil
#3 · Zasláno: 27. 10. 2005, 18:28:07
Odpovědět Citovat
Zkus tomu prvnímu divu nastavit i ten padding (místo marginu u divu druhého). Druhému nastav width: 100%; . Myslím, že by to mělo fungovat.
PerToon
Profil
#4 · Zasláno: 27. 10. 2005, 18:59:28
Odpovědět Citovat
Leo - druhý div nemá nastavenou šířku, ale zase zabírá maximální možné místo.
Martine - když má druhý div nastavenou šířku 100%, tak to stejně nefunguje.

Zkusím vypreparovat kód co za to může a dát ho sem.
Leo
Profil
#5 · Zasláno: 27. 10. 2005, 19:05:54
Odpovědět Citovat
"Zkusím vypreparovat kód co za to může a dát ho sem."

To bude idealni, Leo
PerToon
Profil
#6 · Zasláno: 27. 10. 2005, 20:07:11
Odpovědět Citovat
<style>
#hotmenu {background-color: #cccccc;
margin: 30px;
margin-top: 10px;
margin-bottom: 10px;
border-width: 1px;
border-style: solid;
text-align: center;}
#inhotmenu {height: 20px;
margin-left: 5px;
margin-right: 5px;}
#inhotmenu a {background-color: #cccccc;
padding: 5px;
display: block;
width: 20%;
float: left;
margin: 0px;}
#inhotmenu a:hover {background-color: #dddddd;}
</style>
...
<div id="hotmenu"><div id="inhotmenu">
<a href="">První</a>
<a href="">Druhý</a>
<a href="">Třetí</a>
<a href="">Čtvrtý</a>
<a href="">Pátý</a>
</div></div>
Dero
Profil
#7 · Zasláno: 27. 10. 2005, 20:13:34
Odpovědět Citovat
#inhotmenu a {
...
/* padding: 5px; */ nemůžeš použít kvůli box modelu [lze padding: 5px 0; + text-indent: 5px; ]
...
}
PerToon
Profil
#8 · Zasláno: 27. 10. 2005, 20:27:16
Odpovědět Citovat
Dero - moc sem to nepochopil, nevím co mám vlastně zapsat.
/* padding: 5px; */ z toho udělá poznámku, která se ignoruje.
padding: 5px 0; se chová stejně jak bez tý nuly, ale nevím co to znamená.
text-indent: 5px; s tím podle mě nedělá vůbec nic.
Dero
Profil
#9 · Zasláno: 27. 10. 2005, 20:36:21
Odpovědět Citovat
PerToon: Jde o to, že ten kód, který jsi uvedl, bude vždy přesahovat 100% rodičovského elementu. Obsahový box model totiž počítá šířku, kterou box zabere, takto: width + padding + border + margin. V Tvém případě 20% + 10px (padding left a right), v součtu pak 100% + 50px. Když ten padding vypustíš, odkazy se nasumírují na jednu řádku do elementu inhotmenu.
Martin
Profil
#10 · Zasláno: 27. 10. 2005, 20:37:22 · Upravil/a: Martin
Odpovědět Citovat 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

* {

	border:0;

	margin:0;

	padding:0;

}	

#hotmenu {

	background-color: #cccccc;

	text-align: center;

	margin:30px;

}

#inhotmenu {

	height: 20px;

	border:1px solid black;



}

#inhotmenu a {

	background-color: #cccccc;

	width: 20%;

	float: left;

}

#inhotmenu a:hover {background-color: #dddddd;}

</style>

</head>



<body>

	<div id="hotmenu">

		<div id="inhotmenu">

		<a href="">První</a>

		<a href="">Druhý</a>

		<a href="">Třetí</a>

		<a href="">Čtvrtý</a>

		<a href="">Pátý</a>

		</div>

	</div>

</body>

</html>
PerToon
Profil
#11 · Zasláno: 27. 10. 2005, 21:08:49
Odpovědět Citovat
Tak sem to Martine zkusil a nechápu, jak můžeš nastavit výšku a šířku odkazu aniž by to byl blokový element! Trochu se bojím, že je to tím doctyoe, a pak by mě zajímalo, jestli bych musel něco jinýho na stránkách měnit... zatím používám <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">. A taky by mě zajímalo, co v CSS znamená * { ... }.
PerToon
Profil
#12 · Zasláno: 27. 10. 2005, 21:42:11
Odpovědět Citovat
Tak jsme s Martinem asi přišli na zajímavý paradox. Ten můj odkaz nemusí mít nastaveno display: block;, protože tím, že má nastavený float, tak má automaticky šířku 100% a tím, že je tam víc floatů, tak má automaticky šířku 20%! Prostě co je floatovaný, to je blok. (Jestli sem to správně pochopil.)
Dero
Profil
#13 · Zasláno: 27. 10. 2005, 21:57:30
Odpovědět Citovat
Paradox?

http://www.w3.org/TR/CSS1#floating-elements
PerToon
Profil
#14 · Zasláno: 27. 10. 2005, 22:14:30
Odpovědět Citovat
Ne každý študuje specifikaci CSS, no....
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0