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
Re: [Ovillo] Menú fluido hasta el pie del contenido
Si se utiliza float o no siempre debes tener padding o margin, pero te va seguir variando de navegador a navegador, recomiendo que resetees el css del navegador y utilices uno propio. El 31 de enero de 2011 06:14, Marc Palau escribió: > Yo eso lo haría con un layout fluido con float:left i right i con sus > correspondientes overflow:hidden; para solucionar el maldito clearfix. > > si no se entiende amplío información. > > saludoS > Marc > > En/na Maikel Naigt ha escrit: > > Hola > > > > > >> tengo un pequeño problema, es un menú a la izquierda de la página, que > >> de una página a otra varía. La estructura de la página es con un div > >> contenedor centrado, el menú posicionado absolute a la izquierda y a > >> la derecha el contenido en varios div's posicionados también absolute. > >> Bien el caso es que el tamaño de los div´s de contenido varía y el > >> diseño requiere que el menú siempre se expanda hasta el final inferior > >> del contenido. He intentado varias cosas, pero no lo he conseguido. > >> > > > > A parte de lo que te comenta Camilo, sobre la técnica Faux Columns, > > creo recordar que había otra manera, utilizando la altura propia del > > contenedor del menú. Si no recuerdo mal bastaba con darle un padding > > inferior exagerado (padding-bottom: 6000px por ejemplo) y, a su vez, > > un margen negativo inferior de la misma cantidad (margin-bottom: > > -6000px) De esta manera provocábamos que el conenedor de los elementos > > del menú tuviera la misma altura que su contenedor padre (que sería el > > que englobara tanto el menú como los contenidos) Hablo de memoria, > > aunque espero no equivocarme. > > > > Un saludo, > > David Merino Ogando > > ___ > > 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 > ___ 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] Menú fluido hasta el pie del contenido
Yo eso lo haría con un layout fluido con float:left i right i con sus correspondientes overflow:hidden; para solucionar el maldito clearfix. si no se entiende amplío información. saludoS Marc En/na Maikel Naigt ha escrit: > Hola > > >> tengo un pequeño problema, es un menú a la izquierda de la página, que >> de una página a otra varía. La estructura de la página es con un div >> contenedor centrado, el menú posicionado absolute a la izquierda y a >> la derecha el contenido en varios div's posicionados también absolute. >> Bien el caso es que el tamaño de los div´s de contenido varía y el >> diseño requiere que el menú siempre se expanda hasta el final inferior >> del contenido. He intentado varias cosas, pero no lo he conseguido. >> > > A parte de lo que te comenta Camilo, sobre la técnica Faux Columns, > creo recordar que había otra manera, utilizando la altura propia del > contenedor del menú. Si no recuerdo mal bastaba con darle un padding > inferior exagerado (padding-bottom: 6000px por ejemplo) y, a su vez, > un margen negativo inferior de la misma cantidad (margin-bottom: > -6000px) De esta manera provocábamos que el conenedor de los elementos > del menú tuviera la misma altura que su contenedor padre (que sería el > que englobara tanto el menú como los contenidos) Hablo de memoria, > aunque espero no equivocarme. > > Un saludo, > David Merino Ogando > ___ > 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] Menú fluido hasta el pie del contenido
Hola > tengo un pequeño problema, es un menú a la izquierda de la página, que > de una página a otra varía. La estructura de la página es con un div > contenedor centrado, el menú posicionado absolute a la izquierda y a > la derecha el contenido en varios div's posicionados también absolute. > Bien el caso es que el tamaño de los div´s de contenido varía y el > diseño requiere que el menú siempre se expanda hasta el final inferior > del contenido. He intentado varias cosas, pero no lo he conseguido. A parte de lo que te comenta Camilo, sobre la técnica Faux Columns, creo recordar que había otra manera, utilizando la altura propia del contenedor del menú. Si no recuerdo mal bastaba con darle un padding inferior exagerado (padding-bottom: 6000px por ejemplo) y, a su vez, un margen negativo inferior de la misma cantidad (margin-bottom: -6000px) De esta manera provocábamos que el conenedor de los elementos del menú tuviera la misma altura que su contenedor padre (que sería el que englobara tanto el menú como los contenidos) Hablo de memoria, aunque espero no equivocarme. Un saludo, David Merino Ogando ___ 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
