Foros del Web » Creando para Internet » CSS »

menu ul horizontal no le salen las imágenes

Estas en el tema de menu ul horizontal no le salen las imágenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/09/2009, 06:16
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
menu ul horizontal no le salen las imágenes

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.
  #2 (permalink)  
Antiguo 07/09/2009, 06:29
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: menu ul horizontal no le salen las imágenes

a ver, lo suyo sería que las imágenes formaran parte de los elementos li, que estos les dieras margin y de esa forma la iamgen quedaría despejada.

Si puedes también pon la url de la web que de esa forma se podrá ayudar mejor.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 07/09/2009, 08:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menu ul horizontal no le salen las imágenes

Hola
La propiedad "list-style-type" se debe asignar a los elementos de la lista, no a la lista (a los "li" y no a "ul")

Por otra parte, y sin probar tu código, recuerda que los elementos flotados no hacen crecer a su contenedor.
Coloca el "list-style-type" a los "li" y a los "ul.menu_horizontal li a" asigna un 'padding' suficiente y podrás ahorrarte el "text-align: center" si los valores izq/dch y arriba/abajo son iguales para cada par.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 08/09/2009, 06:48
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: menu ul horizontal no le salen las imágenes

Hola.

He decidido volver a empezar desde el principio.

Lo primero es lo primero. Si no consigo sacar un círculo al lado del li, creo que voy mal.

Con mi código:

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; 
	}
	
	ul.menu_horizontal li {
		float: left; 
		list-style-position: inside;
		list-style-type: circle;
		border: 1px solid red;
		padding: 30px;
		margin: 0px;
	}
	
	ul.menu_horizontal li a {
		display: block;
		color: green;
	}
	
</style>      
   </head>
   <body>
     <div>
		 <ul class="menu_horizontal">
			<li><a>uno</a></li>
			<li><a>dos</a></li>
			<li><a>tres</a></li>
			<li><a>cuatro</a></li>
		</ul>
     </div>
   </body>
</html>
sale el círculito en el Firefox, en el IE (pruebo en la v. 8) no sale y no tengo la menor idea de por qué.

Después, ya lo iré complicando con lo que haga falta.

hades87, esta página es de una intranet, así que no está publicada, por eso os coloqué aquí el código.

kseso?, gracias por tus acertadísimos tips. Como puedes ver, he tratado de seguir tu consejo, aunque sigo sin acertar de pleno en cómo se hace esto...

Si alguien tuviese alguna referencia a un código de ejemplo que funcionase en el IE, le agradecería que pusiese alguna reseña al mismo...

En cuanto tenga solucionada esta parte, seguiré a partir de aquí metiendo las <img> entre cada li.


Muchas gracias a todos.



Un saludo.
  #5 (permalink)  
Antiguo 08/09/2009, 07:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menu ul horizontal no le salen las imágenes

Si vas a utilizar una imagen, ¿por qué no colocarla como fondo del enlace y así poder jugar con el "hover"?
Mira si este comienzo de lista simple te puede servir:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding: 0; border: 0; outline: none;}
  7. ul {margin: 20px;}
  8. ul li {
  9.   list-style-type: none;
  10.   float: left;
  11. }
  12. ul li a {
  13.   display: block;
  14.   padding: 5px 20px 5px 20px;
  15.   background: #FFFF99 url(http://static.forosdelweb.com/images/smilies/borracho.gif) no-repeat 1px center;
  16.   border: 1px solid #444;
  17.   text-decoration: none;
  18. }
  19. ul li a:hover {
  20.   background: #FFCC00 url(http://static.forosdelweb.com/images/smilies/biggrin.gif) no-repeat 1px center;
  21.   color: #006600;
  22. }
  23. </head>
  24.   <ul class="menu_horizontal">
  25.             <li><a href="#">uno</a></li>
  26.             <li><a href="#">dos</a></li>
  27.             <li><a href="#">tres</a></li>
  28.             <li><a href="#">cuatro</a></li>
  29.   </ul>
  30. </body>
  31. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:05.