Hola a todos.
Estoy teniendo un problema que no he podido resolver.
Estoy creando una web y al momento me iba todo bien.
Cuando agregue el div 1 es cuando empezó el problema.
Me queda todo encimado y ya he tratado miles de cosas pero no se dar con el problema.
la url para que puedan ver el problema es www.plazahosting.com.uy/2
tendría que quedar los 4 rectángulos, después el banner y después los otros 4 rectángulos mas.
mi código es este:
<div id="contenedor">
<div id="cabezera">
</div>
<div id="contenido">
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
</div>
</div>
</div>
<div id="planes">
<div id="diseno-texto">
<div id="planes2">
<div id="imagen-planes"></div>
<div id="diseno-titulo"></div>
<div id="diseno-texto2">
</div>
</div>
<p> </p>
</div>
</div>
<div id="1">
<div id="img1">
</div>
<div id="img2">
</div>
<div id="img3">
</div>
<div id="img4">
</div>
</div>
<div id="propaganda"></div>
<div id="nada">
<div id="contacto">
</div>
<div id="respaldo">
</div>
<div id="seo">
</div>
<div id="seguridad">
</div>
</div>
<div id="face">
</div>
</div>
y mi css es este:
@charset "utf-8";
/* CSS Document */
html,body{
height:100%; width:100%;
}
#contenedor{
display:table;
width:100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: auto;
position:relative;
}
#cabezera {
width:100%;
background-image:url(../images/back.png)
}
#logo {width:28%; height:auto; margin-left:35%;}
#facebookcabeza{ position:absolute; width:auto; height:auto; margin-top:-28px; right:2%;}
#botonera {width:560px; height:55px; margin:auto; margin-top:5px; }
/* empieza estilos del menu */
#nav,#nav ul {
font-family:verdana;
list-style:none;
margin:0;
padding:0;
position:relative;
}
#nav {
height:50px;
left:0;
overflow:hidden;
top:0;
}
#nav li {
float:left;
position:relative;
z-index:10;
}
#nav li a {
background:url(../images2/bg-menu.png) no-repeat center top;
color:#fff;
display:block;
float:left;
font-size:14px;
height:51px;
line-height:40px;
padding:0 10px;
position:relative;
text-decoration:none;
z-index:20;
}
#nav li:first-child a {
background:url(../images2/bg-menu.png) no-repeat left top;
padding-left:35px;
}
#nav li ul li:first-child a {
background-image:none;
padding-left:10px;
}
#nav li.pad {
background:url(../images2/bg-menu.png) no-repeat right top;
display:block;
height:51px;
width:35px;
}
#nav ul {
background:#333;
height:auto;
padding:10px 0;
position:absolute;
top:-115px;
width:180px;
z-index:1;
border-radius:8px; /*some css3*/
-moz-border-radius:8px;
-webkit-border-radius:8px;
transition:0.8s ease-in-out;
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-transition:0.8s ease-in-out;
-o-transition:0.8s ease-in-out;
-webkit-transition:all 0.8s ease-in-out;
}
#nav ul li {
width:180px;
}
#nav ul li a {
background:transparent;
height:20px;
line-height:20px;
width:160px;
}
#nav:hover {
height:200px;
}
#nav li:hover ul {
-moz-transform:translate(0,161px); /*some css3*/
-o-transform:translate(0,161px);
-webkit-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
color:#CCC;
}
/* empieza propaganda de diseño web de la pagina principal*/
#planes {width:92%; margin:auto; margin-top:5px; position:relative;}
#imagen-planes {
width: 350px; position:relative;
float: right;
padding-top:5px;
}
#diseno-titulo {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
width: 550px;
color: #313131;
font-weight: bold;
padding-top: 5px; margin-top:5px; text-decoration:underline; margin-left:15px;
}
#diseno-texto {
font-weight: normal;
font-size: 12px;
width: auto;
margin-left:15px; padding-top:4px;
font-family: Sans-serif;
color: #666; position:relative;
}
#1 { width:90%; }
.imagen_contacto { width:40%; position: relative; margin-left:1%; padding-top:1%; margin-top:3%; margin-left:32%; }
.text1contacto {
font-weight: normal;
font-size: 12px;
width:98%;
font-family: Sans-serif;
position:absolute;
text-align: center;
top: 96px;
height: 284px; color:#FFF;
}
#img1 {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:40px;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#img2 {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:27%;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#img3 {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:52%;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#img4 {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:76%;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#propaganda { height:200px;width:99%; margin-top:80px; background-image:url(../images/banner/1.png); background-repeat:no-repeat; background-position:center; }
/* termina propaganda de diseño web de la pagina principal*/
#nada { width:90%; }
.imagen_contacto { width:40%; position: relative; margin-left:1%; padding-top:1%; margin-top:3%; margin-left:32%; }
.text1contacto {
font-weight: normal;
font-size: 12px;
width:98%;
font-family: Sans-serif;
position:absolute;
text-align: center;
top: 96px;
height: 284px; color:#FFF;
}
#contacto {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:40px;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#respaldo {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:27%;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#seo {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:52%;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#seguridad {
width:18%;
margin-top:5px;
border: 1px #063 solid;
position:absolute;
margin-left:76%;
background-image:url(../images/1.png);
background-repeat:no-repeat;
height: 271px; border-top-left-radius:15px;
border-top-right-radius:0;
border-bottom-right-radius:15px;
border-bottom-left-radius:0; box-shadow: 15px 5px 10px #aaa;
border-radius: 10px;
/*border-radius: : 15px 0 15px 0;*/
}
#push{
height:29px;
}
#footer{
width: 100%;
position:fixed;
height: 80px;
text-align: left;
padding: 4px 0px;
background: #1d1d1d;
font-family: "century gothic","arial";
color: #F7F2EF;
font-size: 10px;
bottom:0px;
z-index:3;
}
.marcas { font-family:"Arial Black",
font-size: 18px; height:50px; margin-left:250px;
color: #FFF; width:80%; font-weight: bold;
}
.copyright { font-family:"Arial Black",
font-size: 10px;
width:82%;
color: #FFF; padding-left:2%; margin-top:1%;
font-size: 12px;}
#face { margin-top:290px; margin-left:18%; margin-right:28%; position:absolute; float:left;}
la url para que puedan ver el problema es www.plazahosting.com.uy/2
Tendrían que quedar los 4 rectángulos de arriba, después el banner y después otros 4 rectángulos.
Desde ya agradezco a quien me pueda dar una manito.