SoloCodigo

Programación Web y Scripting => HTML => CSS / SASS / LESS => Mensaje iniciado por: AndresFCECEP en Lunes 3 de Marzo de 2014, 22:02

Título: Posicion de un div debajo de otro de forma automatica
Publicado por: AndresFCECEP en Lunes 3 de Marzo de 2014, 22:02

Buenas tardes a todos quisiera saber si me pueden colaborar en como darle a los div un modo automatico para que aparezca de nuevo tal como los tengo debajo de los primeros ya que a traves de php cargo los datos y necesito que se me impriman n cantidad de veces gracias aqui dejo el codigo

Código: [Seleccionar]

@charset "UTF-8";

.foto{
list-style: none;

width: 6%;
height: 12%;

margin: 1.5% 3%;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}

.ajustar{
list-style: none;

width: 6%;
height: 12%;


position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}

.circular {
width: 30px;
height: 30px;
border-radius: 15px;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;
-webkit-border-radius: 15px; -moz-border-radius: 15px;
}

.info{
list-style: none;

width: 18%;
height: 30%;

margin: 1.5% 10.5%;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;

}

.diasR{
list-style: none;

width: 6%;
height: 14%;

margin: 8.5% 3%;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}

.mapa{
list-style: none;

width: 22%;
height: 23%;

margin: 5% 30%;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}

.referido{
list-style: none;

width: 3%;
height: 5%;

margin: 1.5% 30%;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}

.Adias{
list-style: none;

width: 3%;
height: 5%;

position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}
.recordatorio{
list-style: none;

width: 3%;
height: 5%;

margin: 1.5% 37%;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}

.Arecordatorio{
list-style: none;

width: 3%;
height: 5%;

position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}
.comentarios{
list-style: none;
overflow-y: scroll;
width: 49%;
height: 20%;

margin: 17% 3%;
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;

}
#comentariado{


width: 46%;
height: 8%;
margin: 0.5% 1%;
background-color: rgb(55,22,11);
border:3px solid #f4f4f4;
background:rgba(255,255,255,.5);
position: fixed;

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}

.cajaComunicacion{
  width:13%;
  height: 21%;


  margin:1% 55%;
  padding:10px 50px;
  border:3px solid #f4f4f4;
  background:rgba(255,255,255,.5);
  position: fixed;

  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
 
  -webkit-box-shadow: 0 0 2px #aaa;


  -moz-box-shadow: 0 0 2px #aaa;
  box-shadow: 0 0 2px #aaa;
}

.cajaR{
  width:13%;
  height: 21%;


  margin:14% 55%;
  padding:10px 50px;
  border:3px solid #f4f4f4;
  background:rgba(255,255,255,.5);
  position: fixed;

  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
 
  -webkit-box-shadow: 0 0 2px #aaa;


  -moz-box-shadow: 0 0 2px #aaa;
  box-shadow: 0 0 2px #aaa;
}



Título: Re:Posicion de un div debajo de otro de forma automatica
Publicado por: Haggen en Miércoles 28 de Mayo de 2014, 19:27

 no me queda muy claro que quieres hacer, pero puedes usar posiciones absolutas para posicionar tus dos capas, o usar tablas y así tener una capa y otra abajo de la primera.