div float e allineamento centrale

[dados881]

ciao a tutti, cerco di spiegare il mio problema.

ho creato un div contenitore che contiene tre div che vanno l'uno di fianco all'altro attaccati. Per mettere l'uno di fianco all'altro ho usato float:left, che va bene, però chiaramente tutti e tre mi vanno a sinistra, mentre io li vorrei in posizione centrale.

posto il codice ccs:

#contenitore {
width:100px;
}

#primo {
float:left;
width:20px;
}

#secondo {
float:left;
width:30px;
}

#terzo {
float:left;
width:20px;
}

posto ora il codice html:

<div id="contenitore">
<div id="primo"></div>
<div id="secondo"></div>
<div id="terzo"></div>
</div>

spero di essermi spiegato bene, qualcuno potrebbe aiutarmi per favore???
ho fatto diverse prove con display, float, text align, ma non mi viene, vengono sempre messi sulla sinistra...
grazieee

[alexforum]

per centrare il contenitore;
#contenitore {
width:100px;
margin: 0 auto;
}

per far occupare ai tre div tutto lo spazio del contenitore prova a impostare quello centrale con width: 60px; gli altri due 20px

ovviamente poi adatti la larghezza in base alle tue esigenze

[Mich_]

Il tuo e` un caso a larghezza fissa: si risolve molto facilmente usando i margini opportunamente.
Ad esempio se metti nel secondo:
margin: 0 15px;
padding: 0;
border: 0;

e metti in quelli esterni:
margin: 0;
padding: 0;
border: 0;

Per altri casi (senza larghezze fisse), di solito si riesce a risolvere, ma la soluzione e` diversa caso per caso.

[dados881]

grazie mille x le risposta, funziona... i tre div mi servono perchè voglio fare un menu orizzontale con bordi arrotondati. ho provato la soluzione della tabella, l'unico problema rimasto è che tra primo e secondo, e tra secondo e terzo mi da un leggero spazio, anche dopo aver messo margin:0;

posto il codice css che ho messo:

#menu {
height:30px;
background-image:url(../images/bg_menu.png);
}

#menu_l {
width:30px;
height:30px;
background-image:url(../images/menu_l.png);
}

#menu_c {
width:30px;
height:30px;
background-image:url(../images/menu_c.png);
background-repeat:repeat-x;
}

#menu_r {
width:30px;
height:30px;
background-image:url(../images/menu_r.png);
}

#menu table { border:none; margin:0 auto; }
#menu td { padding:0;}

e il codice html:


<div id="menu">

<table>
<tr>
<td>
<div id="menu_l">
</div>
</td>
<td>
<div id="menu_c">
</div>
</td>
<td>
<div id="menu_r">
</div>
</td>
</tr>
</table>


</div>


qualche dritta?
ultima domanda, ma se il menu lo faccio con questa soluzione delle tabelle a livello di visibilità cambia qualcosa??? con google intendo, poichè ho letto che le tabelle è meglio non usarle.... grazie ancora.

[Mich_]

Attenzione alla semantica!!

I menu sono delle liste e come tali vanno resi.
Una serie di <div> non da' l'idea di lista, salvo alle persone che vedono fisicamente la pagina; una tabella e` anche sbagliata: le tabelle servono solo per intabellare dati che sono in correlazione di riga e di colonna.
Fare i menu con tecniche diverse dalle liste, da un lato crea pagine che non possono venir comprese da utenti che non usano browser visivi, dall'altro vengono penalizzate dai motori di ricerca.

Comunque il discorso fatto per i <div> (per spaziarli in orizzontale) vale anche per glioggetti[*] delle liste, dato che sono ambedue oggetti di tipo blocco.
Comunque per i menu conviene copiarli dai siti specializzati (vedi ad esempio tra i "link utili", in particlare la pagina di CSSplay).