Re: [Ovillo] Posicionar elementos traslapados
Una solución seria poner tu div contenedor (#cabezote) con position:relative
sin especificar ningún top, left, bottom o right. Esto hará que todos los
elementos hijos se posicionen con respecto a el y en lugar de usar float puedes
indicar position:absolute para el logotipo, el titular y el menú. Solo tendrás
que especificar una posición x, y con las propiedades top y left para cada uno
de ellos. La propiedad z-index solo funciona con contenidos que usen position
no float, como indicaba Jaume.
>
> Message: 4
> Date: Tue, 1 Feb 2011 08:44:02 +0100
> From: jaume op
> Subject: Re: [Ovillo] Posicionar elementos traslapados
> To: "Ovillo, la lista de CSS en castellano"
> Message-ID:
>
> Content-Type: text/plain; charset=UTF-8
>
> Asi a primera vista creo recordar que para que z-index funcione, el elemento
> debe tener o bien position o estar flotado. Aunque si hay capas que quieres
> superponer deberias utilizar position. Puedes leer un poco sobre el tema en
> http://www.librosweb.es/css/capitulo5/visualizacion.html .
> Por cierto en style='height:261px;width:222px;'* />, creo que estas repitiendo las
> ordenes.
>
>
> Saludos
> Jaume
>
>
>
>
>
> .corte{
>>> width: 100%;
>>> clear: both;
>>> float: none;
>>> }
>>> #cabezote{
>>> overflow: hidden;
>>> height: 260px;
>>> border-bottom: #FF6600 solid 6px;
>>> }
>>> #cabezote #logo{
>>> float: left;
>>> width: 222px;
>>> z-index: 6;
>>> }
>>> #cabezote #titulargrande{
>>> float: right;
>>> width: 700px;
>>> font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
>>> font-size: 90px;
>>> z-index: 0;
>>> text-align: right;
>>> margin-right: 20px;
>>> margin-top: 120px;
>>> }
>>> #cabezote #titulargrande a, #cabezote #titulargrande a:link, #cabezote
>>> #titulargrande a:visited, #cabezote #titulargrande a:hover, #cabezote
>>> #titulargrande a:active{
>>> color: #444;
>>> text-decoration: none;
>>> z-index: 0;
>>> }
>>> #menuprincipal{
>>> z-index: 3;
>>> background: #000;
>>> color: #FFF;
>>> height: 70px;
>>> margin-top: 200px;
>>> }
>>> #menuprincipal ul{
>>> padding: 0;
>>> margin: 0;
>>> list-style: none;
>>> }
>>> #menuprincipal ul li{
>>> display: inline;
>>> float: left;
>>> height: 66px;
>>> line-height: 66px;
>>> font-size: 16px;
>>> padding: 0 10px 0 10px;
>>> }
>>> #menuprincipal ul li a, #menuprincipal ul li a:link, #menuprincipal ul li
>>> a:visited, #menuprincipal ul li a:hover, #menuprincipal ul li a:active{
>>> color: #FFF;
>>> text-decoration: none;
>>> z-index: 20;
>>> }
>>>
>>
>>
>
___
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] Posicionar elementos traslapados
Personalmente no termino de entender cómo asignas un id y class al mismo
div, salvo que lo llames de otro sitio que no sea CSS.
Es difícil no contradecir órdenes con #cabezote #otracosa (y que lo
entiendan igual los navegadores)
Personalmente simplificaría todo con position, y siendo en cabecera, bien
puedes ir a { position: absolute;}
Si miras en las páginas internas de http://www.digitaleando.com/
tienes
#enlaces { position:fixed; .} // queda permanente en la página al
bajarla
#cabecera { float: right; .} // al ser id inicial dentro de #container
(todo), me ahorro el position
#logo { position: absolute; ...}
#textocabecera {position: absolute; ... }
#datatime {position: absolute; }
en el mazacote de la cabecera (claro que muchas cosas son imágenes
diseñadas, hasta el data-time es una imagen por cada dígito)
Por otra parte, en tu página http://germanbustos.com/ en IE en diferentes
versiones (IETest) van variando las masas de color según las versiones y no
reconoce
-moz-border-radius: 15px 15px 15px 15px;
-moz-box-shadow: 4px 4px 10px
aunque si lo reconozca Mozilla Firefox
Yo lo valido trabajando como imagen los efectos hasta que CSS3 valide en
todos los navegadores
P.D. En el caso de mi página, en ningún caso necesito utilizar z-index
aunque pueda resultar necesario en algunos casos, pero, al menos yo, ordeno
la secuencia de id o class en CSS para que se sobrepondan en el mismo orden
y me funciona bien en los navegadores.
Saludos
José María
2011/2/1 jaume op
> Asi a primera vista creo recordar que para que z-index funcione, el
> elemento
> debe tener o bien position o estar flotado. Aunque si hay capas que
> quieres
> superponer deberias utilizar position. Puedes leer un poco sobre el tema en
> http://www.librosweb.es/css/capitulo5/visualizacion.html .
> Por cierto en style='height:261px;width:222px;'* />, creo que estas repitiendo las
> ordenes.
>
>
> Saludos
> Jaume
>
>
>
>
>
> .corte{
> >> width: 100%;
> >> clear: both;
> >> float: none;
> >> }
> >> #cabezote{
> >> overflow: hidden;
> >> height: 260px;
> >> border-bottom: #FF6600 solid 6px;
> >> }
> >> #cabezote #logo{
> >> float: left;
> >> width: 222px;
> >> z-index: 6;
> >> }
> >> #cabezote #titulargrande{
> >> float: right;
> >> width: 700px;
> >> font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
> >> font-size: 90px;
> >> z-index: 0;
> >> text-align: right;
> >> margin-right: 20px;
> >> margin-top: 120px;
> >> }
> >> #cabezote #titulargrande a, #cabezote #titulargrande a:link, #cabezote
> >> #titulargrande a:visited, #cabezote #titulargrande a:hover, #cabezote
> >> #titulargrande a:active{
> >> color: #444;
> >> text-decoration: none;
> >> z-index: 0;
> >> }
> >> #menuprincipal{
> >> z-index: 3;
> >> background: #000;
> >> color: #FFF;
> >> height: 70px;
> >> margin-top: 200px;
> >> }
> >> #menuprincipal ul{
> >> padding: 0;
> >> margin: 0;
> >> list-style: none;
> >> }
> >> #menuprincipal ul li{
> >> display: inline;
> >> float: left;
> >> height: 66px;
> >> line-height: 66px;
> >> font-size: 16px;
> >> padding: 0 10px 0 10px;
> >> }
> >> #menuprincipal ul li a, #menuprincipal ul li a:link, #menuprincipal ul
> li
> >> a:visited, #menuprincipal ul li a:hover, #menuprincipal ul li a:active{
> >> color: #FFF;
> >> text-decoration: none;
> >> z-index: 20;
> >> }
> >>
> >
> >
> ___
> 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
>
___
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] Posicionar elementos traslapados
Asi a primera vista creo recordar que para que z-index funcione, el elemento
debe tener o bien position o estar flotado. Aunque si hay capas que quieres
superponer deberias utilizar position. Puedes leer un poco sobre el tema en
http://www.librosweb.es/css/capitulo5/visualizacion.html .
Por cierto en , creo que estas repitiendo las
ordenes.
Saludos
Jaume
.corte{
>> width: 100%;
>> clear: both;
>> float: none;
>> }
>> #cabezote{
>> overflow: hidden;
>> height: 260px;
>> border-bottom: #FF6600 solid 6px;
>> }
>> #cabezote #logo{
>> float: left;
>> width: 222px;
>> z-index: 6;
>> }
>> #cabezote #titulargrande{
>> float: right;
>> width: 700px;
>> font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
>> font-size: 90px;
>> z-index: 0;
>> text-align: right;
>> margin-right: 20px;
>> margin-top: 120px;
>> }
>> #cabezote #titulargrande a, #cabezote #titulargrande a:link, #cabezote
>> #titulargrande a:visited, #cabezote #titulargrande a:hover, #cabezote
>> #titulargrande a:active{
>> color: #444;
>> text-decoration: none;
>> z-index: 0;
>> }
>> #menuprincipal{
>> z-index: 3;
>> background: #000;
>> color: #FFF;
>> height: 70px;
>> margin-top: 200px;
>> }
>> #menuprincipal ul{
>> padding: 0;
>> margin: 0;
>> list-style: none;
>> }
>> #menuprincipal ul li{
>> display: inline;
>> float: left;
>> height: 66px;
>> line-height: 66px;
>> font-size: 16px;
>> padding: 0 10px 0 10px;
>> }
>> #menuprincipal ul li a, #menuprincipal ul li a:link, #menuprincipal ul li
>> a:visited, #menuprincipal ul li a:hover, #menuprincipal ul li a:active{
>> color: #FFF;
>> text-decoration: none;
>> z-index: 20;
>> }
>>
>
>
___
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
[Ovillo] Posicionar elementos traslapados
Hola
Estoy haciendo el cabezote de un sitio, se supone que debía ser algo
sencillo pero no me funciona, La idea es que tiene tres elementos una foto
que es le logo del sitio, un texto grande que es el nombre y un menú de
navegación muy simple. El menú está fijo en la parte inferior del cabezote,
el texto del título debe estar encima de él pero el fondo del menú debería
cubrirlo un poco. Y el logo se debe ver a la izquierda, encima de todo. El
HTML es el siguiente:
Nombre sitio
TEMA 1
TEMA 2
TEMA 3
TEMA 4
Y el CSS que estoy usando es:
.corte{
width: 100%;
clear: both;
float: none;
}
#cabezote{
overflow: hidden;
height: 260px;
border-bottom: #FF6600 solid 6px;
}
#cabezote #logo{
float: left;
width: 222px;
z-index: 6;
}
#cabezote #titulargrande{
float: right;
width: 700px;
font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
font-size: 90px;
z-index: 0;
text-align: right;
margin-right: 20px;
margin-top: 120px;
}
#cabezote #titulargrande a, #cabezote #titulargrande a:link, #cabezote
#titulargrande a:visited, #cabezote #titulargrande a:hover, #cabezote
#titulargrande a:active{
color: #444;
text-decoration: none;
z-index: 0;
}
#menuprincipal{
z-index: 3;
background: #000;
color: #FFF;
height: 70px;
margin-top: 200px;
}
#menuprincipal ul{
padding: 0;
margin: 0;
list-style: none;
}
#menuprincipal ul li{
display: inline;
float: left;
height: 66px;
line-height: 66px;
font-size: 16px;
padding: 0 10px 0 10px;
}
#menuprincipal ul li a, #menuprincipal ul li a:link, #menuprincipal ul li
a:visited, #menuprincipal ul li a:hover, #menuprincipal ul li a:active{
color: #FFF;
text-decoration: none;
z-index: 20;
}
El título grande me corre hacia abajo los enlaces del menú, no se logra que
se oculte detrás de la franja negra. No pareciera que el z-index funcionara.
Trabajo con Firefox, sobre Windows.
Creo que es un tema de position pero no sé como aplicarlo en este caso.
Gracias por la ayuda,
Germán
--
*Germán Bustos*
Asesor en estrategias de comunicación en Internet para organizaciones
sociales
http://atarraya.org
http://germanbustos.com
Tel: (+57) 3177381339
___
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
