Comunidad de diseño web y desarrollo en internet online

posicionamiento DIV en circular

Citar            
MensajeEscrito el 05 Abr 2011 02:59 pm
Hola a todos, estoy empezando con esto del CSS y me gustaria pasar, algunas de las paginas q tengo, a este formato......... y se me hace muy cuesta arriba lo de posicionar las div........ se que las que flotan a la derecha, tienen que aparecer en el codigo antes y demás.......... pero intento ponerlas en forma más o menos circular, y me pierdo, os pongo un ejemplo, como tendría que hacer estas div??? os pongo un link:

http://www.santandreu.gurrea.es/CADET_D_TEMPORADA-2010-11/index.html


muchas gracias.

Por lisbet

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 05 Abr 2011 04:33 pm
La cosa es tener un DIV contenedor con

Código HTML :

<style>
#tu_contenedor{
position:relative;
}
</style>


Y despues haces un div por cada boton que quieres situar, despues tienes que jugar con TOP y LEFT algo de la siguiente manera

Código HTML :

<style>
.botones{
width:50px;
height:50px;
position:absolute;
}

#boton_1{
top:250px;
left:10px;
}

#boton_2{
top:200px;
left:60px;
}

#boton_3{
top:150px;
left:120px;
}

#boton_4{
top:200px;
left:180px;
}

#boton_5{
top:250px;
left:240px;
}
</style>


Con esto si te fijas, creamos una clase con atributos que todos los botones comparten.

Todos miden 50px de ancho y 50px de alto, y todos tienen posicionamiento absoluto, en ineherencia a su ultimo padre con algún posicionamiento, en este caso nuestro contenedor tiene un atributo, position:relative;.

Entonces todos los botones van a ser relativos al contenedor.

Poner los atributos "Top:0px y Left:0px;" a tus botones, los colocaría en la esquina superior izquierda de tu contenedor.

Es por eso que necesitas acomodarlos con top y left segun sea la hubicacion en los que los quieres poner.

ahora tu HTML deberia quedar algo asi

Código HTML :

<html>
  <head>
<style>
#tu_contenedor{
position:relative;
}

.tus_botones{
width:50px;
height:50px;
position:absolute;
}

#boton_1{
top:250px;
left:10px;
}

#boton_2{
top:200px;
left:60px;
}

#boton_3{
top:150px;
left:120px;
}

#boton_4{
top:200px;
left:180px;
}

#boton_5{
top:250px;
left:240px;
}
</style>
  </head>
  <body>
      <div id="tu_contenedor">
          <div id="boton_1" class="tus_botones">
              <a href="tu_link.html"/>
          </div>
          <div id="boton_1" class="tus_botones">
              <a href="tu_link.html"/>
          </div>
          <div id="boton_2" class="tus_botones">
              <a href="tu_link.html"/>
          </div>
          <div id="boton_3" class="tus_botones">
              <a href="tu_link.html"/>
          </div>
          <div id="boton_4" class="tus_botones">
              <a href="tu_link.html"/>
          </div>
          <div id="boton_5" class="tus_botones">
              <a href="tu_link.html"/>
          </div>
      </div>
  </body>
</html>



Saludos

Por jOina

Claber

359 de clabLevel

2 tutoriales

 

Guadalajara, Mexico

firefox
Citar            
MensajeEscrito el 05 Abr 2011 04:48 pm
gracias Joina, si, eso es lo que empecé a hacer, pero no me salia, me volvia loca, porque otra de las cosas que queria hacer, era centrar la div contenedor, como en esta pagina.... intentaré seguir con todo detalle tu post, a ver que pasa, ya os contaré.... gracias

Por lisbet

6 de clabLevel



 

msie7

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.