les vengo a preguntar como puedo acomodar mi web, esta es mi web
Código:
Bueno como ven aparece un lugar para el menu, otro para el contenido, y el otro para boxes, me base casi todo en imagenes, bueno ahora les pregunto, como hago para poner la seccion del contenido y de los boxes a la altura del menu, como veran me sale muy abajo y a mi me gustaria que apareciera a la misma altura y con la misma separacion una seccion con la otra...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Bienvenidos</title>
<style type="text/css">
<!--
body {
background-color: black ;
}
#left{
width:50px;
float:left;
}
#center{
margin-left:260px;
}
#right{
width:50px;
float:right;
}
.espacio {
background-image:url(images/Plantilla-web1_05.jpg);
width: 980px;
height: 50px;
}
.cabezera {
background-image:url(images/Plantilla-web1_03.jpg) ;
width: 937px;
height: 185px;
margin-left:18px;
margin-right:20px;
}
.contenidohead {
width: 427px;
height: 42px ;
background-image:url(images/Plantilla-web1_08.jpg) ;
display:block ;
margin-left:0px;
margin-right:0px;
}
.contenidocont
{
background-image:url(images/Plantilla-web1_13.jpg);
width: 427px;
height: 581px;
display:block;
}
.menuhead {
width:223px;
height:42px;
background-image:url(images/Plantilla-web1_06.jpg);
display:block;
margin-left:0px;
margin-right:0px;
}
.menucont {
background-image:url(images/Plantilla-web1_17.jpg);
width: 223px;
height: 388px;
display:block;
}
.boxhead {
width:223px;
height:42px;
background-image:url(images/Plantilla-web1_06.jpg);
display:block;
margin-left:0px;
margin-right:0px;
}
.boxcont {
background-image:url(images/Plantilla-web1_17.jpg);
width: 223px;
height: 388px;
display:block;
}
-------/MENUVERTICAL/-------
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover, #menu4 li #current {
color: #FFF;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
-----/MENUHORIZONTAL/-----
#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}
-->
</style>
</head>
<body>
<div class="espacio">
</div>
<div class="cabezera">
</div>
<div id="tabsH">
<ul>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
</ul>
</div>
<div class="espacio">
</div>
<div id="left">
<div id="menu4">
<div class="menuhead"><center>MENU</center>
</div>
<div class="menucont">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="center">
<div class="contenidohead"><center>CONTENIDO</center>
</div>
<div class="contenidocont">
</div>
<div id="right">
<div class="boxhead"><center>BOX</center>
</div>
<div class="boxcont">
</div>
</body>
</html>
Espero que me puedan ayudar, desde ya muchas gracias...
ATT: Brian
Salu2
