Foros del Web » Creando para Internet » CSS »

Duda sobre la maquetación del menu izquierdo

Estas en el tema de Duda sobre la maquetación del menu izquierdo en el foro de CSS en Foros del Web. Tengo una duda que no termino de solucionar. El div del menu izquierdo al aplicar F12 se extiende debajo y a lo largo del menu ...
  #1 (permalink)  
Antiguo 10/04/2009, 06:53
 
Fecha de Ingreso: septiembre-2008
Mensajes: 185
Antigüedad: 9 años, 2 meses
Puntos: 1
Duda sobre la maquetación del menu izquierdo

Tengo una duda que no termino de solucionar.
El div del menu izquierdo al aplicar F12 se extiende debajo y a lo largo del menu horizontal y hace a su vez que el div de contenido se situe debajo del menu izquierdo.
Le he dado un 24% de ancho y le he aplicado la propiedad float:left pero parece
que no responde .


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

<div class=”Header”>

<img src="../imagenes/recortes/ippcv-1.gif" alt="encabezado" width="100%" height="160px" position:absolute;/>
<!-- end #header -->
</div>

<div class="contenedor">

<div class=”Menu_Encabezado”>

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.dwt.php" class="Estilo11">Inicio</a> </li>
<li><a href="Noticias.dwt.php">Noticias</a> </li>
<li><a href="#">Libreria Virtual</a> </li>
<li><a href="#">Foro</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Registrarse</a>
<ul>
<li><a href="Nuevo_Usuario.dwt.php">Alta de Registro</a></li>
<li><a href="usuarios.dwt.php">Control del Usuario</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Ingresar</a>
<ul>
<li><a href="#">Requisitos</a></li>
<li><a href="#">Formulario de Ingreso</a></li>
</ul>
</li>
<li><a href="Contacto.dwt.php">Contactar</a></li>
</ul>
<!-- end #Menu_Encabezado-->
</div>



<div class=”sidebar1”>
<!-- TemplateBeginEditable name="Menu_Izquierdo" -->

<ul id="MenuBar3" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Instituto</a>
<ul>
<li><a href="#">Presentaci&oacute;n e Historia</a></li>
<li><a href="#">Objetivos</a></li>
<li><a href="#">Estatutos</a></li>
<li><a href="#">Organo de Gobierno Provisional</a></li>
<li><a href="#">Asociados</a></li>
<li><a href="#">Otras Instituciones</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Actividades</a>
<ul>
<li><a href="#">Seminarios</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Conferencias</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Actividades Formativas</a>
<ul>
<li><a href="#">Jornadas Cl&iacute;nico/Cient&iacute;ficas</a></li>
</ul>
</li>
<li><a href="#">Congresos</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Publicaciones</a>
<ul>
<li><a href="#">Dossiers del Instituto</a> </li>
<li><a href="#">Res&uacute;menes de Actividades</a></li>
<li><a href="#">Notas sobre Libros y Art&iacute;culos de revistas</a></li>
<li><a href="#">Elemento sin t&iacute;tulo</a></li>
</ul>
</li>
<li><a href="#">Webs de inter&eacute;s</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Consultas</a>
<ul>
<li><a href="#">Orientaci&oacute;n Psicoterapeutica</a></li>
<li><a href="#">Formulario de Consultas</a></li>
</ul>
</li>
<li><a href="#">Sugerencias</a></li>
<li><a href="#">B&uacute;squedas</a></li>
</ul>
<!-- TemplateEndEditable -->

<!-- end #sidebar1 -->

</div>

<div class=”mainContent”>
<p>&nbsp;</p>
<!-- TemplateBeginEditable name="Contenido_principal" -->
<h1>&nbsp;</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- TemplateEndEditable -->
<!-- end #mainContent -->
</div>
<!-- end #Contenedor->
</div>
--------------------------------------
CSS
body {
font: 92% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */

text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
color: #000000;
background-color: #FFFFFF;
border-width: 20px;
border-color:#A4FFFF;
border-style:ridge;

}

.twoColLiqLtHdr #contenedor {
width: 100%; /* esto creará un contenedor con el 80% del ancho del navegador */
background: #FFFFFF; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
border: 1px solid #000000;
text-align: left; /* esto anula text-align: center en el elemento body. */
margin:auto;
}

.twoColLiqLtHdr #header {
background-position:left;
/*background-color:#A4FFFF;*/ /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
height: 160px;
width: 100%;}


.twoColLiqLtHdr #Menu_Encabezado {
height: 37px;
width: 100%;
background-color: #006600;
float: left;
padding-left:5px;
padding-right: 5px;

}


.twoColLiqLtHdr #header h1 {
margin: 0; /* el ajuste en cero del margen del último elemento del div de #header evita la contracción del margen (un espacio inexplicable entre divs). Si el div tiene un borde alrededor, esto no es necesario, ya que también evita la contracción del margen */
padding: 10px 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
}

/* Sugerencias para sidebar1:
1. dado que está trabajando en porcentajes, es conveniente no utilizar relleno en la barra lateral. Se añadirá al ancho en el caso de navegadores que cumplen los estándares, creando un ancho real desconocido.
2. El espacio entre el lado del div y los elementos que contiene puede crearse colocando un margen izquierdo y derecho en dichos elementos, como se observa en la regla ".twoColLiqLtHdr #sidebar1 p".
3. Dado que Explorer calcula los anchos después de mostrarse el elemento padre, puede que ocasionalmente encuentre errores inexplicables con columnas basadas en porcentajes. Si necesita resultados más predecibles, puede optar por cambiar a columnas con tamaño en píxeles.
*/
.twoColLiqLtHdr #sidebar1 {
width: 24%; /* dado que este elemento es flotante, debe asignarse un ancho */
background: #EBEBEB; /* el relleno superior e inferior crea un espacio visual dentro de este div */
padding-right: 0;
padding-left: 0;
margin-bottom: 0;
margin-left:10px;
float:left;
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
margin-left: 10px; /* deben asignarse los márgenes izquierdo y derecho de cada elemento que vaya a colocarse en las columnas laterales */
margin-right: 10px;
}

/* Sugerencias para mainContent:
1. el espacio entre el mainContent y sidebar1 se crea con el margen izquierdo del div mainContent. Con independencia de la cantidad de contenido que incluya el div sidebar1, permanecerá el espacio de la columna. Puede quitar el margen izquierdo si desea que el texto del div #mainContent llene el espacio de #sidebar1 cuando termine el contenido de #sidebar1.
2. para evitar la caída de un elemento flotante con una resolución mínima admitida de 800 x 600, los elementos situados dentro del div mainContent deben tener un tamaño de 430px o inferior (incluidas las imágenes).
3. en el siguiente comentario condicional de Internet Explorer, la propiedad zoom se utiliza para asignar a mainContent "hasLayout." Esto evita diversos problemas específicos de IE.
*/
.twoColLiqLtHdr #mainContent {
float:left;
margin-top: 20px;
margin-right: 1%;
margin-bottom: 0;
margin-left: 27%;
padding-bottom: 15px;
background-color: #FFFFFF;
font-weight: bold;
padding-top:10px;
width: 70%;

}

.twoColLiqLtHdr #footer {
clear:left;
clear:both;
margin-top:20px;
background:#DDDDDD;
width: 100%;
padding-top:0;
height: 99px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;

}
  #2 (permalink)  
Antiguo 10/04/2009, 11:26
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Duda sobre la maquetación del menu izquierdo

Y que es lo que F12 se supone que hace?
__________________
twitter: @imbuzu
  #3 (permalink)  
Antiguo 10/04/2009, 13:51
 
Fecha de Ingreso: septiembre-2008
Mensajes: 185
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Duda sobre la maquetación del menu izquierdo

Con F12 aparece el menu izquierdo solapando todo el div de contenido y el div
de contenido aparece abajo del menu lateral.
  #4 (permalink)  
Antiguo 10/04/2009, 14:52
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Duda sobre la maquetación del menu izquierdo

ME refiero a en el programa, hace zoom? copia, pega? crea una nueva ventna? Lo más probable es que haga zooom y por eso te de el problema.
__________________
twitter: @imbuzu
  #5 (permalink)  
Antiguo 11/04/2009, 02:46
 
Fecha de Ingreso: septiembre-2008
Mensajes: 185
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Duda sobre la maquetación del menu izquierdo

No he terminado de entender tu apreciación.

Lo que pretendo decir es que el menu lateral permanece en su sitio pero
lo que es área que delimita el div del menu se ha situado debajo y a lo
largo de header . Cuando pulso F12 , sobre todo en el caso de las plantillas
hijas, el menu lateral se extiende a lo largo de la zona comprendida entre
el header y el footer.

De momento no me aclaro
  #6 (permalink)  
Antiguo 11/04/2009, 15:08
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Duda sobre la maquetación del menu izquierdo

No me has entendido. Mira, por ejemplo en mi mac, F12 sirve para expulsar un CD. Para que sirve f12 en tu computadora? Por que no mejor poner unas imágenes de lo que pasa para entender un poco mejor el problema?

Saludos.
__________________
twitter: @imbuzu
  #7 (permalink)  
Antiguo 27/04/2009, 11:45
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 9 meses
Puntos: 20
Respuesta: Duda sobre la maquetación del menu izquierdo

Hola,

como puede lograrse esto:

http://www.araudi.net/ejemplos/colum...ilibradas.html

colocando borde de color diferente a cada caja?

Ese truco solo funciona si las cajas no tienen borde.

Alguna idea?

Gracias
  #8 (permalink)  
Antiguo 28/04/2009, 03:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Duda sobre la maquetación del menu izquierdo

Hola:

En tu navegador:

Menú Ver -> Código fuente

Y ya tienes a la vista el código de como se hace, haces las pruebas que quieras y vas viendo como reacciona.

Saludos.

  #9 (permalink)  
Antiguo 28/04/2009, 06:58
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 9 meses
Puntos: 20
Respuesta: Duda sobre la maquetación del menu izquierdo

Jomaruro, como he dicho, se trata de:

Cita:
colocando borde de color diferente a cada caja?
  #10 (permalink)  
Antiguo 30/04/2009, 19:31
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 9 meses
Puntos: 20
Respuesta: Duda sobre la maquetación del menu izquierdo

No es posible hacerlo con bordes?
  #11 (permalink)  
Antiguo 01/05/2009, 05:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Duda sobre la maquetación del menu izquierdo

Como explico en el ejemplo en las FAQ, las columnas equilibradas se pueden conseguir de muchas maneras dirferentes, y para dos, tres, cuatro columnas, etc.
El que comentas es sólo un método para una solución concreta, que no tiene por qué funcionar bien con otros requisitos.
Puedes hacer una búsqueda en este foro sobre columnas equilibradas (que aparecerán enlaces a páginas donde se trata eso con diferentes métodos) o bien puedes poner un dibujo de lo que quieres conseguir a ver si a alguien se le ocurre cómo hacerlo. Sin una imagen no me imagino: ¿ambas tiene bordes? pero si son igual de altas, ¿el borde inferior se monta? ¿los laterales están unidos o separados? En fin, debes mostrar qué intentas hacer.
  #12 (permalink)  
Antiguo 02/05/2009, 08:01
 
Fecha de Ingreso: febrero-2004
Mensajes: 1.942
Antigüedad: 13 años, 9 meses
Puntos: 20
Respuesta: Duda sobre la maquetación del menu izquierdo

Mikmoro se trata de hascer esto:

http://www.araudi.net/ejemplos/colum...ilibradas.html

Con bordes de color X para cada caja

Gracias
  #13 (permalink)  
Antiguo 02/05/2009, 12:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Duda sobre la maquetación del menu izquierdo

Cita:
Iniciado por Anarko Ver Mensaje
Mikmoro se trata de hascer esto:

http://www.araudi.net/ejemplos/colum...ilibradas.html

Con bordes de color X para cada caja

Gracias
Eso es lo único que sí había entendido, pero no aclaras ninguna de las preguntas que te hago en el mensaje anterior. ¿Cómo es ese borde de cada caja? ¿se montan? etcétera.

Dibújalo.

Por lo que imagino creo que deberàs usar otra tècnica diferente.
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 09:47.