Newsgroup: it.comp.www.html
Titolo: [CSS] Allineamento orizzontale immagini e tabelle

Un saluto a tutti i frequentatori di icwh.
Ho un piccolo problema con il posizionamento degli oggetti(vedere immagini e
tabelle).
Supponendo di avere una pagina così fatta :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head></head>
<body>
<table cellpadding="2" cellspacing="0" class="table">
        <tr>
          <td class="td"><a href="www.www.www">Menu 1</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
        </tr>
        <tr>
          <td class="td"><a href="www.www.www">Menu 2</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
        </tr>
        <tr>
          <td class="td"><a href="www.www.www">Menu 3</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
        </tr>
        <tr>
          <td class="td"><a href="www.www.www">Menu 4</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
        </tr>
        <tr>
          <td class="td"><a href="www.www.www">Menu 5</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
        </tr>
        <tr>
          <td class="td"><a href="www.www.www">Menu 6</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
    <td class="td"><a href="www.www.www">Menu 1</a></td>
        </tr>
      </table>
</body></html>
vorrei tanto che questa dannata tabella si posizionasse allineata al centro
e in alto, proprio come faceva il vecchio attributo align="center", che però
è deprecato in html 4.01 strict. Le classi table e td non fanno altro che
definire i bordi esterni ed interni della tabella, in quanto a colori,
spessore del bordo ed altre carabattole varie.
Giusto per completezza, la destinazione della tabella in questione sarà il
corpo centrale di un layout fluido con una testata superiore a tutta
larghezza ed una colonna sulla sinistra.
Ho cercato davvero ovunque ma non sono arrivato a nulla...avete qualche
suggerimento?
Grazie mille a tutti!
(A)Lex

"Lex" <n...@lycosNOSPAM.it> ha scritto nel messaggio
news:lmjhb.23256$vO5.8...@twister1.libero.it...

aggiungi nell'head
 <style type="text/css">
  div#tabella {
   margin:0px auto;border:0px;padding:0px;
   text-align:center;
  }
  table {margin:0 auto;} /* per centrarla su Mozilla/Netscape */
 </style>
<div id="tabella">
   // la tu tabella
</div>
Comunque sarebbe meglio non usare nomi di tag come valori per gli attibuti
'id' e 'class',
si potrebbe generare confusione!"
Simone

Simone ha scritto:
| aggiungi nell'head
|  <style type="text/css">
|   div#tabella {
|    margin:0px auto;border:0px;padding:0px;
|    text-align:center;
|   }
|   table {margin:0 auto;} /* per centrarla su Mozilla/Netscape */
|  </style>
|
| <div id="tabella">
|    // la tu tabella
| </div>
 Ciao Simone, aggiungere un div solo per contenere la tabella è superfluo.
Basta fare così. css:
body{ text-align: center }
table#main{margin: 0px auto; text-align: left}
e html:
<body>
    <table id="main">
        <!-- eccetera -->
    </table>
</body>
Una cosa: consiglio a Lex di guardarsi meglio le classi e gli id. Dato che la tabella
per il layout è unica, è sicuramente meglio attibuirgli un id piuttosto che una classe.
www.w3schools.com
www.brainjar.com
| Comunque sarebbe meglio non usare nomi di tag come valori per gli attibuti
| 'id' e 'class', si potrebbe generare confusione!
Concordo. Ciao,
    SantaKlauss

 table#main{margin: 0px auto; text-align: left}
si è piu semplice...il fatto è che tendo a fare le cose in maniera piu
complesse!
...devo migliorare!
Ciao,
    Simone

     SantaKlauss
Lex