[XHTML] Transitional --> Strict

[M@ttia]

Apro questo Topic poiché sto avendo un qualche problemino nel convertire il mio sito da xhtml transitional ad xhtml strict e, nonostante il validator del w3c sia ottimo, purtroppo non sempre la sua spiegazione aiuta a risolvere il problema e anche con google non ho avuto molti risultati...

Se qualcun altro avesse problemi in una conversione simile posti pure qui, così magari se il problema l'avevo già riscontrato anche io magari posso scrivere la sintassi corretta .

Inizio:

• Il tag <u> non è più valido: perché mai <b> ed <i> continuano a valere, ma <u> no??? Bisogna proprio fare con i css? Mi spiaceva creare una classe apposta solo per fare un <u> ogni tanto ad alcune parole...
  
• Il mio amatissimo <div align="center">è stato completamente abolito (l'attributo perlomeno): io lo utilizzavo molto se dovevo ad esempio centrare una tabella, ecc, poiché con il text-align: center si allineano solo i testi, non le intere tabelle! Avevo trovato questo metodo che diceva di utilizzare nei CSS questi due attributi per il div:
  

  Codice: Seleziona tutto

  div{
      width: 5em;
      margin: auto;
     }

  
  ma tuttavia così facendo la tabella mi si rimpicciolisce in modo da essere larga giusto giusto come ciò che contiene, mentre prima rimaneva larga come volevo io. Lo scopo è inserire la tabella al centro di una cella di un'altra tabella...

Per ora ê tutto, poi man mano aggiungo

[Boo]

Il tag <u> non è più valido: perché mai <b> ed <i> continuano a valere, ma <u> no??? Bisogna proprio fare con i css? Mi spiaceva creare una classe apposta solo per fare un <u> ogni tanto ad alcune parole...

<b> è stato sostituito da <strong>
<i> da <em> (emphatize).
<u> è stato eliminato, puoi usare

Codice: Seleziona tutto

<span class="u">testo</span>

e nel CSS mettere

Codice: Seleziona tutto

.u {text-decoration: underline;}

Il mio amatissimo <div align="center">

Codice: Seleziona tutto

div {margin-left: auto; margin-right: auto;}

[M@ttia]

Ok, per la sottolineatura allora farò con il css.

Per quanto riguarda il div align="center", anche con il tuo codice continua ad allinearmi la tabella a sinistra nella cella in cui è inserita...

Provo a fare un abbozzo (* e /* sono dove si presenta il <div>)

• <div align ="center"> La tabella viene centrata
  

  Codice: Seleziona tutto

  ----------------------------------------------------------------------
|            ---------------------          |                         |
|            |                   |          |                         |
|          * |     AL CENTRO     | /*       |                         |
|            |      (giusto)     |          |                         |
|            ---------------------          |                         |
----------------------------------------------------------------------

  
  
  
• <div> + CSS La tabella viene a sinistra
  

  Codice: Seleziona tutto

  ----------------------------------------------------------------------
|  ---------------------                    |                         |
|  |                   |                    |                         |
|* |     A SINISTRA    | /*                 |                         |
|  |      (errore)     |                    |                         |
|  ---------------------                    |                         |
----------------------------------------------------------------------

[Boo]

Prova ad aggiungere anche text-align: center; e comunque se non è un problema posta l'intero codice della pagina.

[M@ttia]

Beh centrando il punto:

Codice: Seleziona tutto

<table style="width: 100%; height: 100%">
  <tr>
     ........
    <td style="width: 111px; vertical-align: top">
      <table style="width: 111px">
      .......
      </table>
    </td>

    <td style="vertical-align: top">
      <div align="center">
        <table class="TabCentrale">
          <tr>
            <td>
              ......
            </td>
          </tr>
        </table>
      </div>
    </td>
    <td style="text-align: left; vertical-align: top">
      <table class="TabLaterale">
       .......
      </table>
    </td>
  </tr>
</table>

[Boo]

Servirebbe anche il CSS comunque intanto vedi se questo aiuta

Codice: Seleziona tutto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en-us" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
table {border: 1px solid #000;}
td {vertical-align: top;}
.max {
height: 100%;
width: 100%;}

.111px {width: 111px;}
</style>


</head>
<body>
<table class="max">
   <tr>
      <td class="111px" >
         <table class="111px">
            <tr>
               <td>
                  &nbsp;
               </td>
            </tr>
         </table>
      </td>
      <td>
         <div align="center">
            <table class="TabCentrale">
               <tr>
                  <td>
                     &nbsp;
                  </td>
               </tr>
            </table>
         </div>
      </td>
      <td style="text-align: left;">
         <table class="TabLaterale">
            <tr>
               <td>
                  &nbsp;
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
</body>
</html>

[M@ttia]

Scusa, il Css (i pezzi coinvolti) sono:

Codice: Seleziona tutto

body
{
   background-color: #3D3D3D;
   color:            #FFF;
   text-align:       justify;
   text-decoration:  none;
   font-family:      verdana, arial, helvetica, sans-serif;
   font-size:        10px;
   margin:           0px;
}

.TabCentrale
{
   background-color: #5F5F5F;
   border:           #000 1px solid;
   text-align:       center;
   width:            95%;
}

.TabLaterale
{
   background-color: #5F5F5F;
   border:           #000 1px solid;
   text-align:       left;
   width:            90%;
}


Perô scusa, ma anche nel tuo codice sopra c'è il div align="center", il problema si ripresenta... (o era solo per definire un pai odi classi senza fare lo style ogni volta e basta?).

Ah comunque, forse anche per comodità tua, il sito è http://bergomi.altervista.org (la tabella che è centrata giusta col div è quella centrale, ne caso della home quella col Tux). Non serve il php quindi l'html renderizzato puoi vederlo, mentre i css coinvolti (vedi nel codice), nella home lì servono solo style.css e style-default.css (style è quello in "comune", style-default.css è quello invece diverso per ogni colore del tema del sito), poi il Sito è fatto con un Header, un Footer e gli include di php quindi basta una correzione sola... (è l'ultimo che mi manca per essere strict corretto tutto, poi potrò mettere a posto il codice bene con tutte le classi, ecc.)[^]

Aggiungo una domanda (scusa ma dovrebbe essere rispondibile al volo...): come encoding l'utf-8 è il migliore perché "mondiale", giusto? e l'utf-16 è ancora meglio, uguale o peggio?)

[Boo]

Perô scusa, ma anche nel tuo codice sopra c'è il div align="center"

Hai ragione me lo sono dimenticato

l'utf-8 è il migliore perché "mondiale", giusto? e l'utf-16 è ancora meglio, uguale o peggio?)

UTF-8 non è il migliore ma sicuramente è il più indicato se il tuo sito è rivolto al globo e non ad una parte di esso. Visto che il tuo sito è in italiano potresti limitarti ad usare il charset western europe (iso-8859-1).
Il 16 bit è un passo in avanti nella tecnologia, ma con ogni probabilità superfluo per quanto riguarda il web. Ne esiste anche una versione 32 bit.
Mi studio il CSS e ti faccio sapere.

[M@ttia]

Ok allora lascio iso-8859-1 che avevo giâ messo prima.

Azz possibile chesia così difficile allineare una tabella inserita in una cella... .

Grazie, buono studio!

[thomas]

Azz possibile chesia così difficile allineare una tabella inserita in una cella... .

Ma nel modo in cui state facendo, non è che state alliendo il contenuto della tabella al centro?
Da quello che ho capito, ti serve allineare il contenuto della cella (che poi è una tabella) al centro, quindi l'attributo andrebbe al td

[M@ttia]

Azz possibile chesia così difficile allineare una tabella inserita in una cella... .

Ma nel modo in cui state facendo, non è che state alliendo il contenuto della tabella al centro?
Da quello che ho capito, ti serve allineare il contenuto della cella (che poi è una tabella) al centro, quindi l'attributo andrebbe al td

Eh o dai l'attributo al td, oppure crei un div all'interno della cella che centri il suo contenuto, ma per dare l'attributo alla cella si ripropone il propblema: text-align: center; centra solo testo (ev. immagini), ma una tabella la allinea sempre a sinistra, idem se al td do margin-left: auto; margin-right: auto; ...

[thomas]

Si vede che non capisco una mazza di html?

[Boo]

[:-D] Si vede che non capisco una mazza di html?

Spero di averci capito qualcosa io perlomeno

Codice: Seleziona tutto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en-us" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body {
background-color: #3D3D3D;
color: #FFF;
text-align: justify;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
margin: 0;
}

#main {
background: #eecf87;
margin: 5px;
}

#sinistro {
background-color: #5F5F5F;
border: 1px solid #000;
left: 0;
position: relative;
text-align: left;
top: 0;
width: 15%;
}

#centrale {
background-color: #5F5F5F;
border: 1px solid #000;
left: 20%;
position: relative;
text-align: center;
top: -14px;
width: 70%;
}
</style>

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->

</head>
<body>
   <div id="main">
      <div id="sinistro">sinistro</div>
      <div id="centrale">centrale</div>
   </div>
</body>
</html>

è questo ciò che cercavi?

[M@ttia]

Azz, altra domandina che se la sai la liquidi in 3 sec. ... Dopo alcune modifiche al css mi ritrovo con una situazione del genere:

Come li tolgo questi spazi? Accade anche se ho due immagini uan sopra l'altra, due tabelle una sopra l'altra, ecc.

Es:

Codice: Seleziona tutto

<img ...> <br /><img ...>

Mi lascia spazio fra le due immagini, invece di mettermele una sopra l'altra esattamente "appoggiate": come faccio ad impostare questo parametro a 0 (tipo spazio fra le righe, non so cosa possa essere, è accaduto all'improvviso ma non capisco cosa possa aver modificato...)

[P.S. con IE non visualizza gli spazi, ma con Firefox eccome!]

[Boo]

prova impostando il margine delle immagini su zero.

[M@ttia]

prova impostando il margine delle immagini su zero.

Nel css ho già
img
{
border: none;
}

intendevi questo?

[Boo]

No il margine non il bordo

Codice: Seleziona tutto

margin: 0;

[M@ttia]

Nada, mi pare di aver ancora in giro una vecchissima edizione del sito, proverò a confrontare eliminando pezzetto a pezzetto finche non ritorna normale...

[M@ttia]

Problema centramento tabelle senza il div align=center risolto!!!!!

Per dovere di cronaca o x chi possa servire, basta creare una tabella "autocentrante" che si centra da sola nel "blocco" dove si trova (nel mio caso la cella), la quale deve avere comunque l'attributo text-align:center.

Esempio: (po ichiaramente gli style si fanno con css, qui è solo x farla più compatta)

Codice: Seleziona tutto

<td style="text-align: center">
  <table style="margin:0 auto 0 auto;" ...>
  xxx
  </table>
</td>


In questo modo la tabella non si rimpicciolisce come i ntutti gli altri metodi, ma mantiene la sua larghezza...

[Boo]

Codice: Seleziona tutto

margin:0 auto 0 auto

Equivale a fare

Codice: Seleziona tutto

margin-bottom: 0;
margin-top: 0;
margin-left: auto;
margin-right: auto;