Foros del Web » Creando para Internet » CSS »

Secciones Div con menu

Estas en el tema de Secciones Div con menu en el foro de CSS en Foros del Web. Tengo una estructura con header, menu, main y footer. Dentro del main hay dos columnas. El menú lo obtuve de otro sitio y lo inserté ...
  #1 (permalink)  
Antiguo 15/12/2010, 10:12
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 558
Antigüedad: 8 años, 7 meses
Puntos: 6
Pregunta Secciones Div con menu

Tengo una estructura con header, menu, main y footer.
Dentro del main hay dos columnas.
El menú lo obtuve de otro sitio y lo inserté dentro de la seccion menu. Pero el main se deforma.
Este es el codigo. Cómo soluciono este problemilla ?


Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html>
<
head>
<
title>Maquetando CSS</title>
<
link href="css_maestro_menuX.css" rel="stylesheet" type="text/css">
<
meta http-equiv="content-type" content="text/html; charset=utf-8">
<
SCRIPT type=text/javascript src="javas.js"></SCRIPT>
</head>

<!-- Inicio del Header -->
<div id="header">
    <div id="wrapper_header">
        <div id="logo">
     <img src="logo.png" width="100%" alt="Empresa">
        </div>
        <div id="banner">
AQUI VA EL BANNER
        </div>
    </div>
</div>

<!-- Inicio del Menu -->
<div id="wmenu">

<!-- Desde aqui es el menu que inserte  -->

<DIV id=menu>
<DIV id=principal>


<UL>
  <LI><A onmouseover="muestra('enu1');" title="ir a enlace1" 
  onmouseout="ocultar('enu1');"
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">OPCION 1</A></LI>
  <LI><A onmouseover="muestra('enu2');" title="ir a enlace2" 
  onmouseout="ocultar('enu2');" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">OPCION 2</A></LI>
  <LI><A onmouseover="muestra('enu3');" title="ir a enlace3" 
  onmouseout="ocultar('enu3');" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">SELECCION 3</A></LI>
  <LI><A onmouseover="muestra('enu4');" title="ir a enlace4" 
  onmouseout="ocultar('enu4');" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">SELECCION 4</A></LI>
</UL>
</DIV>

<DIV id=enu1 onmouseover="muestra('enu1');" onmouseout="ocultar('enu1');">
<UL>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace11</A></LI>
  <LI><A onmouseover="muestra('ubmenu1')" title="Ir a enlace1" 
  onmouseout="ocultar('ubmenu1');" 
  href="http://www.yahoo.com">Enlace12&gt;&gt;</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.google.com.pe">Enlace13</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.sisbusiness.com">Enlace14</A></LI>
</UL>
</DIV>

<DIV id=ubmenu1 onmouseover="muestra('ubmenu1');muestra('enu1');" 
onmouseout="ocultar('ubmenu1');ocultar('enu1');">
<UL>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace121</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace122</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace123</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace124</A></LI></UL></DIV>
<DIV id=enu2 onmouseover="muestra('enu2');" onmouseout="ocultar('enu2');">

<UL>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace21</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace22</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace23</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace24</A></LI></UL></DIV>
<DIV id=enu3 onmouseover="muestra('enu3');" onmouseout="ocultar('enu3');">
<UL>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace31</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace32</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace33</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace34</A></LI></UL></DIV>

<DIV id=enu4 onmouseover="muestra('enu4');" onmouseout="ocultar('enu4');">
<UL>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace41</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace42</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace43</A></LI>
  <LI><A title="Ir a enlace1" 
  href="http://www.grafikas.es/web_apuntes/menus_javascript.htm#noir">Enlace44</A></LI></UL></DIV>

</DIV>
</DIV>
<!--- hasta aqui es el menu -->

</div>


<!-- Inicio del Main -->
<div id="main">
    <div id="wrapper_main">
        <div id="columna1">

        COLUMNA1
        COLUMNA1
        COLUMNA1

        </div>
        <div id="columna2">
        ESTE ES EL LADO DE LA COLUMNA 2
        ESTE ES EL LADO DE LA COLUMNA 2
        ESTE ES EL LADO DE LA COLUMNA 2
        ESTE ES EL LADO DE LA COLUMNA 2
        </div>
    </div>
</div>

<!-- Inicio del Footer -->
<div id="footer">
&copy; 2009 Sisbusiness.com
</div>

</body>
</html> 

Código PHP:
body {
    
background-coloryellow;
    
Font10pt VerdanaGenevaArialHelveticasans-serif;
    
margin:0;
    
border:0;
}
/* Definicion del header */
#header {
    
width:100%;
    
height:auto;
    
background-color:red;
    
margin:0;
    
padding0;
    
border0;
}
#wrapper_header {
    
width:100%;
    
height:auto;
    
overflow:hidden;
    
border-bottom4px solid black;
}
#logo {
    
width:20%;
    
background-color:grey;
    
float:left;
    
margin:0;
    
border:0;
    
padding0.50.50.50.5%;
}
#banner {
    
width:78%;
    
background-color:white;
    
float:left;
    
margin:0;
    
border:0;
    
padding0.50.50.50.5%;
}
/* Definicion del menu */
#wmenu {
    
width:100%;

    
background-color:white;
    
margin:0;
    
padding0;
    
border0;
}
/******  Codigo del Menu insertado *****/
#menu {
    
POSITIONabsoluteTEXT-ALIGNleftWIDTH480pxHEIGHT200px;
}
#menu #principal {
    
TEXT-ALIGNcenter
}
#menu #principal UL {
    
PADDING-BOTTOM0px; LIST-STYLE-TYPEnoneMARGIN0pxPADDING-LEFT0pxWIDTH480pxPADDING-RIGHT0pxPADDING-TOP0px
}
#menu #principal UL LI A:hover {
    
BACKGROUND#fc0; COLOR: #fff
}
#menu #principal UL LI {
    
FLOATleft
}
#menu UL {
    
PADDING-BOTTOM0px; LIST-STYLE-TYPEnoneMARGIN0pxPADDING-LEFT0pxWIDTH100pxPADDING-RIGHT0pxBACKGROUND#ff9; PADDING-TOP: 0px
}
#menu UL LI A {
    
TEXT-ALIGNcenterPADDING-BOTTOM4pxWIDTH100pxDISPLAYblockFONT-FAMILY"trebuchet ms"arialverdanahelveticaBACKGROUND#ff9; COLOR: #000; MARGIN-LEFT: 0px; FONT-SIZE: 12px; MARGIN-RIGHT: 0px; TEXT-DECORATION: none; PADDING-TOP: 4px
}
#menu UL LI A:hover {
    
BACKGROUND#fc0; COLOR: #fff
}
#enu1 {
    
POSITIONabsoluteWIDTH120pxVISIBILITYhiddenTOP26pxLEFT0px
}
#ubmenu1 {
    
POSITIONabsoluteWIDTH120pxVISIBILITYhiddenTOP52pxLEFT100px
}

#enu2 {
    
POSITIONabsoluteWIDTH120pxVISIBILITYhiddenTOP26pxLEFT100px
}
#enu3 {
    
POSITIONabsoluteWIDTH120pxVISIBILITYhiddenTOP26pxLEFT200px
}
#enu4 {
    
POSITIONabsoluteWIDTH120pxVISIBILITYhiddenTOP26pxLEFT300px
}
/* hasta aqui es el menu*/


/* Definicion del main */
#main {
    
width:100%;
    
height:auto;
    
background-color:brown;
    
margin:0;
    
padding0;
    
border0;
}
#wrapper_main {
    
width:100%;
    
height:auto;
    
overflow:hidden;
    
margin:0;
    
padding0;
    
border0;
}
#columna1 {
    
width:10%;
    
background-color:orange;
    
float:left;
    
margin:0;
    
border:0;
    
padding0.50.50.50.5%;
}
#columna2 {
    
width:88%;
    
background-color:yellow;
    
float:left;
    
margin:0;
    
border:0;
    
padding0.50.50.50.5%;
}
/* Definicion del footer */
#footer {
    
width:100%;
    
height:auto;
    
background-color:#D8D8D8;
    
margin:0;
    
padding0;
    
border0;
    
text-alignright;


Última edición por bandolera; 15/12/2010 a las 12:03 Razón: Aumentar información

Etiquetas: secciones
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 04:13.