Dreamweaver: centrare una tabella.

Di: roberta | 26/09/2020 18:56:04
Ciao a tutti!
Innanzitutto complimenti per il forum! Leggendolo ho risolto molti dubbi che mi portavo dietro da tempo!
Purtroppo non sono riuscita a trovare una soluzione ad un problema che mi sta facendo impazzire da alcuni giorni.
Sto realizzando un sito nel quale ero intenzionata ad inserire in home page un'immagine centrata sia orizzontalmente (e fin qui grazie a Dio non ci sono problemi ) sia verticalmente su tutti i monitor con risoluzione equivalente e/o superiore a 800x600px. Vi spiego quello che ho fatto.
Ho creato una tabella nidificata di 760x430px per ospitare l'immagine (in realtà codice html generato da Fireworks, ma questo non ha importanza) all'interno di un’altra di dimensioni in percentuale pari al 100% sia in larghezza che in altezza. L’ho quindi centrata e fin qui, almeno nell’area di lavoro di Dreamweaver, tutto bene.
Facendo l’anteprima su Internet Explorer, però, la triste verità: centrata sì orizzontalmente ma non verticalmente! Vi dico la verità, ho fatto diverse prove... sembrerebbe una cosa stupida... eppure, alla fine, ho notato una cosa molto strana (almeno per me): togliendo le prime 2 righe di codice che riguardano la validazione w3c, la tabella veniva centrata anche verticalmente! Ho provato quindi, per curiosità, a convertire il codice html in xhtml, e, come mi aspettavo, stessa cosa.
La domanda è molto semplice: è possibile far convivere le due cose?
Vorrei mantenere la dichiarazione inserita da Dreamweaver... possibile che lo standard w3c non preveda una cosa del genere? O forse sono su una strada completamente sbagliata?
Vi ringrazio anticipatamente per una vostra possibile disponiblità.
Ciao a tutti!
P.S. Vi allego il codice (la tabella in questo caso, non è impostata in altezza e racchiude la scritta "prova", ma a titolo d'esempio è la stessa cosa):
<!-- Commento aggiunto per non interferire con il codice della pagina del forum di 001design.it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<table width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle"><table width="760" height="0" border="0" align="center">
<tr>
<td><div align="center">prova</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Fine commento aggiunto per non interferire con il codice della pagina del forum di 001design.it. -->

Risposte


Come centrare una tabella orizzontalmente e verticalmente usando il valore margin-top in percentuale

Ciao Roberta,
benvenuta, grazie per aver scelto 001design.it e per i complimenti che sono sempre graditi.
Nel caso volessi pubblicare un feedback o commento su 001design.it puoi farlo nella sezione apposita: http://www.001design.it/forum_italiano/forums.php?id=18
Adesso vediamo di risolvere il tuo problema.
Ho impostato il valore margin-top in percentuale (nel tuo stesso stile .body) invece che in pixel, vedi se è il risultato che vuoi ottenere. Nota che ho impostato i valori dei border a 1 per vedere le tabelle ed ho aggiunto anche cellpadding="0" cellspacing="0" alla prima tabella, che è sempre consigliabile inserirli.
Spero che ti risolva il problema e che sia il risultato che volevi ottenere, ciao.
<!-- commento aggiunto per non interferire con il codice della pagina del forum di 001design.it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 12%;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td align="center" valign="middle"><table width="760" height="300" border="1" align="center">
<tr><td><div align="center">prova</div></td></tr>
</table></td></tr></table>
</body>
</html>
Fine commento aggiunto per non interferire con il codice della pagina del forum di 001design.it. -->

Di: Pablito | 26/09/2020 18:56:04

non viene centrata...

Ti ringrazio molto per la tua disponibilità, purtroppo però la tabella non viene ancora centrata (uso una risoluzione di 1280*1024).
Senza la dichiarazione, invece, viene centrato tutto alla perfezione su qualsiasi risoluzione (dagli 800*600 in su).
Quello che non riesco a capire è come mai il w3c non accetti questa variabile..

Di: roberta | 26/09/2020 18:56:04


Capisco... Beh, che io sappia, dovresti agire sul valore top-margin in percentuale per migliorare la situazione, tenendo fisso quella “benedetta” dichiarazione W3C (che tutto dovrebbe fare, tranne creare problemi...)
Altrimenti dovresti realizzare un Frameset, tutto in percentuale, ma io lo sconsiglio sempre l’uso dei frame.
Questo succede perché è ritenuto inusuale “non utilizzare” tanto spazio di lavoro nella zona superiore della pagina.
Tuttavia è giusto ed interessantissimo quel che dici riguardo alla stringa del W3C inserita in alto alla pagina che interferisce sul funzionamento, infatti anche senza lo stile, il codice funziona perfettamente anche su Firefox 1.0.
Per quanto mi riguarda, l’importante è che il codice sia pulito e funzionante, soprattutto se viene compromesso da dichiarazioni esterne al codice HTML della pagina (in altre parole: hai già risolto).
<!-- commento aggiunto per non interferire con il codice della pagina del forum di 001design.it.
<html>
<head>
<title>Documento 001design.it</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1" valign="center">
<tr><td align="center" valign="middle"><table width="760" height="300" border="1" align="center">
<tr><td><div align="center">prova</div></td></tr>
</table></td></tr></table>
</body>
</html>
Fine commento aggiunto per non interferire con il codice della pagina del forum di 001design.it. -->
Il mio consiglio è quello di toglierlo, se vuoi puoi segnalare il problema proprio ai membri del consorzio W3C.
Ufficio Italiano W3C: http://www.w3c.it
Sito ufficiale W3C.org: http://www.w3c.org
Un articolo sul DocType da Gdesign.it:
http://www.gdesign.it/pages/howto/articoli/doctype/doctype.php
Su Webaccessibile.org trovi una sezione proprio sul W3C (vedi anche i link nella zona inferiore della pagina)
http://www.webaccessibile.org/argomenti/area.asp?id=5

Di: Pablito | 26/09/2020 18:56:04