Me ayudan a acomodar mi web?

brian956 · #1 (**permalink**) 16/08/2009, 05:43

Hola amigos de Foros del Web...

les vengo a preguntar como puedo acomodar mi web, esta es mi web

Código:

<!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>

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...

Espero que me puedan ayudar, desde ya muchas gracias...

ATT: Brian

Salu2

jomaruro · #2 (**permalink**) 16/08/2009, 10:57

Hola:

De entrada tienes algun div sin cerrar, y sin una imagen es difícil saber como la quieres diseñar.

Saludos.

nemesis866 · #3 (**permalink**) 16/08/2009, 21:21

hola, la etiqueta center ya se considera obsoleta, asi que mejor centre el codigo con css

text-align: center ;

Saludos