Hola.
Sigo con mis (recurrentes) problemas en esto del mundillo de las CSS.
En este momento, lo que me tiene preocupado es lo siguiente:
Tengo que hacer un menú superior en horizontal. Este menú tiene que ser de una forma determinada, puesto que queremos sustituir el diseño que hay por algo lo más parecido posible pero mejor hecho (creo que no soy el 100% indicado para esto, pero bueno...).
El caso es que tengo que cada li debe tener una imágen al lado y entre cada dos li y al principio y al final de la tabla, debe de haber otra:
<separador><li con list-style-image><separador><li con list-style-image><separador> ...
Tengo este código y los problemas siguientes:
Código:
<html>
<head>
<title>Enter the title of your HTML document here</title>
<style type="text/css">
ul.menu_horizontal {
border: 1px solid blue;
text-align: center;
list-style-image:url('./img/point_blue.gif');
}
ul.menu_horizontal li {
position:relative;
float: left;
list-style-position:inside;
border: 1px solid red;
}
ul img{
float:left;
border: 0 none;
width:5px;
height:11px;
}
ul.menu_horizontal li a {
display: block;
color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
<ul class="menu_horizontal">
<img src="img/blue_box.gif"/>
<li><a>uno</a></li>
<img src="img/blue_box.gif"/>
<li><a>dos</a></li>
<img src="img/blue_box.gif"/>
<li><a>tres</a></li>
<img src="img/blue_box.gif"/>
<li><a>cuatro</a></li>
<img src="img/blue_box.gif"/>
</ul>
</div>
</body>
</html>
1.- El menú no me muestra la imágen point-blue.gif cuando floto los li a la izquierda. Si pongo el mismo menú en vertical (sin float) lo muestra sin problemas. La ruta de la imágen está bien y no hay problema ninguno con ella. Incluso quitándole los tags <img> del medio y poniendo estilo inside u outside, no consigo que se vean, ni con margen, ni padding, ni nada... (¿¿dónde demonios mete estas cosas el flujo del navegador??)
2.- La primera imágen blue_box me la coloca 'bien' pero el resto de imágenes las mete dentro del li inmediatamente anterior. No tengo ni idea de si esta construcción es correcta o no, por lo que podría tener que cambiarlo todo por una estructura que no sea una <ul>.
3.-Si no pudiese hacerse así, ¿qué me recomendaríais? ¿una tabla? ¿un div con imágenes y links separados?
Muchas gracias por todo.
Un saludo.