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
Escrito el 05 Abr 2011 04:33 pm
