Autor Zpráva
Petr123
Profil *
Protože jsem měl pořád stránku vyšší než okno prohlížeče, tak jsem udělal jednoduchou stránku, na které jsem zkusil formátování:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Nová stránka 1</title>
<style type="text/css">
* {margin:0; padding:0;}
body {background-color:red; height:100%;text-align:center;margin:0;padding:0;}
#stranka {background-color:yellow;position:relative;text-align:left;width:760px ;min-height: 100%;height:100%;margin:0 auto 0 auto;}
#okraje {background-color:blue; margin-top:5px; border:1px solid black;}
#hornimenu{height:30px;background-color:green;margin-top:10px;}
</style>
</head>

<body>
<div id="stranka">
<div id="okraje">
<div id="hornimenu"></div>
</div>
</div>
</body>

</html>


Ve Firefoxu mám nahoře červený okraj, přitom jsem chtěl okraj až uvnitř žlutého pole. Nam DIVem hornimenu mám zase žlutý okraj, ale očekával jsem modrý.

Chápu chování okrajů špatně a nebo to špatně interpretuje Firefox?

Chtěl jsem udělat stránku vysokou podle okna prohlížeče, ale při nastavení okrajů se vždy zobrazí rolovací lišta, protože DIV stránka je sice vysoký 100% okna, ale má nad sebou prostor. Jak z toho ven?

Dík

Petr
Charlie
Profil
Firefox to interpretuje dobře. 100 % velikost prvku je pouze vnitřní velikost bez marginu, logicky se tak stránka zvětší. Navíc jsem četl něco takového, že nadřazený prvek přebírá i margin prvku v něm. IMHO se to tady už někdy řešilo.
Petr123
Profil *
To že se do velikosti nemají počítat okraje... jsem věděl, ale že by nadřazený prvek přebíral margin prvku v něm jsem netušil a nějak mi uniká smysl. Přesně je to zřejmě tak, že se jedná o první vnořený prvek. Když před vnořený div dám jakýkoliv text, tak už je vše tak jak jsem si představoval. Jen s tím rozdílem, že ten text jsem tam nechtěl. Řešením tedy zřejmě bude vložení úzkého obrázku, ale zdá se mi to jako dost krkolomné řešení.
Petr123
Profil *
Hmmm... skutečně jsem našel popis, který tomu odpovídá

Pokud za sebou následují dva boxy (a nejsou-li absolutně či relativně pozicované), jejich sousedící okraje margin-bottom a margin-top se spojí: tak, aby vzniklá mezera mezi rámečky obou boxů byla o velikosti větší z obou hodnot. Okraje se spojují tehdy, mají-li oba boxy stejný nadřazený box - nezáleží však na jejich vzájemném vztahu: druhý box může být na stejné úrovni jako první, ale může mu být nadřazený i podřazený (např. odsazená položka v UL seznamu). Horizontální okraje (margin-left a margin-right) se nespojují.

Díky
peta
Profil *
Jej, to je strasne napsane. To vypada, jako by to psal plavacek :)
lukas2
Profil *
Petr123: Pokud mas jednobarevne pozadi, staci si udelat u toho nadrazenyho border-top: 1px solid barva_toho_pozadi; a zmensit ten margin-top u vnitrniho divu o 1px, tim dosahnes presne toho, co chces.
Petr123
Profil *
Jej, to je strasne napsane. Líbit se Ti to nemusí, ale ničí mě, když někdo něco kritizuje a nejnapíše proč.
peta
Profil *
Petr123: Si to precti :) Politicky proslov :) Spousta slov a bohate stacilo rici, ze se oba marginy scitaji, ze ma pouzit padding nebo viz lukas, ramecek. Dale by mohlo fungovat definovat height.
Petr123
Profil *
peta: pak musíš příště napsat co kritizuješ. Já pochopil, že se vyjadřuješ k mému dotazu a ke způsobu jak jsem napsal zkušební kód. To, že máš potřebu se vyjádřit k textu, který jsem sem odněkud zkopíroval mě ani náhodou nenapadlo.
To co psal lukas2 je spíš berlička. Nastanou třeba problémy s okrajema. Levý a pravý vedou až nahoru. Dolní odsazení se mi podobným způsobem udělat nepovedlo.
peta
Profil *
Petr123 resim to padingy, na ne je spoleh. Margin si zobrazuje kazdy prohlizec po svem, jak to tak ctu tady a jinde a neco mam vyzkouseno :)
Toto téma je uzamčeno. Odpověď nelze zaslat.