Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Una ayudita con un menu creado con DIVS, algo complejo. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/06/2012, 07:42
 
Fecha de Ingreso: agosto-2008
Mensajes: 6
Antigüedad: 15 años, 7 meses
Puntos: 0
Una ayudita con un menu creado con DIVS, algo complejo.

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}
  #2 (permalink)  
Antiguo 06/06/2012, 16:52
 
Fecha de Ingreso: mayo-2012
Mensajes: 21
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Una ayudita con un menu creado con DIVS, algo complejo.

Hola, tienes esto online?

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

Saludos!
  #3 (permalink)  
Antiguo 06/06/2012, 17:45
 
Fecha de Ingreso: junio-2012
Ubicación: Mexico
Mensajes: 10
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Una ayudita con un menu creado con DIVS, algo complejo.

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

Etiquetas: contenido, creado, divs, hover, html, fondo
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 07:42.