Allineare div centralmente

[Edipo]

Ciao a tutti, come si intuisce dal titolo sto cercando di ottenere questo risultato ma senza speranza:



qui il codice che ho scritto:

<div style="width:150px;">
<div class="xhtml-icon"></div>
<div class="css-icon"></div>
</div>

.xhtml-icon a		{width:70px;height:20px;background-image:url('../images/xhtml-icon.gif');background-repeat: no-repeat;background-position:top center;display:block;}
.xhtml-icon a:hover	{width:70px;height:20px;background-image:url('../images/xhtml-icon.gif');background-repeat: no-repeat;background-position:top center;}

.css-icon a
{width:70px;height:20px;background-image:url('../images/css-icon.gif');background-repeat: no-repeat;background-position:top center;display:block;}
.css-icon a:hover
{width:70px;height:20px;background-image:url('../images/css-icon.gif');background-repeat: no-repeat;background-position:top center;}

Dove sbaglio?

[knifekiller]

scusami..perchè nelle tue css vedo a e a:hover? sono classi che devi dare ai link..ma non definiscono niente sui div che vuoi posizionare in un certo modo..è come se quei div non avessero nessuna classe..

[Edipo]

Al dire in vero è cosi che faccio i link con immagini senza utilizzare il tag <img, non saprei.

[gengix]

Evita gli stili in linea, ma definisci tutto da css.
Cmq ai div figli del contenitore dichiara la proprietà float; poi giochi con dei margini per distanziarli.
Nel tuo caso potresti dare le proprietà direttamente ai link ed evitare di racchiuderli dentro dei div.

[Edipo]

gengix grazie per la risposta, in effetti quella dichiarazione era solo per una prova, ripongo tutto nei fogli.
Allora sto seguendo il tuo consiglio e cioè:

<div id="container">[url=""][/url][url=""][/url]</div> 

e il css

#container {width:150px;}

.icon a, icon a:hover    {
    width:70px;
    height:20px;
    background-image:url('img/xhtml-icon.gif');
    background-repeat: no-repeat;
    background-position:top center;
    display:block;
    float:;
} 

Ma non capisco, che valore dovrei assegnare a float?
Comunque, a parte questo problema che ho postato, io non capisco come impaginare i div seguendo lo schema sopra. In pratica, dato che questo div "contenitore" deve essere centrato, assegnando un float:left ai div interni mi salta l'allineamento orizzontale del contenitore.
Fatemi capire vi prego, altrimenti ritorno alle tabelle!!!!

[knifekiller]

allora:

ai due float interni al div contenitore dai float:left;

al div contenitore (e intendo quello che contiene gli altri due divettini float left) dai un margin:auto;

dovrebbe andare!

[Edipo]

Ciao, grazie per la risposta.
Ho aggiunto il margin:auto; e float:left; alle <a ma a prescindere da questo gli sfondi nn vengono piu visualizzati, sarà perchè ho eliminato i div? (il percorso della jpg è corretto)

[knifekiller]

eh..se le immagini le avevi nei div...si..io farei un contenitore con le misure che t servono, dentro altri due div con le immagini linkate

[gengix]

Non c'è bisogno di fare 2 div che contangano i link.
Ai link dai un display:block con una width e una height, con un backgroung-image e non dovrebbero sorgere problemi.

[knifekiller]

sempre e cmq div!W i diiiiiiiv!!