Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Problema con maquetación con columnas (tutorial DesarrolloWeb) (http://www.forosdelweb.com/f53/problema-con-maquetacion-con-columnas-tutorial-desarrolloweb-332851/)

banderas20 12/09/2005 04:49

Problema con maquetación con columnas (tutorial DesarrolloWeb)
 
Hola!

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 :-D

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&oacute;</a> |
<a href="/serveis/serveis.htm" class="enlacenav">Serveis</a> |
<a href="/Ex_Prof/index_ELP.htm" class="enlacenav">Exercici de la Professi&oacute;</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&iacute;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="#">&middot; Info, contacte i horaris</a>
</div>
<div id="info" class="m_derecho_gris">
<a href="#">&middot; Col&middot;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;
}

-------------

El_Barto 12/09/2005 08:43

Tenés alguna dirección donde podamos verlo andando (no quiero andar creando el HTML y todo el rollo) para ver bien el fallo?

En qué navegadores lo probaste? (a veces son los navegadores los molestos...sobre todo IE siempre tiene problemas)

Saludos

banderas20 12/09/2005 11:42

Hola, El Barto.

Mañana lo subo a Internet y lo puedes ver. De todas formas, ya sale mal en el DreamWeaver, con que no es el navegador....

banderas20 13/09/2005 02:19

Aquí está el enlace: http://ccc.1asphost.com/evarove/porquepasa.asp

Luego seguir el link del medio para ver el ERROR. O mirad directamente en
http://ccc.1asphost.com/evarove/porquepasa2.asp

DarkJ 14/09/2005 01:03

No se si sera la causa, pero en la seccion derecha tienes 3 divs con el mismo id, lo que es un error. El id debe ser un valor unico.

banderas20 15/09/2005 02:29

Hola, darkJ.

Pues va a ser que no es eso.... lo he cambiado y sigue igual.

DarkJ 15/09/2005 03:02

Cita:

Iniciado por banderas20
Hola, darkJ.

Pues va a ser que no es eso.... lo he cambiado y sigue igual.

Ya, pero sigue siendo un error repetir los id.

Al final el problema es que esta haciendo lo que le has mandado hacer, pero que no es lo que querias hacer:
Código HTML:

<div id="derecha">
<h2 class="titlat">Seccions d'interès</h2>

<div id="info" class="m_derecho">
<a href="#">&middot; Info, contacte i horaris</a>
</div>
<div id="info" class="m_derecho_gris">
<a href="#">&middot; Col&middot;legiar-se o associar-se </a>[B]</div>[/B]
[B]</div>[/B]
<div id="info" class="m_derecho">
<a href="#">&middot; Tercer menú</a>
</div>
</div>

Supongo que habra sido un error al copipastear, ayudado por un estilo no uniforme al poner las etiquetas de cierre (unas al final de la misma linea, otras en linea aparte). Pero la cuestion es que despues de la segunda opcion cierras el div id="derecha".


La zona horaria es GMT -6. Ahora son las 22:26.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.