Witam! Mam taki kod menu:

[HTML] pobierz, plaintext 
#left_menu { 
    float: left; 
    width: 240px; 
    margin:  15px 0 15px 5px; 
    padding: 5px; 
    background-color: #FFF; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    list-style: none; 
    display: block; 
} 
 
#left_menu li a { 
    display: block; 
    height: 20px; 
    margin: 4px 0 5px; 
    font-family: tahoma; 
    font-size: 11px; 
    font-weight: bold; 
    color: #000; 
    text-decoration: none; 
    padding: 5px; 
    line-height : 20px; 
} 
 
#left_menu li a:hover { 
    background: #0b4774;
	color: #FFF;  	
	margin: 0 auto;
	padding: 5px; 
    margin: 4px 0 5px; 
}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<ul id="left_menu">
	<li><a class="menu" href="index.php">Strona główna</a></li>';
	<li><a class="menu" href="#">Menu #2</a></li>
        <li><a class="menu" href="#">Menu #3</a></li>
</ul>
 
<ul id="left_menu">
	<li><a class="menu" href="index.php">Strona główna </a></li>';
	<li><a class="menu" href="#">Menu #2 2 </a></li>
        <li><a class="menu" href="#">Menu #3 2 </a></li>
</ul>
[HTML] pobierz, plaintext 

Problem w tym, że mam te dwa bloki, ale są one obok siebie. Co zrobić, by były jeden pod drugim?
Dodanie display:block; do #left_menu nie działa.

Dodaj do css'a:

[CSS] pobierz, plaintext 
ul{
clear:both;
}
[CSS] pobierz, plaintext 

To sie naprawiło, ale kolejna rzecz sie zepsuła.

Po lewej mam te menu, a po prawej mam tak jakby główne okno z informacjami i jest ono generowane coś jak system newsow.


CSS:

[HTML] pobierz, plaintext 
.right_side { 
    width: 600px; 
    background: #fefefe; 
    color:#2085d3; 
    text-align:left;
	margin: 15px 5px 5px 15px;
    float:right; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -khtml-border-radius: 3px; 
	padding: 5px; 
	display:block;
} 
 
.right_title
{
    width: 600px; 
    height: 25px; 
    color: #000; 
    text-align: center; 
    padding-top: 10px; 
	font-weight: bold; 
    background : url('../images/cellpic.gif'); 
}
 
.right_content {
    margin-top: 8px;
    margin-left: auto; 
    margin-right: auto; 
    text-align: left	; 
    height: auto; 
    max-width: 625px;
    color: #000;
}
 
.right_author {
    width: auto; 
    height: 15px; 
    color: #a1a1a1; 
    padding-top: 5px; 
    background-color: #f1f1f1; 
    float: right; 
    padding-left: 6px; 
    padding-right: 6px; 
    margin-top: 15px; 
    font-size: 10px;
}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div class="right_side">	  
	<div class="right_title">Tytuł</div>
	<div class="right_content">Tresc</div>
	<div class="right_author">Autor</div>
</div>
<div class="right_side">	  
	<div class="right_title">Tytuł#2</div>
	<div class="right_content">Tresc#2</div>
	<div class="right_author">Autor#2</div>
</div>
[HTML] pobierz, plaintext 

I teraz ta cała treść spadła w dół i nie jest na równi z menu które jest po lewej, tylko jest menu, po prawe pusto i jak się kończy menu to dopiero pokazuje się główna treść.

To zamiast clear:both ,daj clear:left;

Niestety, nic nie pomogło.

Dobra to powinno pomóc:

ul{
display:block;
clear:left;

}

To wróciło do wersji początkowej - menu obok siebie.


Link: http://goldenx2.unixstorm.org/


ul{
display:block;
clear:left;

}

niestety, nie działa.

Zostaw tak jak jest i zmień :

[CSS] pobierz, plaintext 
.right_side {
    -moz-border-radius: 3px 3px 3px 3px;
    background: none repeat scroll 0 0 #FEFEFE;
    color: #2085D3;
    display: inline-block;
    margin: 15px 5px 5px 15px;
    padding: 5px;
    text-align: left;
    width: 600px;
}
[CSS] pobierz, plaintext 

To tak doraźnie-ale działa.
Poza tym masz błedną strukturę w ul:
Masz

[HTML] pobierz, plaintext 
 <ul>
<div></div>
<li></li>
</ul>
[HTML] pobierz, plaintext 

Wewnątrz ul -nie można zagnieżdżać elementów takie jak <div>

To też nie działa jak powinno, ale zrobiłem już po swojemu. Wszystkie menu dałem na jeden UL i oddziela je tylko tytuł, wydaje mi się, iż wygląda równie dobrze, a nawet lepiej.

Co do zagnieżdżania to już jutro poprawię (span mogę dać między UL?), dzięki wielkie!

Niestety żadnych znaczników nie można użyć, tylko wewnątrz<li>.
http://www.kurshtml.edu.pl/html/wykaz,tekst.htmlTe menu musiałoby być zrobione miej więcej w takiej hierarchii:

[HTML] pobierz, plaintext 
<div>
<div>TITLE1</div>
<ul>
<li></li>
<li></li>
</ul>
</div>
[HTML] pobierz, plaintext 

Jakbyś mógł, to pomóż też z tym nagłówkiem, aby nie było tego div'a. ;/

Aktualnie mam tak:

[HTML] pobierz, plaintext 
<ul id="left_menu">
		<div class="main_left_nav">
			<div class="main_left_nav_title">Menu</div>
		</div>
		<li><a class="menu" href="index.php">Strona główna</a></li>
</ul>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.main_left_nav  { 
	background : url('../images/cellpic.gif'); 
	height : 30px; 
	width : 100%; 
	margin-bottom: 5px;
	display:block;
	text-align : center; 
 } 
.main_left_nav_title  { 
	color : #000000; 
	font-weight : bold; 
	text-align : center; 
	line-height : 30px; 
	vertical-align : middle; 
 } 
[HTML] pobierz, plaintext 

Spróbuj tak:

[HTML] pobierz, plaintext 
<div class="main_left_nav">
<div class="main_left_nav_title">Menu</div>
<ul id="left_menu">
<li><a class="menu" href="index.php">Strona główna</a></li>
</ul>
</div>
[HTML] pobierz, plaintext