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:
<div id="pagina" style="width: 980px; margin: auto;">
<div id="cabezote" class="corte">
<div id="logo">
<a rel="start home" href="/"><img src="logo.png" width='222'
height='261' style='height:261px;width:222px;' /></a>
</div>
<div id="titulargrande">
<a rel="start home" href="/">Nombre sitio</a>
</div>
<div id="menuprincipal">
<ul>
<li><a href="seccion1.html" rel="section">TEMA 1</a></li>
<li><a href="seccion2.html" rel="section">TEMA 2</a></li>
<li><a href="seccion3.html" rel="section">TEMA 3</a></li>
<li><a href="seccion4.html" rel="section">TEMA 4</a></li>
</ul>
</div>
</div>
</div>
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
<http://atarraya.org/>
<http://germanbustos.com/>
<http://www.facebook.com/german.bustos>
<http://twitter.com/kommodin>
<http://www.linkedin.com/in/germanbustos>
_______________________________________________
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
