Autor Zpráva
Robin2
Profil
#1 · Zasláno: 18. 9. 2006, 12:05:10 · Upravil/a: Robin2
Odpovědět Citovat
Zdravim,

mam mensi problem s CSS layoutem. Stranka je tvorena 4 DIVy.

- page - hlavni formatovaci DIV. Vystredeni stranky a nastaveni sirky.
--- content - nastaveny padding
------ body - samotny obsah stranky
------ header - hlavicka stranky

Chci aby v XHTML kodu byl DIV body pred DIVem header, ale v prohlizeci aby to bylo naopak. To neni zas tak problem, DIV header nastavim postion : absolute a DIV body margin-top: na vysku hlavicky.

Problem nastava tehdy, pokud chci DIVu content nastavit barvu pozadi. V IE se ukaze pozadi nastavene DIVu page, ve FF 1.5 se neukaze pozadi zadne.

Doufam ze jsem to vysvetlil ze je to pochopitelne, vi nekdo co s tim?

Diky predem.
Dero
Profil
#2 · Zasláno: 18. 9. 2006, 14:08:44
Odpovědět Citovat
To zcela normálně funguje. Hádám, že necháváš prvky v <div id="body"> plavat (float). V tom případě nemá stránka obsah, protože jak absolutně pozicované, tak plovoucí prvky jsou vyňaty z běžného toku stránky.

Zkus před ukončovací značku DIVu #content přidat <div style="clear: both;">&nbsp;</div>
Robin2
Profil
#3 · Zasláno: 19. 9. 2006, 11:24:38
Odpovědět Citovat
Ahoj,

diky za reakci. Zadny prvek tam nema nastaveno float. Pravda bude ta, ze problem je zpusoben absolutnim pozicovanim prvku header. Ale nevim jak to jinak udelat.

Toto je stylovy predmetny predpis:

div#page {
width: 940px;
margin: 0 auto;
background-color: pink;
}
div#content {
padding: 0 10px;
background-color: orange;
}
div#body {
background-color: red;
width: 920px;
margin-top: 50px;
}
div#header {
top: 0;
height: 50px;
background-color: yellow;
color: red;
width: 920px;
position: absolute;
}

A toto je kod stranky:

<!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" lang="cs" xml:lang="cs">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="cs" />
<link type="text/css" rel="stylesheet" href="/css/layout.css" media="screen,projection" />
</head>
<body>
<div id="page">
<div id="content">
<div id="body">
TELO
</div>
<div id="header">
HLAVICKA
</div>
</div>
</div>
</body>
</html>
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0