• Bannato Super User

    Uso dei div

    SAllora ragazzi dopo una bella discussione con Stuart, monto costruttiva, sto cercando di ottimizzare un pò tutto il sito eliminando dove è possibile le tabelle e sostituendole con i div, e qui iniziano i problem:

    Inizio dalla tabella piu semplice ( QUELLA DEL FOOTER DELLA PAGINA )

    CODICE VECCHIO CON LA TABELLA

    
    				
    				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="footer_table">
      				<tr>
        				<td align="center">[url="<? echo BASE_URL; ?>#"]Chi Siamo</td>
    					<td align="center">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</td>
    					<td align="center">[url="<? echo BASE_URL; ?>#"]FAQ</td>
    					<td align="center">[url="<? echo BASE_URL; ?>#"]Glossario</td>
    					<td align="center">[url="<? echo BASE_URL; ?>#"]Site Map</td>
    					<td align="center">[url="<? echo BASE_URL; ?>#"]link</td>
    					<td align="center">[url="<? echo BASE_URL; ?>staff.htm"]Lo Staff</td>
    					<td align="center">[url="<? echo BASE_URL; ?>utenti.htm"]Utenti</td>
    					<td align="center">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</td>
      				</tr>
    				</table>
    				
    

    CSS ASSOCIATO

    
    .footer_table&#123;
    	border:1px solid #cdd6dd;
    	&#125;
    
    A.menu_footer&#123;font-family&#58;Tahoma;font-size&#58;11px;color&#58;#575757;text-decoration&#58;none;&#125;
    A.menu_footer&#58;hover&#123;font-family&#58;Tahoma;font-size&#58;11px;color&#58;#6b8bb4;text-decoration&#58;none;&#125;
    
    
    

    STESSO MENU MA CON I DIV

    
    <div id="footer_table">
    	[url="<? echo BASE_URL; ?>#"]Chi Siamo
    	[url="<? echo BASE_URL; ?>contatti.htm"]Contatti
    	[url="<? echo BASE_URL; ?>#"]FAQ
    	[url="<? echo BASE_URL; ?>#"]Glossario
    	[url="<? echo BASE_URL; ?>#"]Site Map
    	[url="<? echo BASE_URL; ?>#"]link
    	[url="<? echo BASE_URL; ?>staff.htm"]Lo Staff
    	[url="<? echo BASE_URL; ?>utenti.htm"]Utenti
    	[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità
    </div>
    
    
    

    CSS ASSOCIATO

    #footer_table&#123;
    	text-align&#58;center;
    	border&#58;1px solid;
    	&#125;	
    
    A.menu_footer&#123;font-family&#58;Tahoma;font-size&#58;11px;color&#58;#575757;text-decoration&#58;none;&#125;
    A.menu_footer&#58;hover&#123;font-family&#58;Tahoma;font-size&#58;11px;color&#58;#6b8bb4;text-decoration&#58;none;&#125;
    
    
    

    Ma il risultato non è lo stesso come posso ovviare ?

    Nella prima soluzione i vari link si distribuiscono uniformemente per tutto il rigo, nella seconda invece i vari link sono tutti allineati al centro.


  • Bannato Super User

    Ho fatto in questo modo ma ancora nulla:

    
    <div id="footer_table">
    	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]Chi Siamo</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]FAQ</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]Glossario</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]Site Map</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>#"]link</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>staff.htm"]Lo Staff</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>utenti.htm"]Utenti</div>
    	<div id="footer_link">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</div>
    </div>
    
    

    CSS ASSOCIATO

    #footer_table&#123;
    	text-align:center;
    	border&#58;1px solid #cdd6dd;
    	&#125;
    #footer_link&#123;
    	width&#58;85px;
    	&#125;
    

  • User

    Potresti provare a definire i vari link in una lista ed ordinarla in orizzontale.
    In questa pagina http://www.cssplay.co.uk/menus/centered2.html trovi tre esempi di menu' con allineamento a sinistra, centrato ed a dex.


  • Bannato Super User

    Allora ecco il problema mio solito dei div LA POSIZIONE

    Io ha creato questo menu con i div:

    CSS

    .menu a&#123;
      float: left;
      padding&#58; 2px;
      margin&#58; 1px;
      border&#58; 1px solid #cdd6dd;
      width&#58;100px;
      text-align&#58;center;
      text-decoration&#58;none;
      font-weight&#58;bold;
      &#125;
    .menu a&#58;hover&#123;
    background-color&#58; #003366;
    color&#58;#FFF;
    &#125;
    
    #barranav&#123;
    position&#58;absolute;
    top&#58;20px;
    left&#58;20px;
    padding&#58;2px;
    &#125;
    

    XHTML

    <div id="barranav">
      <div class="menu">[url="<? echo BASE_URL; ?>#"]Chi Siamo
      <div class="menu">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>
      <div class="menu">[url="<? echo BASE_URL; ?>#"]FAQ</div>
      <div class="menu">[url="<? echo BASE_URL; ?>utenti.htm"]Glossario</div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Site Map </div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Link</div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Lo Staff </div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Utenti</div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</div>
    
    </div>
    

    Questo menu deve stare all'interno di un td lo posiziono li dentro... ma poi se ne va dove vuole lui... come posso ovviare?


  • User

    @mix said:

    XHTML

    <div id="barranav">
     <div class="menu">[url="<? echo BASE_URL; ?>#"]Chi Siamo
     <div class="menu">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>
    
    

    Questo menu deve stare all'interno di un td lo posiziono li dentro... ma poi se ne va dove vuole lui... come posso ovviare?

    Prova a chiudere il div di "Chi siamo".


  • Bannato Super User

    Non era il div il problem ma il position cmq ora ho risolto, piccolo problema che mi è rimasto non riesco a centrare il div ...

    Pagina principale dove verrà stampato il footer

    <tr>
      	  	<td align="center"><? include&#40;"menu/menu_fuut.php"&#41;; ?></td>
    	</tr>
    
    

    XHTML

    <div id="barranav">
      <div class="menu">[url="<? echo BASE_URL; ?>#"]Chi Siamo</div>
      <div class="menu">[url="<? echo BASE_URL; ?>contatti.htm"]Contatti</div>
      <div class="menu">[url="<? echo BASE_URL; ?>#"]FAQ</div>
      <div class="menu">[url="<? echo BASE_URL; ?>utenti.htm"]Glossario</div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Site Map </div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Link</div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Lo Staff </div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Utenti</div>
      <div class="menu">[url="<? echo BASE_URL; ?>pubblicita.htm"]Pubblicità</div>
    
    </div>
    
    
    

    CSS ASSOCIATO

    .menu a&#123;
      float: left;
      padding&#58; 2px;
      margin&#58; 1px;
      border&#58; 1px solid #cdd6dd;
      width&#58;75px;
      font-size&#58;11px;
      text-align&#58;center;
      text-decoration&#58;none;
      font-weight&#58;bold;
      &#125;
    .menu a&#58;hover&#123;
    font-size&#58;11px;
    color&#58;#6b8bb4;
    &#125;
    
    #barranav&#123;
    font-size&#58;11px;
    padding&#58;1px;
    &#125;
    

  • Bannato User Attivo

    @webmas said:

    Potresti provare a definire i vari link in una lista ed ordinarla in orizzontale.

    scusate l'intromissione in questo topic :fagiano:
    se volessi imparare come si fanno le liste dei link, sarebbe fattibile anche con HTML 4.01?


  • User Attivo

    XHTML

    Se per liste intendi gli elenchi puntati si fa in questo modo:

    <ul type="disc">
    										* [nome sito](http://www.nomesito.it)
    										
    

  • Bannato User Attivo

    uhmmm.. non proprio anche se forse non sarebbe male neanche un elenco puntato.. (come verrebbe esteticamente? come i classici elenchi puntati di Word? :mmm: )
    Cmq spiego meglio quello che intendo: 🙂

    Caso 1)
    metti che ho che so 10 links dotati della stessa classe, messi in fila uno a uno, alla fine dei quali andare a capo, tutti centrati nella pagina, è il caso di creare qualcosa di particolare o anche usare i semplicissimi
    per andare a capo è una soluzione (semplicistica, sicuramente :bho: ) ma valida?

    Caso 2) [più particolare]
    metti che anziché creare un menu di navigazione delle aree principali con bottoni o altre soluzioni avanzate, lo abbia con dei semplicissimi link testuali; in questo caso ho la necessità di posizionarli, per ragioni di estetica e distribuzione ragionevole dello spazio, non tutti sulla stessa riga, ma magari su due, e ovviamente, ogni link ha classi diverse, e devono essere posizionati comunque tutti al centro della pagina, devo creare una lista?
    L'uso del "div id" (che non ho ancora imparat0 😞 ) sarebbe quello che ci vuole in questo caso?
    Perdonate la domanda sicuramente banale, ma come sapete sono ancora una principiante :mmm:


  • Moderatore

    caso 1:

    <ul style="list-type:none">
     * item1
     * item2
     * item3
    .....
     * item10
    
    

    caso 2:

    crei due liste, e le posizioni dove vuoi...

    <ul style="float:left; width:200px">
    ....
    ....

    <ul style="float:left; width:200px">
    ....
    ....

    <sometag style="clear:left" /> tanto per fare un esemipio al volissimo

    :ciauz: