[Problem-CSS]Umieszczenie SidebarMenu

[Przem0]

Witam.
Mam problem z umieszczeniem bocznego menu na mojej stronie. Jako takie obeznanie w HTML i CSS mam jednak pierwszy raz projektuje od 0 stronkę i nie umiem poradzić sobie z niektórymi rzeczami.
Stronka ma standardowe rozmieszczenie:
-Top>Menu poziome>Pole Tekstowe(w zamyśle)>Stopkę
Do podejrzenia http://przemekf.webd.pl/.
Moim Celem jest dodanie Menu bocznego po lewej stronie czyli standardowo jak na większości serwisów. Próbowałem, czytałem poradniki, podglądałem szablony ale nie mogę znaleźć rozwiązania. Oczywiście menu Powinno się znajdować na jakimś domyślnym tle.
Dorzucam mój style.css i index.html z nadzieją na pomoc w rozwiązaniu problemu.

Style.css

Kod: Zaznacz cały

body{
margin: 0px;
padding: 0px;
text-align: center;
background-image: url('images/t1.png')
}

div#kontener{
width: 930px;

margin: 0px auto;
text-align: justify;
}

div#header{
background: transparent url('images/top.png') no-repeat;
height: 165px;
}

div#header h1{
margin: 0px;
visibility: hidden;
}

div#menu ul{
margin: 0px auto;
padding: 0px;
list-style-type: none;
height: 37px;
background: transparent url('images/menu.png') no-repeat;text-align: center;
font-size: 8pt;
font-family: Verdana;
}

div#menu ul li{
display: inline;
}

div#menu ul li a{
font-weight: bold;
text-decoration: none;
color: #A4BFE0;
padding: 0px 5px;
height: 35px;
line-height: 2.6em;
color: #fff;
padding: 9.5px 15px;
border-right: 0px solid #fff;
border-right: 0px solid #fff;

}

div#menu ul li a:hover{
background-color: #800;
background-image: url("images/tlo2.png");
}

div#news{
background: transparent url('images/tlo-news.png') repeat-y;
margin-left: 15px;
}

div#news h1{
margin-top: 0px;
padding-top: 15px;
}

div#news *{
padding-left: 30px;
padding-right: 30px;
}

div#footer{
height: 55px;
margin-left: 15px;
background: transparent url('images/footer.png') no-repeat;
position: relative;
}

div#footer p{
margin-top: 0px;
position: absolute;
width: 100%;
left: 0px;
bottom: -4px;
text-align: center;
font-size: 8pt;
margin-bottom: 15px;
}

index.php

Kod: Zaznacz cały

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
<meta http-equiv="Content-Language" content="pl" />
<title>Tytuł strony</title>
</head>
<body xml:lang="pl">

<!-- Contener -->
<div id="kontener">

<!-- Header -->
<div id="header">
<h1>---------</h1>
</div>
<!-- Koniec Header -->

<!-- Menu -->
<div id="menu">
<ul>


  <li><a href="index.php?view=index" title="Strona główna">Strona główna</a></li>

  <li><a href="forum.cs-crouser.pl" title="Forum Graczy">Forum Graczy</a></li>

  <li><a href="index.php?view=serwery" title="Serwery">Serwery</a></li>

  <li><a href="index.php?view=oferta" title="Oferta">Oferta</a></li>

  <li><a href="index.php?view=news" title="Aktualności">Aktualności</a></li>

  <li><a href="index.php?view=download" title="Download">Download</a></li>

  <li><a href="index.php?view=statystyki" title="Statystyki Graczy">Statystyki Graczy</a></li>


</ul>
</div>
<!-- Koniec Menu -->

<!-- News -->
<div id="news">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- Koniec News -->

<!-- Sidebar -->
<div id="sidebar">

</div>
<!-- Koniec Sidebar -->

<!-- Footer -->
<div id="footer">
<p>Copyright by Cs-Crouser.pl 2010. Kopiowanie bez zgody autora surowo zabronione!</p>
</div>
<!-- Koniec footer -->

</div>
</body>
</html>

[Theprz3m0]

Kod: Zaznacz cały

body{
margin: 0px;
padding: 0px;
text-align: center;
background-image: url('images/t1.png')
}

div#kontener{
width: 930px;
margin: 0px auto;
text-align: justify;
}

div#header{
background: transparent url('images/top.png') no-repeat;
height: 165px;
}

div#header h1{
margin: 0px;
visibility: hidden;
}

div#menu ul{
margin: 0px auto;
padding: 0px;
list-style-type: none;
height: 37px;
background: transparent url('images/menu.png') no-repeat;text-align: center;
font-size: 8pt;
font-family: Verdana;
}

div#menu ul li{
display: inline;
border:1px solid #123456;
}

div#menu ul li a{
font-weight: bold;
text-decoration: none;
color: #A4BFE0;
padding: 0px 5px;
height: 35px;
line-height: 2.6em;
color: #fff;
padding: 9.5px 15px;
border-right: 0px solid #fff;
border-right: 0px solid #fff;
}

div#menu ul li a:hover{
background-color: #800;
background-image: url("images/tlo2.png");
border:1px solid #123456;
}

div#news{
background: transparent url('images/tlo-news.png') repeat-y;
margin-left: 15px;
width:650px;
float:left;
}

div#news h1{
margin-top: 0px;
padding-top: 15px;
}

div#news *{
padding-left: 30px;
padding-right: 30px;
border:1px solid #123456;
}

div#footer{
height: 55px;
background: transparent url('images/footer.png') no-repeat;
float:left;
width:930px;
}

div#footer p{
width: 100%;
left: 0px;
bottom: -4px;
text-align: center;
font-size: 8pt;
margin-bottom: 15px;
}
#sidebar{
height:100px;
width:200px;
background:#ff0000;
float:left;
}

Czyli jak widzisz:
usunąłem wszelkiego rodzaju atrybuty position, a dodałem float:left. Nie zmieniaj stopki na center, bo wywali ci ją do góry. Ponadto dodałem wartości width i height - dziwi mnie, że to omijasz w niektórych znacznikach. Natomiast w pliku index.html zamień kolejnością znaczniki <div id="news">...</div> z <div id="sidebar">...</div>, żeby sidebar był pierszy i wyreguluj sobie szerokości (width) w sidebar i news oraz #stop p.
Mam nadzieję, że pomogłem ;D

[Przem0]

Tak pomogłeś dzięki wielkie Jeśli będę miał jakieś problemy będę pisał w tym temacie.

Aha jeszcze takie małe pytanko czy jeśli używam sobie np.

Kod: Zaznacz cały

margin-left: 20px

do ustawiania elementów nie wpłynie to negatywnie na ułożenie w/w elementów?

[Theprz3m0]

Teoretycznie nie powinno, jednak bywają wyjątki. Jeżeli chodzi o twój sidebar, to pamiętaj, że sąsiaduje z news i jeżeli dasz margin to on zejdzie na dół, dlatego będziesz musiał zmniejszyć szerokość diva news, by się oba zmieściły obok siebie.