absolute positionirung block bereiche horizontal
mc_gee
- css
hallo leute!
ich versuche gerade über eine grafik(hintergrund für eine horizontales menü) 3 clickbare bereiche horizontal anzuordnen, hier der css code:
div#nav_main{
position:relative;
background:#Fea643 url(bilder/nav_main.png) no-repeat 0 0;
height:90px;
z-index:1;
}
ul#nav_features {
position:absolute;
top:15px;
left:325px;
margin:0;
width:440px;
height:50px;
background:transparent url(bilder/nav_features.png) no-repeat; }
ul#nav_features li{
display:list-item;
}
li#nav_home {
left:0px;
}
li#nav_prize {
left:150px;
}
li#nav_location {
left:300px;
}
li#nav_home a, li#nav_prize a, li#nav_location a {
display:block;
height:50px;
width:140px;
text-indent:-9999;
}
es sollte also die drei links nav_home nav_prize und nav_location horzontal über der grafik liegen und durch "inline nicht" in die nächste zeile rutschen sie liegen aber dann doch immer untereinander!! und aus den abgrenzungen des div bereichs heruas!!
hat da jemand vielleicht eine idee dazu??
hier noch der html code:
<!--2.Navigation -->
<div id="nav_main">
<h2>tools</h2>
<ul id="nav_features">
<li id="nav_home"><a href="#home">home</a></li>
<li id="nav_prize"><a href="#prize">Preise</a></li>
<li id="nav_location"><a href="#location">Location</a></li>
</ul>
</div>
danke im vorraus
Hi mc_gee,
1. Wenn man sich im Bereich XHTML/CSS noch nicht so sicher ist (das entnehm ich deinem posting), sollte man auf Spielchen mit position verzichten. Also nimm mal alle position, top, left und z-index aus deinen tags. Horizontale Ausrichtung / Zentrierung deines container divs mit html, body width: 100% und margin: obenpx auto untenpx auto für das div.
2. Zum eigentlichen Problem:
Deine <ul> sollte list-style: none bekommen, deine <li> float: left. display:list-item kann raus.
Gruß
Antipitch