Pregunta:
Fecha: 03-04-2015 21:51:02
(En Español)
Estoy haciendo un menu por medio de una lista.
A cada opción (item) le quiero poner una imagen a la izquierda, entonces personalizo a la viñeta colocandole una imagen.
Ej: list-style-image:url(../img/web/inicio.png);
Pero no me muestra la imagen y la ruta de las imágenes esta bien.
Por otro lado, he colocado a la lista dentro de una tabla invisible porque cuando escribo algo me queda pegado al menú del lado derecho y no se como hacer con el css para que cualquier contenido quede debajo del menu y no pegado.
No utilizo ningún editor al estilo de dreamweaver o semejante, creo que eso me da una desventaja.
Les dejo los códigos correspondientes para que me digan en donde me estoy equivocando.
El CSS lo carga bien, esta en otro archivo la carga del css... no en menu.php
creo que el problema esta en: display pero no sé como resolverlo
* al final del post dejo un ejemplo mas sencillo para poderlo resolver
menu.php
CSS menu.css
Código fuente de lo que se ve en la pagina
He estado probando con algo minimalista
prueba_menu.php
si le quito el li { display: inline-block;} si se ve las imágenes, pero los items se presentan uno debajo del otro y no tiene el formato o comportamiento de un menu horizontal
Les agradezco mucho por la atención.
Que tengan un buen dia
Saludos Votos: 0 - Respuestas: 10 - Vistas: 18 Compartir en: Google Facebook Twitter LinkedIn Link
Problema con viñetas, con imágenes y contenido[Resuelta]
Hola a todosEstoy haciendo un menu por medio de una lista.
A cada opción (item) le quiero poner una imagen a la izquierda, entonces personalizo a la viñeta colocandole una imagen.
Ej: list-style-image:url(../img/web/inicio.png);
Pero no me muestra la imagen y la ruta de las imágenes esta bien.
Por otro lado, he colocado a la lista dentro de una tabla invisible porque cuando escribo algo me queda pegado al menú del lado derecho y no se como hacer con el css para que cualquier contenido quede debajo del menu y no pegado.
No utilizo ningún editor al estilo de dreamweaver o semejante, creo que eso me da una desventaja.
Les dejo los códigos correspondientes para que me digan en donde me estoy equivocando.
El CSS lo carga bien, esta en otro archivo la carga del css... no en menu.php
creo que el problema esta en: display pero no sé como resolverlo
* al final del post dejo un ejemplo mas sencillo para poderlo resolver
menu.php
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<ul id="nav">
<?php if (isAutenticado()): ?>
<li id="icon_inicio"><a href="<?php echo BASE_URL ?>index.php">Inicio</a>
<ul>
<li> <a href="#"><?php echo $_SESSION["usuario"] ?></a><ul>
<li><a href="#">Perfil</a></li>
<li><a href="#">Otro</a></li>
<li id="icon_logout"><a href="<?php echo BASE_URL ?>acciones/logout.php">Cerrar sesión</a></li>
</ul></li>
<li><a href="#">Otro</a></li>
</ul>
</li>
<li><a href="#">Administración</a><ul>
<li><a href="#">Usuarios</a><ul>
<li><a href="#">Listar</a></li>
<li><a href="#">Crear</a></li>
</ul>
</li>
<li><a href="<?php echo BASE_URL.DIR_ADMIN ?>/cambiar_estado_web.php">Cambiar estado web - Onine ON/OFF </a></li>
<?php else: ?>
<li><a href="<?php echo BASE_URL.DIR_USUARIO ?>/login.php">Iniciar sesión</a></li>
<li><a href="<?php echo BASE_URL.DIR_USUARIO ?>/registro.php">Registro de usuario</a></li>
<?php endif; ?>
</ul>
</td>
</tr>
</table>
CSS menu.css
/*
Created on : 12/03/2015
Author : WALTER
*/
/* MENU */
//Iconos graficos
#icon_inicio{ list-style: url("../img/menu/inicio.png") }
#icon_logout{ list-style: url("../img/menu/logout.png") }
#nav {
background: #e5e5e5;
float: left;
margin: 0; padding: 0;
border: 1px solid white;
border-bottom: none;
display: inline-block;
}
#nav li a, #nav li {
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
#nav li ul li a {
width: 150px;
display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
Código fuente de lo que se ve en la pagina
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>.:: INTRANET: Inicio ::.</title>
<link href="http://localhost/intranet/img/ico.ico" rel="shortcut icon" />
<link href="http://localhost/intranet/css/estilo.css" rel="stylesheet" type="text/css"/>
<link href="http://localhost/intranet/css/menu.css" rel="stylesheet" type="text/css"/>
<script src="http://localhost/intranet/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost/intranet/js/jquery.effects.core.js" type="text/javascript"></script>
<script src="http://localhost/intranet/js/scripts.menu.js" type="text/javascript" ></script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<ul id="nav">
<li id="icon_inicio"><a href="http://localhost/intranet/index.php">Inicio</a>
<ul>
<li> <a href="#">walter</a><ul>
<li><a href="#">Perfil</a></li>
<li><a href="#">Otro</a></li>
<li id="icon_logout"><a href="http://localhost/intranet/acciones/logout.php">Cerrar sesión</a></li>
</ul></li>
<li><a href="#">Otro</a></li>
</ul>
</li>
<li><a href="#">Administración</a><ul>
<li><a href="#">Usuarios</a><ul>
<li><a href="#">Listar</a></li>
<li><a href="#">Crear</a></li>
</ul>
</li>
<li><a href="http://localhost/intranet/adm/cambiar_estado_web.php">Cambiar estado web - Onine ON/OFF </a></li>
</ul>
</td>
</tr>
</table>
<h1 style="display: inline-block"> INTRANET: </h1><font size="5"> Inicio</font><br/>
<<< Aquí va el FOOTER >>>
</body>
</html>
He estado probando con algo minimalista
prueba_menu.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu Prueba</title>
<style type="text/css">
ul {list-style-type: none;}
li { display: inline-block;}
#ico_inicio{ list-style-image:url('../img/menu/inicio.png');}
#ico_logout{ list-style-image:url('../img/menu/logout.png');}
#ico a{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-decoration:none; color:#047;}
#ico a:hover{text-decoration:underline; color:#C00;}
</style>
</head>
<body>
<ul>
<li id="ico_inicio"><a href="#">Inicio</a></li>
<li id="ico_logout"><a href="#">Logout</a></li>
<li><a href="#">perfil</a></li>
<li><a href="#">administracion</a></li>
<li><a href="#">contenidos</a></li>
</ul>
</body>
</html>
si le quito el li { display: inline-block;} si se ve las imágenes, pero los items se presentan uno debajo del otro y no tiene el formato o comportamiento de un menu horizontal
Les agradezco mucho por la atención.
Que tengan un buen dia
Saludos Votos: 0 - Respuestas: 10 - Vistas: 18 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 04-04-2015 18:02:39 El inline te saca las viñetas del <li> normal que las imágenes no se vean. Tendrías que crear un <div> nuevo, y a este agregarle un background-image, le das un ancho y alto para que se visualice dicha imagen y listo. Votos: 1 - Link respuesta
-
Fecha: 04-04-2015 18:34:19 Natalia
Muchas gracias por tu respuesta
Lamentablemente no sabría como hacerlo
Habrá algún ejemplo?
Saludos Votos: 0 - Link respuesta -
Fecha: 04-04-2015 18:51:34
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> li { float: left; display: inline; } .icon-image { float: left; background: url(img/icon.jpg) no-repeat; /* Aquí agrega una imagen de 20x20*/ width: 20px; /* El ancho y alto son las misma proporciones que la imagen*/ height: 20px; margin-left: 10px; } </style> </head> <body> <ul> <div class="icon-image"></div><li>Inicio</li> <div class="icon-image"></div><li>Inicio 2</li> <div class="icon-image"></div><li>Inicio 3</li> </ul> </body> </html>
Espero poder haber entendido tu problema, porque me quedaron dudas si lo entendí bien. Saludos Votos: 2 - Link respuesta -
Fecha: 04-04-2015 19:19:04 Si, casi sería eso.
Cada item tendría una imagen distinta, por lo tanto me parece quevdeberis usar id en vez de clases?
Gracias por tu tiempo Natalia Votos: 0 - Link respuesta -
Fecha: 04-04-2015 19:21:39 Si sería lo mismo un id por cada elemento, si se repite el elementos se usa un class. De nada, suerte. Votos: 1 - Link respuesta
-
Fecha: 05-04-2015 07:03:22 muchas gracias Txema
también lo probare y comentare
saludos Votos: 0 - Link respuesta -
Fecha: 05-04-2015 12:12:18 si tengo por ejemplo 20 imágenes tengo que repetir 20 veces este codigo completom cambiando
background: url(img/icon.jpg) por el nombre de la imagen?
#icon-image-XX { width: 20 px; height: 20 px; float: left; background: url(img/icon.jpg) no - repeat; /* Reserva espacio para la imagen de 20x20*/ width: 20px; height: 20px; margin: 0 10px; // 10 px a los costados }
hay alguna manera que solo cambie el nombre de las imagenes y no repetir todo?
saludos Votos: 0 - Link respuesta -
Fecha: 05-04-2015 17:30:49 Txema
si me interesa tu ultima sugerencia.
Creo que podría utilizar los iconos de allí.
Vere como aplicarlo en el ejemplo que he dado
Muchas gracias por tu interés en mi pregunta Votos: 0 - Link respuesta -
Fecha: 08-04-2015 05:09:53 Usando el código de Natalia, modifiqué algunas cosas, espero te sirvan.
En la parte del CSS, hacemos esto:
/* Creamos una clase "genérica" que servirá de contener a nuestras imágenes */ .icon-image { float: left; width: 20px; height: 20px; margin-left: 10px; } /* Luego creamos tantas clases como imágenes necesitemos usar */ .opcion1 { background: url(img/icon1.jpg) no-repeat; } .opcion2 { background: url(img/icon2.jpg) no-repeat; } .opcion3 { background: url(img/icon3.jpg) no-repeat; }
Luego en el código HTML, modificamos los elementos del menú de esta manera:
<ul> <div class="icon-image opcion1"></div><li>Inicio</li> <div class="icon-image opcion2"></div><li>Inicio 2</li> <div class="icon-image opcion3"></div><li>Inicio 3</li> </ul>
Como verás, el código se reduce y es más legible.
NOTA: Si aparecen dos respuestas publicadas es que algo ocurrió, porque publiqué una antes de esta y no aparecía. Votos: 2 - Link respuesta -
Fecha: 10-06-2015 04:46:25 Hola Walter, has podido resolver la pregunta? si es así agradecería indiques la pregunta como resuelta y comentes tu solución para futuros usuarios que lean este post.
Muchas gracias.
Saludos,
Fernando Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
