Problema con maquetación con columnas (tutorial DesarrolloWeb) Estoy siguiendo el tutorial de Maquetación css de "desarrolloweb", y estoy haciendo un diseño a 3 columnas. El caso es que funciona bien, hasta que en los "menús" laterales pongo el tercer submenú, que me lo mete en la columna del centro, y no sé por qué.
Podéis ayudarme?
PD: adjunto código CSS. Como veréis, es muuy parecido al del tutorial
Gracias!
El código de la página es:
-------------
<div id="contenedor">
<div id="cabecera"><img src="images/coetc.gif" width="700" height="81" alt="COETC" border="0"></div>
<div id="navegador">
<a href="/organitzacio/historia.htm" class="enlacenav">Organització</a> |
<a href="/serveis/serveis.htm" class="enlacenav">Serveis</a> |
<a href="/Ex_Prof/index_ELP.htm" class="enlacenav">Exercici de la Professió</a> |
<a href="/activitats/cursos.htm" class="enlacenav">Activitats</a> |
<a href="/diversos/publicacions/public_acet.htm" class="enlacenav">Diversos</a> |
<a href="/foro" class="enlacenav">Foro</a>
</div>
<div id="cuerpo">
<div id="izquierda">
<h2 class="titlat">Agenda</h2>
<div id="evento1" class="cuerpolateral">
<div id="tipoevento" class="tipoevento">
Curso
</div>
<div id="descripcion" class="descripcionevento">
<a href="http://www.google.es">mira el google</a>
</div>
<div id="fechaevento" class="fechaevento">
cuando quieras, en tu navegador!
</div>
</div>
<div id="evento2" class="cuerpolateral_gris">
<div id="tipoevento" class="tipoevento">
Concurso
</div>
<div id="descripcion" class="descripcionevento">
<a href="http://www.google.es">Concurso de fotografía</a>
</div>
<div id="fechaevento" class="fechaevento">
por la calle!
</div>
</div>
</div>
<div id="centro">
centro
</div>
<div id="derecha">
<h2 class="titlat">Seccions d'interès</h2>
<div id="info" class="m_derecho">
<a href="#">· Info, contacte i horaris</a>
</div>
<div id="info" class="m_derecho_gris">
<a href="#">· Col·legiar-se o associar-se </a></div>
</div>
</div>
</div>
----------------
Y el CSS es:
-------------
/* estilos para página principal */
/* ENLACES SÓLO para 'navegador'*/
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
font-weight:normal;
}
A.enlacenav:HOVER{
text-decoration:underline;
}
/* ENLACES SÓLO para 'cuerpo'*/
#cuerpo A, A:VISITED, A:ACTIVE, A:FOCUS, A:LINK{
text-decoration: none;
font-weight:bold;
color: #000000;
}
#cuerpo A:HOVER{
text-decoration: none;
font-weight:bold;
color: #FFCC00;
}
#derecha A, A:VISITED, A:ACTIVE, A:FOCUS, A:LINK{
text-decoration: none;
font-weight:normal;
color: #000000;
}
#derecha A:HOVER{
text-decoration: underline;
font-weight:normal;
color: #FFCC00;
}
BODY {
background : #FFFF99;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}
#contenedor{
text-align: left;
border: 2px solid #ffff00;
width: 700px;
background-color : #ffffff;
margin: auto;
}
#cabecera{
height : 81px;
width: 700px;
}
#navegador{
background : #ffffff url(images/fondonav.gif);
padding : 8px 10px 8px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
width: 700px;
}
#cuerpo{
/*mantenemos el color del BODY, ya lo cambiaremos en las demás capas si toca*/
width:700px;
}
#izquierda{
width:175px;
padding: 0px 0px 0px 0px;
background-color : #ffffff;
float:left;
}
#centro{
width:350px;
padding: 0px 0px 0px 0px;
float:left;
}
#derecha{
width:175px;
padding: 0px 0px 0px 0px;
background-color : #ffffff;
float:right;
}
/* estilos para menu IZQUIERDO de main */
.titlat{
background-color:#0066CC;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : bold;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}
.cuerpolateral{
padding: 0px 4px 13px 0px;
border-right: 2px solid #0066CC;
}
.cuerpolateral_gris{
background-color:#e4e4e4;
padding: 0px 4px 13px 0px;
border-bottom: 2px solid #0066CC;
}
.tipoevento{
color:#FF9933;
font-weight:bold;
padding-bottom: 15px; /*margen por debajo*/
padding-top: 5px;
}
.descripcionevento{
/* solo definimos el margen inferior*/
padding-bottom: 15px;
padding-left:4px;
}
.fechaevento{
/* solo definimos el margen inferior*/
padding-bottom: 5px;
padding-left:4px;
}
/* parte derecha */
.m_derecho{
padding: 7px 4px 7px 5px;
}
.m_derecho_gris{
background-color:#e4e4e4;
padding: 7px 4px 7px 5px;
}
-------------
