Poner imagenes en menú

efelix · #1 (**permalink**) 25/03/2010, 06:35

Hola a todos.
Saludos
Tengo maqutada una página web con css. En el lado de la izquierda se encuentra el menú de navegación de la misma, al cual intento ponerle imágenes al lado del nombre de las opciones, pero hasta el momento la labor ha sido infructuosa.
La cuestión es que en el dreamweaver en la vista diseño las imágenes se ven al lado de las opciones, pero cuando cargo la página en el browser las mismas no salen.
He intentado algunas cosas, como por ejemplo, cambiar el valor del padding y el margin y entonces salen las imágenes, pero las líneas de división que hay entre cada opción de menú se corta, es como si la imagen empujara las líneas para ocupar ese lugar.
Aquí les pongo un pedazo del código de la css y también del fichero html al cual le aplico la css.
[CSS]
#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 2px solid #cccccc;
width: 100%;
background-image:url(img/banner13.jpg);
background-repeat:no-repeat;
height:100px;
}
#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #eeeeee;
border-right: 2px outset #ccc;
border-bottom: 2px outset #ccc;
border-top: 2px outset #ccc;
border-left: 2px outset #ccc;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
}
#navBar ul {a:link, #navBar ul a:visited {display: block;}
#navBar ul {
list-style:none;
margin: 0;
padding: 0;
line-height: 30px;
}

#navBar ul li.new {
list-style-image:url(img/home.png);
}

#navBar ul li.search {
list-style-image:url(img/search.png);
}

#navBar ul li.delete {
list-style-image: url(img/delete.png);
}

#navBar li {border-bottom: 1px solid #EEE;}
[/CSS]

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clientes EISA</title>
<link rel="stylesheet" href="css/2col_leftNav.css" type="text/css" />
</head>
<!-- The structure of this file is exactly the same as 2col_rightNav.html;
     the only difference between the two is the stylesheet they use -->
<body>
<div id="masthead"></div>
<!-- end masthead -->
<div id="content">
  
  <h2 id="pageName">Aplicaci&oacute;n WEB EISA Gtmo </h2>
  <div class="feature"> <img src="css/img/partespza.jpg" alt="Piezas de repuesto para autos" width="280" height="200" />
    <h3>Empresa Integral de servicios automotriz(eisa)</h3>
    <p> Esta es una peque&ntilde;a aplicaci&oacute;n WEB que tiene el objetivo de agilizar el proceso de b&uacute;squeda de informaci&oacute;n relacionada con los Clientes de la Empresa Integral de Servicios Autom&oacute;triz (EISA) Guant&aacute;namo. </p>
  </div>
  <div class="story">
    <h3>Un poco de Historia</h3>
    <p> EISA es una Empresa que cuenta con una gran cantidad de Clientes, debido al <font class="importante">Objeto Social </font>de la misma. Por lo que resulta de vital importancia el contar con una aplicaci&oacute;n que agilice el proceso de b&uacute;squeda de los datos de los clientes, en aras de ganar en tiempo y brindar un servicio de calidad a los mismos. Aludiendo a la m&aacute;xima de que estos &uacute;ltimos son la raz&oacute;n de ser de la <font class="importante">Organizaci&oacute;n</font>. </p>
    </div>
  <div class="story">
    <h3>Importante </h3>
    <p>Est&aacute; aplicaci&oacute;n cuenta con cuatro opciones fundamentales:</p>
    <p><ol>Opciones:
	<li>Nuevo Cliente </li>
	<li>Buscar</li>
	<li>Actualizar</li>
	<li>Borrar</li>
	</ol>
	</p>
	<p>Con estas cuatros opciones queda resumida las principales operaciones a realizar con la informaci&oacute;n de los clientes.</p>
	<p>La primera opci&oacute;n <font class="importante">Nuevo Cliente </font> es para adicionar la informaci&oacute;n correspodiente, tengase en cuenta que para el c&oacute;digo del cliente solamente introducir&aacute; d&iacute;gitos, aunque la aplicaci&oacute;n valida en todo momento la informaci&oacute;n a introducir, es importante tener en cuenta lo que se est&aacute; tratando de introducir en la base de datos, para evitar que la misma pierda fiabilidad. Para el resto de los datos sucede lo mismo en todo momento se valida la cantidad y el formato de los caracteres a introducir.</p>
	<p>La segunda  opci&oacute;n (<font class="importante">Buscar</font>) es para realizar la b&uacute;squeda de informaci&oacute;n del cliente. Se introduce el c&oacute;digo del mismo y la aplicaci&oacute;n mostrar&aacute; todo lo relativo a dicho cliente. Nombre del Cliente, Nombre de cada uno de los compradores, as&iacute; como sus correspondientes n&uacute;meros de identidad.</p>
	<p>La opci&oacute;n <font class="importante">Actualizar</font> se utiliza para el caso que sea necesario cambiar los datos relativos a alg&uacute;n cliente, ya que es posible que cambie el nombre del mismo, as&iacute; como el nombre de uno o varios compradores y sus respectivos n&uacute;meros de identidad.</p>
	<p>Por su parte la opci&oacute;n  <font class="importante">Borrar </font>permite eliminar de la base de datos a aquel cliente que no necesite de nuestros servicios o que por alguna raz&oacute;n decida cambiar de proveedor. </p>
  </div>
</div>
<!--end content -->
<div id="navBar">  
  <div id="sectionLinks">
    <ul>
      <li class="new"><a href="valida.htm" target="_self">Nuevo Cliente</a></li>
      <li class="search"><a href="busqueda.php" target="_self">Buscar</a></li>
      <li><a href="#">Actualizar</a></li>
      <li class="delete"><a href="#">Borrar</a></li>
      <li></li>
      <li></li>
    </ul>
  </div>

Muchas Gracias.

Impostor · #2 (**permalink**) 25/03/2010, 07:29

Hola efelix,

una de las cosas que pueden estar fallando es la forma en la que escribes la ruta de la imagen, prueba a cambiar

Código CSS:

Ver originalurl(img/search.png);

por esto

Código CSS:

Ver originalurl(../img/search.png);

y si sigue sin funcionar, prueba con la url completa,algo como

Código CSS:

Ver originalurl(http://www.tusitio.com/img/search.png);

Saludos¡¡

efelix · #3 (**permalink**) 25/03/2010, 08:01

Impostor muchas gracias por tu respuesta.
Pero el problema no está ahí, no sé si habrás leído bien el tema que publico, pero haciendo varias pruebas me di cuenta que el problema estriba en algo de los márgenes. Por ejemplo si le pongo esto:
[CSS]
#navBar ul li.new {
list-style-image:url(img/home.png);
margin: 15px;
}
[/CSS]
La imagen si sale en el browser (Mozilla Firefox) pero me corta la linea que didivide cada una de las opciones de menú, es decir se crea un fecto muy feo. Por ejemplo deje ver si logro hacerlo de manera visual para que me entiendas mejor:
___________
Nuevo Cliente
___________
Buscar
___________
Actualizar
___________
Borrar
___________

Estas son las opciones del menú del site. Que están en un div que tiene como id = navBar, ahora cuando agrego el margen con x cantidad de pixeles, la imagen sale pero queda de esta forma. Supón que al lado de cada menú sale la imagen:
________
img Nuevo Cliente
________
img Buscar
________
img Actualizar
________
img Borrrar

Espero me hayas entendido ahora, es como si la imagen empujara la línea que ocupa todo el ancho del div.
Espero que hayas entendido.
Muchas Gracias.

alexk · #4 (**permalink**) 25/03/2010, 09:20

efelix cuando se trata de imagenes el problema solo el codigo no nos vale... ni sabemos donde esta la imagen como indica Impostor y mucho menos sabemos sus dimenciones...
pero bueno te recomiendo usar un background para los li

Código CSS:

Ver original#navBar ul li{padding-left:20px;/*-este padding izquierdo es el ancho de la viñeta-*/}
#navBar ul li.new{background:url(img/home.png) no-repeat;}
#navBar ul li.search{background:url(img/search.png) no-repeat;}
#navBar ul li.delete{background:url(img/delete.png) no-repeat;}

efelix · #5 (**permalink**) 25/03/2010, 14:28

alexk, muchas gracias por tu respuesta, pero como ocurrió con el caso de impostor me parece que no he sido bien entendido. El problema no estriba en que las imagenes no aparecen en el menú, sino el efecto, para mi indeseado, que se provoca cuando las mismas aparecen. Las imágenes en si son ficheros png que tienen un tamaño de 16x16 y están guardadas en una carpeta denominada img que, por supuesto, está dentro de la carpeta raíz del sitio.
Para ello uso posición relativa a la raíz del sitio, esto no tiene ningún problema.
En la respuesta que le di a impostor lo que trataba de explicar era el efecto indeseado que se producia, lo que parece que el poner la palabara imagen en vez de la imagen en si misma se prestó para la confusión.
Deja ver si me entiendes. El id navBar, el cual se lo aplico a una etiqueta div, que es la que contiene el menú de navegación que aparece a la izquierda en el sitio, tiene 4 opciones, las cuales están separadas por una línea, como suele hacerse en casí todos las opciones de navegación de los sitios.
Cuando coloco las imagenes estás desplazan hacia la derecha la línea de división, dejando un espacio entre la línea i la imagen, por ejemplo. Imagina que div id=navBar tiene un ancho determinado, son cuatro opciones, cada una de ellas separadas por una línea, cuando se pone la imagen al lado de cada una de las opciones correspondientes se desplaza dicha línea hacia la derecha.
No sucede como en otras sitios donde la imagen conjuntamente con el texto foman parte del link de navegación, cuando pasas el puntero por encima de las opciones, según las pseudoclases definidas, el efecto de cambio de color de a:visited, a:hover, a:link, a:hover solo afecta el texto y no a la iamgen correspondiente a la opción de menú que se trate.
Muchas Gracias reiteradas.
Espero me hayas entendido.

efelix · #6 (**permalink**) 25/03/2010, 14:32

alexk, muchas gracias por tu respuesta, pero como ocurrió con el caso de impostor me parece que no he sido bien entendido. El problema no estriba en que las imagenes no aparecen en el menú, sino el efecto, para mi indeseado, que se provoca cuando las mismas aparecen. Las imágenes en si son ficheros png que tienen un tamaño de 16x16 y están guardadas en una carpeta denominada img que, por supuesto, está dentro de la carpeta raíz del sitio.
Para ello uso posición relativa a la raíz del sitio, esto no tiene ningún problema.
En la respuesta que le di a impostor lo que trataba de explicar era el efecto indeseado que se producia, lo que parece que el poner la palabara imagen en vez de la imagen en si misma se prestó para la confusión.
Deja ver si me entiendes. El id navBar, el cual se lo aplico a una etiqueta div, que es la que contiene el menú de navegación que aparece a la izquierda en el sitio, tiene 4 opciones, las cuales están separadas por una línea, como suele hacerse en casí todos las opciones de navegación de los sitios.
Cuando coloco las imagenes estás desplazan hacia la derecha la línea de división, dejando un espacio entre la línea i la imagen, por ejemplo. Imagina que div id=navBar tiene un ancho determinado, son cuatro opciones, cada una de ellas separadas por una línea, cuando se pone la imagen al lado de cada una de las opciones correspondientes se desplaza dicha línea hacia la derecha.
No sucede como en otras sitios donde la imagen conjuntamente con el texto foman parte del link de navegación, cuando pasas el puntero por encima de las opciones, según las pseudoclases definidas, el efecto de cambio de color de a:visited, a:hover, a:link, a:hover solo afecta el texto y no a la iamgen correspondiente a la opción de menú que se trate.
Muchas Gracias reiteradas.
Espero me hayas entendido.