Una ayudita con un menu creado con DIVS, algo complejo.

doctorlynch · #1 (**permalink**) 06/06/2012, 07:42

Hola y agradeceros antes de nada que leáis este mensaje.

Vereis, tengo que hacer un menú algo fuera de lo normal, que por diferentes motivos he visto conveniente hacerlo con DIVS. Viendo las siguientes imágenes lo vais a ver más claro que con mi explicación:

MENU ACTUAL CON FALLO

MENU BUENO

Como veis, tengo un menú de 3 líneas.
La primera línea cuenta con 5 elementos (5 enlaces). El último elemento de esa primera línea, tiene que ocuparme en altura el total de las tres líneas de menu.
Es decir, mientras la primera línea de menu tiene 5 enlaces, las otras líneas del menú siguientes tienen 6 enlaces. Esto es así porque en la primera línea, el MENU 2 ocupa doble espacio horizontal.

El problema es precisamente ese, que si le doy altura a ese elemento, las siguientes líneas del menu se me van abajo, y no ocupan el espacio correspondiente que deberían de ocupar.

¿Tenéis idea de cómo solucionar este inconveniente?.

Muchas gracias y un saludo.

CÓDIGO FUENTE HTML

Código:

   
<html>
<body>
    <div id="contenedor">
      <div id="logo">LOGO</div><div id="texto-logo">DESCRIPCIÓN</div>
            <div id="contenido-principal">
			<div class="caja-acerca-de">MENU 1</div>
            <div class="caja-doble-horizontal">MENU 2<br>SALTO DE LINEA</div>
            <div class="cajas">MENU 3<BR>SALTO DE LINEA</div>
            <div class="caja-contacto">MENU 4</div>
            <div id="caja-menu-con-opciones">MENU CON OPCIONES:<br>-OPCION 1<br>-OPCION 2<br>-OPCION 3</div>
			<div id="cajas-segunda-linea">
			<div class="cajas">MENU 5</div>
			<div class="cajas">MENU 6<br>SALTO DE LINEA</div>
			<div class="cajas">MENU 7<br>SALTO DE LINEA</div>
			<div class="cajas">MENU 8<br>SALTO DE LINEA</div>
			<div class="cajas">MENU 9<br>SALTO DE LINEA</div>
			</div>
			<div id="cajas-tercera-linea"></div>
			<div class="cajas">MENU 10</div>
			<div class="cajas">MENU 11</div>
			<div class="cajas">MENU 12<br>SALTO DE LINEA</div>
			<div class="cajas">MENU 13</div>
			<div class="cajas">MENU 14</div>
			</div>
    </div>
</body>
</html>

CÓDIGO FUENTE CSS

Código:

body { 
	 behavior: url("csshover3.htc"); 
	 background: grey; 
	 font-family: "arial"; 
	 font-size: 12px
	 }
     
	 #contenedor {
	 width:996px; 
	 height:500px; 
	 background: yellow; 
	 border:solid
	 }
     
	 #logo {
	 float: left; 
	 width:396px; 
	 height:133px; 
	 background: yellow;
	 }
     
	 #texto-logo {
	 float: left; 
	 width:592px; 
	 height:133px; 
     background: yellow; 
	 }
     
	 #contenido-principal {
	 clear:both; 
	 margin:0px; 
	 padding:0px;
	 }
     
	 .cajas {
	 float:left; 
	 width:166px; 
	 height:40px; 
	 background: white; 
	 text-align: center; 
	 margin:0 auto; 
	 padding:0px;
	 }
	 
	 .cajas:hover {
	 float:left; 
	 width:166px; 
	 height:40px; 
	 background: blue; 
	 text-align: center; 
	 margin:0 auto; 
	 padding:0px; 
	 cursor: pointer;
	 }
	 
	 .caja-acerca-de {
	 float:left; 
	 width:166px; 
	 height:32px; 
	 background: white; 
	 text-align: center; 
	 padding-top:8px: 
	 margin:0 auto; 
	 padding-top:8px; 
	 }
	 
	 .caja-acerca-de:hover {
	 float:left; 
	 width:166px; 
	 height:32px; 
	 background: blue; 
	 text-align: center; 
	 margin:0 auto; 
	 padding-top:8px; 
	 cursor: pointer; 
	 }
	 
	 .caja-contacto {
	 float:left; 
	 width:166px; 
	 height:32px; 
	 background: white; 
	 text-align: center; 
	 padding-top:8px: 
	 margin:0 auto; 
	 padding-top:8px; 
	 }
	 
	 .caja-contacto:hover {
	 float:left; 
	 width:166px; 
	 height:32px; 
	 background: blue; 
	 text-align: center; 
	 margin:0 auto; 
	 padding-top:8px; 
	 cursor: pointer; 
	 }
     
	 #caja-menu-con-opciones {
	 float:left; 
	 width:166px; 
	 height:120px; 
	 background: white; 
	 text-align: center; 
	 margin:0 auto; 
	 padding:0px;
	 }
	 
	 #caja-menu-con-opciones:hover {
	 float:left; 
	 width:166px; 
	 height:120px; 
	 background: blue; 
	 text-align: center; 
	 margin:0 auto; 
	 padding:0px; 
	 cursor: pointer;
	 }
	 
	 .caja-doble-horizontal {
	 float:left; 
	 width:332px; 
	 height:40px; 
	 background: white; 
	 text-align: center; 
	 margin:0 auto; 
	 }
	 
	 .caja-doble-horizontal:hover {
	 float:left; 
	 width:332px; 
	 height:40px; 
	 background: blue; 
	 text-align: center; 
	 margin:0 auto; 
	 padding:0px; 
	 cursor: pointer;
	 }
	 
	 #cajas-segunda-linea{clear:both}
	 #cajas-tercera-linea{clear:both}

jorgeabreo · #2 (**permalink**) 06/06/2012, 16:52

Hola, tienes esto online?

Si puedes pasa una url, para darte una ayuda mas precisa...

Saludos!

galmac12 · #3 (**permalink**) 06/06/2012, 17:45

Mira hice esta prueba espero si haya entendido bien t dejo el codigo y la imagen solo hay q acomodar los tamaños de los div's saludos :D

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div's</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="Cabeza">
	<div id="Logo"> Logo </div>
    <div id="Titulo"> Contenido </div>
</div>
<br/>
<br/>

<div id="Cuerpo">
	<div id="Menu">
    	<div class="MenuNormal">menu 1</div>
        <div id="MenuDoble">menu 2</div>
        <div class="MenuNormal">menu 3</div>
        <div class="MenuNormal">menu 4</div>
        <div class="MenuNormal">menu 5</div>
        <div class="MenuNormal">menu 6</div>
        <div class="MenuNormal">menu 7</div>
        <div class="MenuNormal">menu 8</div>
        <div class="MenuNormal">menu 9</div>
        <div class="MenuNormal">menu 10</div>
        <div class="MenuNormal">menu 11</div>
        <div class="MenuNormal">menu 12</div>
        <div class="MenuNormal">menu 13</div>
        <div class="MenuNormal">menu 14</div>
    </div>
    <div id="MenuEspecial"> Aqui Tu menu especial q puedes modificar el tamaño q quieras </div>
</div>
</body>
</html>

Css

Código HTML:

#Cabeza
{
	margin:auto;
	height:150px;
	width:850px;
}

#Logo
{
	border-color:#039;
	border-style:double;
	border-width:1px;
	height:148px;
	width:250px;
	float:left;
}

#Titulo
{
	float:left;
	height:148px;
	width:595px;
	border-color:#039;
	border-style:double;
	border-width:1px;
}

#Cuerpo
{
	margin:auto;
	height:300px;
	width:850px;
}

#Menu
{
	height:300px;
	width:550px;
	float:left;
}

#MenuEspecial
{
	height:300px;
	width:298px;
	float:left;
	border-color:#039;
	border-style:double;
	border-width:1px;
}

.MenuNormal
{
	border-color:#039;
	border-style:double;
	border-width:1px;
	height:98px;
	width:108px;
	float:left;
}

#MenuDoble
{
	border-color:#039;
	border-style:double;
	border-width:1px;
	height:98px;
	width:216px;
	float:left;
}