Otóż cała strona ma formę:
top
zawartość | menu
stopka
Problem tkwi w tym, iż menu nie dziedziczy wysokości zawartości, przez co tło się nie powiela, jak powinno. Przy użyciu JS wszystko działa prawidłowo, jednakże chcę uniknąć zbędnych skryptów. Probowałem już na wiele sposobów z tymi klasami, jednak bezskutecznie.
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="files/styl.css" type="text/css" />
<title></title>
</head>
<body>
<div class="strona">
<!-- Zawartość -->
<div id="zawartosc"><p>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd</p></div>
<!-- Prawe menu -->
<div id="m_m"><p>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd</p></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="files/styl.css" type="text/css" />
<title></title>
</head>
<body>
<div class="strona">
<!-- Zawartość -->
<div id="zawartosc"><p>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd</p></div>
<!-- Prawe menu -->
<div id="m_m"><p>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd</p></div>
</div>
</body>
</html>
Kod
body {
margin: 0;
background: url('bcg.jpg') #f3f3f3 repeat-x top;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
img {
border: 0;
}
.strona {
margin: 0;
border: 0;
width: 100%;
min-width: 800px;
}
#zawartosc {
float: left;
margin: 5px;
}
#m_m {
background: url('m_m.jpg') #3c7f2a repeat-x top;
float: right;
width: 216px;
margin-right: 33px;
}
margin: 0;
background: url('bcg.jpg') #f3f3f3 repeat-x top;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
img {
border: 0;
}
.strona {
margin: 0;
border: 0;
width: 100%;
min-width: 800px;
}
#zawartosc {
float: left;
margin: 5px;
}
#m_m {
background: url('m_m.jpg') #3c7f2a repeat-x top;
float: right;
width: 216px;
margin-right: 33px;
}
W html i css pozostawiłem (na potrzeby tego postu) tylko te wycinki, które powodują problem. Prosiłbym o pomoc w rozwiązaniu.