![]() |
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ó</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; } ------------- |
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 |
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.... |
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 |
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. |
Hola, darkJ. Pues va a ser que no es eso.... lo he cambiado y sigue igual. |
Cita:
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"> |
| 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.