динамично меню

D

dgan1989

Registered
здравейте ,вадя от базата данни около 25 резултата ,които ги слагам в <ul> i <li> тагове и се подреждат ,но искам да позиционирам менюто и когато задам position:absolute и задам някакви параметри става много недъгаво менюто ,смисъл показва се само един резултат ,ако използвам relative пък остава празно разстояние долу на страницата ,смисъл мога да отида със скрола по-надолу без да има нищо .Някой да има идея как да го оправя,че съм зле с CSS-a ?
 
Зареди страницата в браузъра, отвори и копирай изходния код, покажи ни го, и вероятно някой ще може да ти помогне. Така само гадаеме. Пробвах нещо, но явно при теб е различно:

HTML: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<style>
			ul {position: absolute; top: 20px; left: 5px;}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="">Начало</a></li>
			<li><a href="">Продукти</a></li>
			<li><a href="">Услуги</a></li>
			<li><a href="">За нас</a></li>
			<li><a href="">Контакти</a></li>
		</ul>
	</body>
</html>
 
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="container">
<h1>Advice</h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Predictions</a></li>
<li class="selected"><a href="#">Good</a></li>
</ul>

<ul class="menu2">
<li><a href="countries.php?id=1">Argentina</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=4">Belgium</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=6">Brazil</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=7">Bulgaria</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=10">Croatia</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=12">Czech Republic</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=13">Denmark</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=14">England</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=16">France</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=18">Germany</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=19">Greece</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=22">Italy</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=29">Poland</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=30">Portugal</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=31">Romania</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=32">Russia</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=33">Scotland</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=35">Spain</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=36">Sweden</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=37">Switzerland</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=38">Holland</a></li>

</ul><ul class="menu2">
<li><a href="countries.php?id=39">Turkey</a></li>

</ul><div id="prediction"><ul class="pred"><li>Boca Juniors - River Plate</li></ul></div>
<div id="prediction"><ul class="pred"><li>Racing - Velez</li></ul></div>
<div id="prediction"><ul class="pred"><li>Liverpool - Man Utd</li></ul></div>
<div id="prediction"><ul class="pred"><li>Cska Sofia - Levski</li></ul></div>
<div id="prediction"><ul class="pred"><li>Botev Plovdiv - Lokomotiv Plovdiv</li></ul></div>
<div id="prediction"><ul class="pred"><li>Inter - Juventus</li></ul></div>
<div id="prediction"><ul class="pred"><li>Arsenal - Chelsea</li></ul></div>
<div id="prediction"><ul class="pred"><li>WBA - Swansea</li></ul></div>
<div id="prediction"><ul class="pred"><li>Paris SGT - Lyon</li></ul></div>
<div id="prediction"><ul class="pred"><li>Rennes - Nice</li></ul></div>
<div id="prediction"><ul class="pred"><li>Barcelona - Real Madrid</li></ul></div>
</div>

</body>
</html>



от diva s id= prediction виждам само последния елемент ,сега ще копирам и CSS кода
h1{
font:2em Georgia;
}
.menu{position: absolute;
top:40px; left:300px;width: 700px;
font:1em Georgia;
list-style: none;
padding: 0;
margin: 0;background: #fff;text-transform: uppercase;
border-bottom: 3px solid #000;
}.menu li{
display: inline-block;
padding: 5px 15px 4px 15px;
}.menu li a{
color:#000;
text-decoration: none;
line-height: 1.6em;
}.menu li a hover{
color:maroon;
}.menu li a.selected{
background-color: orange;
}#container{
width: 800px;
position: relative;
}
body{
background-color: #aaa;
}
#prediction ul{
position: absolute;
bottom: 100px;left:500px;display: inline;
}.pred li {
background: red;
}
.menu2{
padding: 0;
margin:0;
width: 150px;
border:1px solid #aaa;
}.menu2 li a{
display: block;
padding: 5px;
border:2px solid #ddd;
border-bottom: 1px solid #aaa;
}
.menu2 li a:hover{
background-color: orange;
}
 
Основната ти грешка беше, че имаш повече от един div елемент с еднакво id. Това скриваше голяма част от менюто в div id=predicton

За менюто ляво - има ли причина всяка една държава, да е в отделен списък само с един елемент? Аз ги обединих всичките и стана по-пригледно.

HTML: 
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="container">
		<h1>Advice</h1>
		<ul class="menu"> 
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact us</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Predictions</a></li>
			<li class="selected"><a href="#">Good</a></li>
		</ul>

		<ul class="menu2">
			<li><a href="countries.php?id=1">Argentina</a></li>
			<li><a href="countries.php?id=4">Belgium</a></li>
			<li><a href="countries.php?id=6">Brazil</a></li>
			<li><a href="countries.php?id=7">Bulgaria</a></li>
			<li><a href="countries.php?id=10">Croatia</a></li>
			<li><a href="countries.php?id=12">Czech Republic</a></li>
			<li><a href="countries.php?id=13">Denmark</a></li>
			<li><a href="countries.php?id=14">England</a></li>
			<li><a href="countries.php?id=16">France</a></li>
			<li><a href="countries.php?id=18">Germany</a></li>
			<li><a href="countries.php?id=19">Greece</a></li>
			<li><a href="countries.php?id=22">Italy</a></li>
			<li><a href="countries.php?id=29">Poland</a></li>
			<li><a href="countries.php?id=30">Portugal</a></li>
			<li><a href="countries.php?id=31">Romania</a></li>
			<li><a href="countries.php?id=32">Russia</a></li>
			<li><a href="countries.php?id=33">Scotland</a></li>
			<li><a href="countries.php?id=35">Spain</a></li>
			<li><a href="countries.php?id=36">Sweden</a></li>
			<li><a href="countries.php?id=37">Switzerland</a></li>
			<li><a href="countries.php?id=38">Holland</a></li>
			<li><a href="countries.php?id=39">Turkey</a></li>
		</ul>

		<div id="prediction">
			<ul class="pred">
				<li>Boca Juniors - River Plate</li>
				<li>Racing - Velez</li>
				<li>Liverpool - Man Utd</li>
				<li>Cska Sofia - Levski</li>
				<li>Botev Plovdiv - Lokomotiv Plovdiv</li>
				<li>Inter - Juventus</li>
				<li>Arsenal - Chelsea</li>
				<li>WBA - Swansea</li>
				<li>Paris SGT - Lyon</li>
				<li>Rennes - Nice</li>
				<li>Barcelona - Real Madrid</li>
			</ul>
		</div>
	</div>

</body>
</html>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе