Witam, mam do zrobienia prosta stronke z wykorzystaniem CSS. Chce aby część menu przylegała z lewej strony części właściwej strony. Zrobiłem dużego, głównego diva i wstawiłem do niego div menu (float:left) i div z treścią właściwa strony(float:right) ale pomimo dopasowania rozdzielczości nie chcą leżeć obok siebie a wyświetlają sie jedna po drugim. Czy mógłby ktoś mi pomoc z tym prostym choć męczącym mnie już problemem?
Oto część html:
<!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" xml:lang="eng" lang="pl">
<head>
<title>Sieci komputerowe - Mateusz Gorski</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>
</head>
<div id=body>
<body>
<div id="wrapper">
<div id="MENU">
<ul>
<li><a href="index.html">Strona glowna</a></li>
<li><a href="php.html">php</a></li>
<li><a href="css.html">CSS</a></li>
</ul>
</div>
<div id="page_container">
<p><img src="Foot-Muscles1-300x213.jpg" alt="foot" width="300" height="213" class="floatleft" id="floatLEFT" />Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna <h1>Tekst pisany naglowkiem h1</h1> </p><p>
Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna <img src="foot.png" width="300" height="213" alt="foot2" class="floatright"/>Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna Strona glowna <h3><p> I bez arkusza styli ... <a href="index2.html">KLIK</a></h3> </p>
</div>
</div>
<div class="push"></div>
<div class="footer">
<p><center>
Copyright (C) Mateusz Gorski 2011
</center></p>
</div>
</body>
</div>
</html>
oraz część css:
@charset "iso-8859-2";
/* CSS Document */
body{
background-image:url(backgroundblood.PNG);
background-repeat:no-repeat;
padding:0;
}
#wrapper{
background-color:transparent;
width:1012px;
height:600px;
margin: 0 auto;
margin-top:100px;
}
#page_container{
background-color:#FFF;
width:800px;
height:600px;
border-top-color:#F33;
border-left-color:#F33;
border-right-color:#F33;
border-bottom-color:#f33;
border-style:dashed;
border-width:5px;
float:right;
}
#footer{
background-color:#FFF;
margin:auto;
width:800px;
height:50px;
}
#MENU {
width: 200px;
margin-top:25px;
overflow: hidden;
}
#MENU ul {
margin:0px;
padding:0px;
background-color:#fff;
font-size:24px;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
color:#666;
}
#MENU ul li{
height:50px;
line-height:25px;
list-style:none;
padding-left:10px;
padding-top:20px;
margin-top:10px;
border-top:#f33 dashed;
border-bottom:#f33 dashed;
border-left:#f33 dashed;
border-width:1px;
cursor:pointer;
}
#MENU ul li:hover {
background-color:#F90;
position:relative;
}
.push {
height:50px;
}
.footer{
height:25px;
}
a
{
text-decoration:none;
text-transform:none;
color:#666;
}
p
{
padding-left:10px;
padding-right:10px;
}
img.floatleft{
float:left;
margin:5px;
}
img.floatright{
float:right;
margin:5px;
}
Pozdrawiam serdecznie,
M
wygląda to mniej więcej tak:
http://img849.imageshack.us/img849/5687/wwwzz.jpg