Secciones Div con menu 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>></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">
© 2009 Sisbusiness.com
</div>
</body>
</html>
Código PHP:
body {
background-color: yellow;
Font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin:0;
border:0;
}
/* Definicion del header */
#header {
width:100%;
height:auto;
background-color:red;
margin:0;
padding: 0;
border: 0;
}
#wrapper_header {
width:100%;
height:auto;
overflow:hidden;
border-bottom: 4px solid black;
}
#logo {
width:20%;
background-color:grey;
float:left;
margin:0;
border:0;
padding: 0.5% 0.5% 0.5% 0.5%;
}
#banner {
width:78%;
background-color:white;
float:left;
margin:0;
border:0;
padding: 0.5% 0.5% 0.5% 0.5%;
}
/* Definicion del menu */
#wmenu {
width:100%;
background-color:white;
margin:0;
padding: 0;
border: 0;
}
/****** Codigo del Menu insertado *****/
#menu {
POSITION: absolute; TEXT-ALIGN: left; WIDTH: 480px; HEIGHT: 200px;
}
#menu #principal {
TEXT-ALIGN: center
}
#menu #principal UL {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 480px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#menu #principal UL LI A:hover {
BACKGROUND: #fc0; COLOR: #fff
}
#menu #principal UL LI {
FLOAT: left
}
#menu UL {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; BACKGROUND: #ff9; PADDING-TOP: 0px
}
#menu UL LI A {
TEXT-ALIGN: center; PADDING-BOTTOM: 4px; WIDTH: 100px; DISPLAY: block; FONT-FAMILY: "trebuchet ms", arial, verdana, helvetica; BACKGROUND: #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 {
POSITION: absolute; WIDTH: 120px; VISIBILITY: hidden; TOP: 26px; LEFT: 0px
}
#ubmenu1 {
POSITION: absolute; WIDTH: 120px; VISIBILITY: hidden; TOP: 52px; LEFT: 100px
}
#enu2 {
POSITION: absolute; WIDTH: 120px; VISIBILITY: hidden; TOP: 26px; LEFT: 100px
}
#enu3 {
POSITION: absolute; WIDTH: 120px; VISIBILITY: hidden; TOP: 26px; LEFT: 200px
}
#enu4 {
POSITION: absolute; WIDTH: 120px; VISIBILITY: hidden; TOP: 26px; LEFT: 300px
}
/* hasta aqui es el menu*/
/* Definicion del main */
#main {
width:100%;
height:auto;
background-color:brown;
margin:0;
padding: 0;
border: 0;
}
#wrapper_main {
width:100%;
height:auto;
overflow:hidden;
margin:0;
padding: 0;
border: 0;
}
#columna1 {
width:10%;
background-color:orange;
float:left;
margin:0;
border:0;
padding: 0.5% 0.5% 0.5% 0.5%;
}
#columna2 {
width:88%;
background-color:yellow;
float:left;
margin:0;
border:0;
padding: 0.5% 0.5% 0.5% 0.5%;
}
/* Definicion del footer */
#footer {
width:100%;
height:auto;
background-color:#D8D8D8;
margin:0;
padding: 0;
border: 0;
text-align: right;
}
