Hola Ignacio,
he estado probando tu código,
utilizando el :before, :after no consigo posicionar el menú bien además de que
no se ve en ie.
Creo que es más sencillo poniendo las imágenes de los cuadrados como fondo del
div navegador y del navegador ul y flotándolos a la izquierda, he hecho una
prueba parece que funciona bien.
#navegador {
margin: 0.2em 0em;
padding-left:30px;
background: url(/imagenes/cabecera/cuadradito.gif) left top no-repeat;
float:left;
}
#navegador ul {
margin: 0px 10px;
padding:0 40px 0 0;
float:left;
background: url(/imagenes/cabecera/cuadradito.gif) right top no-repeat;
}
Saludos
-----Mensaje original-----
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] nombre de Ignacio Fortea
Enviado el: miércoles, 18 de octubre de 2006 10:14
Para: 'Ovillo, la lista de CSS en castellano'
Asunto: Re: [Ovillo] Problemas con menu horizontal
Hola Adriana,
Gracias por contestar.
Le he quitado el padding como me has dicho y lo que sucede, es que el primer
enlace se mueve debajo de la imagen, pero no llega a encajar en la misma
línea.
Saludos
________________________________
Ignacio Fortea
Serlog21 - Consultoría de Recursos Humanos
Pso. Sagasta, 62 :: Edificio venus, oficina 4 :: 50006 Zaragoza
Tlf. 902 10 40 98 - 976 37 25 06 :: Fax. 976 37 25 30
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Salugral Adriana Pazos García-Camino
Enviado el: miércoles, 18 de octubre de 2006 9:47
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Problemas con menu horizontal
Hola Ignacio,
prueba a quitar el padding del menú.
#navegador ul {
margin: 0px 10px;
padding:0;
}
Saludos
-----Mensaje original-----
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] nombre de Ignacio Fortea
Enviado el: miércoles, 18 de octubre de 2006 9:04
Para: 'Ovillo, la lista de CSS en castellano'
Asunto: [Ovillo] Problemas con menu horizontal
Estoy intentando hacer un menú horizontal como el que sigue:
http://yzweb.iespana.es/pantallazo.jpg
Y a mí me ha quedado:
http://yzweb.iespana.es/menu.jpg
Este es mí código HTML:
<div id="cabecera">
<h1><a href="/index.asp">
<img src="/imagenes/cabecera/logoAE.jpg"
alt="Aragonempleo.com" />
</a></h1>
<a
href="http://es.serlog21.centraltest.com/esptest/@test/part_liste.php";
title="Centraltest.com" target="_blank">
<img src="/imagenes/banners/tests.gif" alt="Centraltest" width="468"
height="60" border="0" />
</a>
</div>
<div id="navegador">
<ul>
<li><a href="/area_candidatos/validar.asp" title="Accede a
tu curriculum">Área candidatos</a></li>
<li><a href="/menu_privado/area_privada.asp" title="Acceso
para empresas">Área empresas</a></li>
<li><a href="/ofertas/busqueda_avanzada.asp" title="Busca la
oferta que más se amolde a tu perfil">Buscar ofertas</a></li>
<li><a href="/ofertas/empresas_destacadas.asp"
title="Consulta las ofertas publicadas por nuestras empresas
colaboradoras">Ofertas por empresas</a></li>
<li id="contacto"><a href="#" title="Si quieres contactar
con nosotros"
onclick="AbrirCentrada('/serviciosextra/contactar_empresa.asp','',584,380)">
Contactar</a></li>
</ul>
</div>
Y esta la CSS:
#cabecera {
background: url('/imagenes/cabecera/fondocab_degradado.gif')
repeat-y center center;
height: 66px;
}
#cabecera h1 {
display: inline;
margin: 0px;
}
#cabecera h1 a img {
border: 0px;
}
#cabecera a {
text-decoration: none;
}
/* NAVEGADOR SUPERIOR */
#navegador:before, #navegador:after {
content: url(/imagenes/cabecera/cuadradito.gif);
}
#navegador {
margin: 0.2em 0em;
}
#navegador ul {
margin: 0px 10px;
}
#navegador li {
margin: 0em 2px;
float: left;
background: #005692;
list-style: none;
}
#navegador li a {
color: #FFFFFF;
display: block;
text-align: center;
width: 132px;
min-height: 2.5em;
line-height: 2.3em;
font-size: 8pt;
text-decoration: none;
}
A ver si alguno de ustedes puede ayudarme.
Gracias y un saludo.
________________________________
Ignacio Fortea
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
