poner botones con formato de calculadora

[rstapia]

Hola amigos...a ver si me pueden ayudar, tengo que hacer una web donde me aparezcan unos botones redondos ( concretamente 8 botones, cada uno con un nº dentro ...lo botones ya los tengo creados con photoshop) y los tengo que colocar como si fuesen los botones de una calculadora centrados en la página, es decir, así:

7 8 9

4 5 6

1 2 3

esto lo tengo que hacer con css, el problema es que no soy capaz de disponerlos en dicha posición, (uno al lado del otro y debajo de otro)

¿como lo puedo hacer con css de manera que los navegadores no me los descoloquen?

Gracias

[memoadian]

crea un div
establece un ancho
coloca 9 divs dentro
dales la propiedad float:left
establece el ancho de cada div interior a un tercio del mayor

listo :D

[rstapia]

a ver si te entiendo....me creo un
<div id="botones">
<div id="9"><img src="boton9.jpg"></div>
<div id="8"><img src="boton9.jpg"></div>
<div id="7"><img src="boton9.jpg"></div>
<div id="6"><img src="boton9.jpg"></div>
<div id="5"><img src="boton9.jpg"></div>
<div id="4"><img src="boton49.jpg"></div>
<div id="3"><img src="boton3.jpg"></div>
<div id="9"><img src="boton9.jpg"></div>


</div>

[rstapia]

ufff.se me ha ido antes de tiempo el enter.....me dices que le aplique un float?y...un tamaño de 1/3?...donde pongo eso?

[rstapia]

mira .... te mando un boceto de lo que intento hacer,...el problema es que no se como hacerlo con css pues cuando aplico un efecto a un boton o conjunto pues el otro grupo de div hace lo que quiere....



como lo puedo hacer para que cuando aplique atributos a los botones se me pongan en la posición como aparece en la imagen y no me distorsione ningun otro elemento(div) como por ejemplo el logo ó el índice?

[furoya]

Iniciado por rstapia

como lo puedo hacer para que cuando aplique atributos a los botones se me pongan en la posición como aparece en la imagen y no me distorsione ningun otro elemento(div) como por ejemplo el logo ó el índice?

¿Aprendiendo CSS básico y elemental, nunca; no?

¿Qué tiene de complicado tu planteo? Digo, al margen de que empezaste pidiendo por una cosa, y terminaste con otra distinta.
Teclado de calculadora, teclado de teléfono ... ¿la próxima será teclado de bandoneón?

[memoadian]

a ver veamos

Código CSS:

.calculadora{
width:300px;
margin:0 auto;
position:relative;
padding:0;
}
 
.boton{
float:left;
width:100px;
margin:0;
padding:0;
}
 

Código HTML:

<div id="calculadora">
<div class="boton"><img src="boton1.jpg" alt=""/></div>
<div class="boton"><img src="boton2.jpg" alt=""/></div>
<div class="boton"><img src="boton3.jpg" alt=""/></div>
<div class="boton"><img src="boton4.jpg" alt=""/></div>
<div class="boton"><img src="boton5.jpg" alt=""/></div>
<div class="boton"><img src="boton6.jpg" alt=""/></div>
<div class="boton"><img src="boton7.jpg" alt=""/></div>
<div class="boton"><img src="boton8.jpg" alt=""/></div>
<div class="boton"><img src="boton9.jpg" alt=""/></div>
</div>
 

Es muy sencillo, si quieres algo más esfuerzate un poco y lee algo de css.