Hola,
Tengo otra duda de principiante.
Sé controlar la anchura de las capas mediante porcentajes y valores de pixeles, ¿pero cómo se controla la altura?
Estoy creando una página con varias capas.
Por un lado, está el BODY, de un color.
Dentro hay otra, a la que etiqueto como DESPLIGUE, azul oscuro. Y dentro de ésta, otra, denominada "CONTENIDO", blanca.
Tanto DESPLIEGUE como CONTENIDO son igual de altas, ("auto", tanto como texto introduzca), pero yo necesito que CONTENIDO sea un poco más corta, de modo que no llegue hasta abajo del todo y se vea un borde azul oscuro de DESPLIEGUE por abajo.
¿Tengo que utilizar un valor determinado de pixeles o hay otra manera?
<body id="tapiz">
<div id="despliegue">
<div id="encabz">
</div>
<div id="contenido">
<table style="border-collapse:collapse" width="100%" border="5" id="tbunno">
<tr>
<td id="izqda">
<table style="border-collapse:collapse" width="100%" align="center" id="botones">
<tr>
<td>Inicio</td>
</tr>
<tr>
<a href="#"><td>Quienes somos</td></a>
</tr>
<tr>
<td>Noticias</td>
</tr>
<tr>
<td>Descargas</td>
</tr>
<tr>
<td>Contacto</td>
</tr>
</table>
</td>
<td id="dcha"> <table style="border-collapse:collapse" width="100%" border="0" id="tbdos">
<tr>
<td id="oeste">
<p></p>
</td>
<td id="este">
<p> </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
@charset "utf-8";
}
body {
background-color: #97BEC6;
}
#tapiz {
background-color: #97BEC6;
background-image: url(images/azul.jpg);
}
#despliegue {
background-color: #003C65;
width: 1000px;
margin: 0px auto;
height: 625px;
margin-top: 0px;
}
#encabz {
background-color: #03F;
height: 150px;
width: 980px;
margin: 0px auto;
margin-top: 10px;
padding-top: 0px;
background-image: url(images/titulo.jpg);
}
#contenido {
background-color: #FFF;
width: 980px;
margin: 0px auto;
margin-top: 30px;
height: 425px;
}
#tapiz #despliegue #contenido #tbunno {
background-color: #FFF;
color: #000;
border: 5px solid #FFF;
}
#tapiz #despliegue #contenido #tbunno tr td #tbdos {
background-color: #FFF;
vertical-align: top;
text-align: justify;
border: 5px solid #FFF;
}
#tapiz #despliegue #contenido #tbunno tr #izqda {
background-color: #FFF;
width: 15%;
vertical-align: top;
}
#tapiz #despliegue #contenido #tbunno tr #dcha {
background-color: #FFF;
}
#tapiz #despliegue #contenido #tbunno tr #dcha #tbdos tr #oeste {
background-color: #FFF;
width: 75%;
vertical-align: top;
}
#tapiz #despliegue #contenido #tbunno tr #dcha #tbdos tr #este {
background-color: #FFF;
vertical-align: top;
}
#tapiz #despliegue #contenido #tbunno tr #izqda #botones {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
color: #FFF;
background-color: #FFF;
text-align: center;
font-weight: bold;
}
#tapiz #despliegue #contenido #tbunno tr #izqda #botones tr td {
background-color: #003C65;
height: 25px;
border: 5px solid #FFF;
}