Joomla.it Forum

Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : donato.chpp 03 Apr 2009, 00:10:36

: div float e allineamento centrale
: donato.chpp 03 Apr 2009, 00:10:36

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

: Re: div float e allineamento centrale
: conti1 03 Apr 2009, 05:16:17

ciao
allora metti questo nel tuo html
 non sapendo le misure del template ho messo 100% 30% 30%
100 e la prima colonna 30 le altre due

:

         <table width="100%" border="0">
   <tr>
    <td width="50%"> <div id="primo">
      <jdoc:include type="modules" name="user9" style="xhtml" />
    </div></td>
   <td width="30%"> <div id="secondo">
     <jdoc:include type="modules" name="user8" style="xhtml" />
</div></td>
    <td width="30%"><div id="terzo">
      <jdoc:include type="modules" name="user7" style="xhtml" />
</div></td>
   
   </tr>
 </table>
il css

:

#primo {
   
}

#secondo {
 
}

#terzo {
   
}

: Re: div float e allineamento centrale
: donato.chpp 03 Apr 2009, 12:54:40

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

ti 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:

<!-- inizio menu -->
<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>
<!-- fine menu -->

qualche dritta???? grazie comunque per l'illuminante risposta di prima  :)
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.

: Re: div float e allineamento centrale
: conti1 03 Apr 2009, 13:37:23

ciao
aggiungi questo nel css primo secondo terzo ho come li hai chiamati tu
tu vuoi aumentare lo spazio giusto tra una colonna  e l'altra giusto

:

padding-right:40px;

: Re: div float e allineamento centrale
: donato.chpp 03 Apr 2009, 13:51:01

no, io iovece vorrei il contrario, lui tra il primo e il secondo mi da uno spazio di un paio di px, invece io vorrei che venissero attaccate, e stessa cosa tra il secondo e il terzo

: Re: div float e allineamento centrale
: conti1 03 Apr 2009, 14:32:38

allora sostituisci  questo che e la prima riga di quello che to postato

:

<table width="100%" border="0">
con questo

:

<table width="100%" border="0" cellspacing="0">in questo modo hai le colonne senza spazzi.