Foros del Web » Creando para Internet » CSS »

Problema con maquetación con columnas (tutorial DesarrolloWeb)

Estas en el tema de Problema con maquetación con columnas (tutorial DesarrolloWeb) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/09/2005, 05:49
 
Fecha de Ingreso: noviembre-2003
Mensajes: 456
Antigüedad: 14 años, 1 mes
Puntos: 1
Exclamación 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

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;
}

-------------
  #2 (permalink)  
Antiguo 12/09/2005, 09:43
 
Fecha de Ingreso: agosto-2005
Mensajes: 125
Antigüedad: 12 años, 4 meses
Puntos: 0
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
__________________
Andrés Gattinoni
------------------------
¿Necesita un lugar en Internet? Hospedaje web en Argentina.
Planes desde $5 argentinos - Alojamiento ideal para Blogs
  #3 (permalink)  
Antiguo 12/09/2005, 12:42
 
Fecha de Ingreso: noviembre-2003
Mensajes: 456
Antigüedad: 14 años, 1 mes
Puntos: 1
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....
  #4 (permalink)  
Antiguo 13/09/2005, 03:19
 
Fecha de Ingreso: noviembre-2003
Mensajes: 456
Antigüedad: 14 años, 1 mes
Puntos: 1
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
  #5 (permalink)  
Antiguo 14/09/2005, 02:03
 
Fecha de Ingreso: octubre-2004
Mensajes: 2.627
Antigüedad: 13 años, 1 mes
Puntos: 48
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.
  #6 (permalink)  
Antiguo 15/09/2005, 03:29
 
Fecha de Ingreso: noviembre-2003
Mensajes: 456
Antigüedad: 14 años, 1 mes
Puntos: 1
Hola, darkJ.

Pues va a ser que no es eso.... lo he cambiado y sigue igual.
  #7 (permalink)  
Antiguo 15/09/2005, 04:02
 
Fecha de Ingreso: octubre-2004
Mensajes: 2.627
Antigüedad: 13 años, 1 mes
Puntos: 48
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".
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:49.