Primero, buenas tardes ^^
Segundo: estoy teniendo muchisimos problemas a la hora de hacer un menu horizontal que a medida que añadas enlaces se vaya expandiendo desde el centro a los lados (justo como este ejemplo):
[img-borde-izq] Home · Descargas [der-borde-img]
[img-borde-izq] Home · Descargas · Calendario · Foro [der-borde-img]
Tengo el siguiente estilo CSS:
<style>
#nav_wrapper {
width: 800px;
max-width: 89.9%;
padding-left: 5.8%;
padding-right:5.8%;
border:1px solid black;
margin:0 auto;
}
.navigation {
background: url(../images/main_nav.png) repeat-x left top;
min-width:30%;
height: 53px;
border:1px solid red;
display:block;
list-style:none;
float:left;
margin: 0 auto;
}
.left {
background: url(../images/nav_left.png) no-repeat left top;
width: 14px;
height: 53px;
border: 1px solid green;
list-style:none;
float:left;
margin:0 auto;
}
.right {
background: url(../images/nav_right.png) no-repeat left top;
width: 14px;
height: 53px;
border: 1px solid green;
list-style:none;
float:left;
margin: 0 auto;
}
</style>
Y el siguiente HTML:
<ul id="nav_wrapper">
<li class="left"></li>
<li class="navigation"></li>
<li class="right"></li>
</ul>
Pero no consigo que se coloque en el centro y que se vaya expandiendo.. :S
¿Alguna idea? El CSS se repite mucho por que ya no sabía que hacer y puse cosas a lo loco ! ;)