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ó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ña aplicación WEB que tiene el objetivo de agilizar el proceso de búsqueda de información relacionada con los Clientes de la Empresa Integral de Servicios Automótriz (EISA) Guantá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ón que agilice el proceso de bú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áxima de que estos últimos son la razón de ser de la <font class="importante">Organización</font>. </p>
</div>
<div class="story">
<h3>Importante </h3>
<p>Está aplicació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ón de los clientes.</p>
<p>La primera opción <font class="importante">Nuevo Cliente </font> es para adicionar la información correspodiente, tengase en cuenta que para el código del cliente solamente introducirá dígitos, aunque la aplicación valida en todo momento la información a introducir, es importante tener en cuenta lo que se está 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ón (<font class="importante">Buscar</font>) es para realizar la búsqueda de información del cliente. Se introduce el código del mismo y la aplicación mostrará todo lo relativo a dicho cliente. Nombre del Cliente, Nombre de cada uno de los compradores, así como sus correspondientes números de identidad.</p>
<p>La opción <font class="importante">Actualizar</font> se utiliza para el caso que sea necesario cambiar los datos relativos a algún cliente, ya que es posible que cambie el nombre del mismo, así como el nombre de uno o varios compradores y sus respectivos números de identidad.</p>
<p>Por su parte la opció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ó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.