[Ovillo] Problema con capa position:absolute en IE6

2009-10-05 Por tema Nacho F. Carreño
Hola,

Me está dando unos problemas la cabecera de una Web y no soy capaz de 
dar con la solución. La estrucutra que tengo es la siguiente. Tengo una 
capa contenedor donde aplico el ancho de la Web y la centro. A 
continuación tengo un encabezado h1 con un texto, después una capa 
id=cabecera y dentro de esta capa tengo una imagen con el logo de la 
empresa enlazada a la página de inicio flotada a la derecha y un texto 
que también está flotado a la derecha. El caso es que dentro de esta 
misma capa tengo una lista ul con diferentes funcionalidades que quiero 
colocar en la parte derecha de la Web, para ello le he puesto al ul 
position:absolute; y me funciona en todos los navegadores menos en IE6. 
Sin embargo si lo primero que pongo es la lista ul con las 
funcionalidades justo antes del h1 se ve correctamente es como si se 
ocultara por detrás de la capa cabecera o contenidor, he probado con el 
z-index pero nada ¿sabéis que es lo que puede estar pasando? Os pego el 
código para que os hagáis una idea mejor:

HTML:

div id=contenedor
h1 id=h1cabeceraTítulo de la Web/h1
   
div id=cabecera
a href=index.php title=Ir a la página de inicioimg 
src=imagenes/logo.gif alt=Logotipo class=logo //a
p class=ocultoa href=#contcentral title=saltar 
menuacute; accesskey=iSaltar menuacute;/a/p
div id=txtcabpBienvenido a mi página Web/p/div
  
   
ul id=funcionalidades
li id=finicioa href=index.php title=Ir a la 
paacute;gina de inicio accesskey=iInicio/a/li
li id=fcontactaa href=contacta.php title=Ir a la 
paacute;gina de contacto accesskey=cContacta/a/li
li id=fmapaweba href=mapaweb.php title=Ir a la 
página Mapa Web accesskey=mMapa Web/a/li
li id=frecomendara href=recomendar-amigo.php?id=? 
echo $id; ?amp;url=? echo $urlamig; ? title=Recomendar a un amigo 
accesskey=rRecomendar a un amigo/a/li
/ul
   /div

CSS:

#contenedor {
width:60em; margin:auto; text-align:left;
}

h1#h1cabecera {
color:#FFF; font-size:0.63em; line-height:1.80em; text-align:center; 
font-weight:normal; margin:0;
}

#cabecera {
text-align:left; position:relative;
}

img.logo {
display:block; float:left; margin:17px 0 0 20px; border:0;
}

div#txtcab {
float:left; margin:29px 0 0 57px; width:30em;
}

#txtcab p {
font-size:0.63em; color:#902444; margin:0;
}

ul#funcionalidades {
margin:0; padding:0; border:0; list-style-type:none; 
position:absolute; top:73px; right:40px; z-index:500;
}

#funcionalidades li {
display:block; float:left; width:1.56em; height:1.38em; 
background-color:#E5CCD3; text-indent:-9em; margin:0 3px 0 0;
}

#funcionalidades li a:link, #funcionalidades li a:visited, 
#funcionalidades li a:hover {
display:block; float:left; width:1.56em; height:1.38em;
}

Un saludo,

Nacho


___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Problema con capa position:absolute en IE6

2009-10-05 Por tema Andrés gutiérrez
Si lo que tienes es un h1 a la izquierda y una capa con todo lo demas a la
derecha
¿Por que no flotas esa capa a la derecha y lo que esta dentro tabien a la
derecha?

Si quieres que en el bloque derecho te quede el ul debajo de el logo y
texto, escribelo en ese orden, el ul lo ultimo. Suponiendo que todo este
flotando a la derecha.

Ah! calcula el ancho total del div contenedor, decide un ancho para el h1 y
el resto para la capa que flota a la derecha y que contiene al logo, el
texto y el ul (#cabecera)

Espero te sirva y se entienda

2009/10/5 Nacho F. Carreño na...@stvisual.com

 Hola,

 Me está dando unos problemas la cabecera de una Web y no soy capaz de
 dar con la solución. La estrucutra que tengo es la siguiente. Tengo una
 capa contenedor donde aplico el ancho de la Web y la centro. A
 continuación tengo un encabezado h1 con un texto, después una capa
 id=cabecera y dentro de esta capa tengo una imagen con el logo de la
 empresa enlazada a la página de inicio flotada a la derecha y un texto
 que también está flotado a la derecha. El caso es que dentro de esta
 misma capa tengo una lista ul con diferentes funcionalidades que quiero
 colocar en la parte derecha de la Web, para ello le he puesto al ul
 position:absolute; y me funciona en todos los navegadores menos en IE6.
 Sin embargo si lo primero que pongo es la lista ul con las
 funcionalidades justo antes del h1 se ve correctamente es como si se
 ocultara por detrás de la capa cabecera o contenidor, he probado con el
 z-index pero nada ¿sabéis que es lo que puede estar pasando? Os pego el
 código para que os hagáis una idea mejor:

 HTML:

 div id=contenedor
h1 id=h1cabeceraTítulo de la Web/h1

div id=cabecera
a href=index.php title=Ir a la página de inicioimg
 src=imagenes/logo.gif alt=Logotipo class=logo //a
p class=ocultoa href=#contcentral title=saltar
 menuacute; accesskey=iSaltar menuacute;/a/p
div id=txtcabpBienvenido a mi página Web/p/div


ul id=funcionalidades
li id=finicioa href=index.php title=Ir a la
 paacute;gina de inicio accesskey=iInicio/a/li
li id=fcontactaa href=contacta.php title=Ir a la
 paacute;gina de contacto accesskey=cContacta/a/li
li id=fmapaweba href=mapaweb.php title=Ir a la
 página Mapa Web accesskey=mMapa Web/a/li
li id=frecomendara href=recomendar-amigo.php?id=?
 echo $id; ?amp;url=? echo $urlamig; ? title=Recomendar a un amigo
 accesskey=rRecomendar a un amigo/a/li
/ul
   /div

 CSS:

 #contenedor {
width:60em; margin:auto; text-align:left;
 }

 h1#h1cabecera {
color:#FFF; font-size:0.63em; line-height:1.80em; text-align:center;
 font-weight:normal; margin:0;
 }

 #cabecera {
text-align:left; position:relative;
 }

 img.logo {
display:block; float:left; margin:17px 0 0 20px; border:0;
 }

 div#txtcab {
float:left; margin:29px 0 0 57px; width:30em;
 }

 #txtcab p {
font-size:0.63em; color:#902444; margin:0;
 }

 ul#funcionalidades {
margin:0; padding:0; border:0; list-style-type:none;
 position:absolute; top:73px; right:40px; z-index:500;
 }

 #funcionalidades li {
display:block; float:left; width:1.56em; height:1.38em;
 background-color:#E5CCD3; text-indent:-9em; margin:0 3px 0 0;
 }

 #funcionalidades li a:link, #funcionalidades li a:visited,
 #funcionalidades li a:hover {
display:block; float:left; width:1.56em; height:1.38em;
 }

 Un saludo,

 Nacho


 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo




-- 
Experiencia es lo que obtienes, cuando no obtienes lo que quieres.
-
Caminar sobre el agua y desarrollar software a partir de unas
especificaciones es fácil. si ambas están congeladas.
Edward V. Berard, ingeniero informático.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo