Retour à Forum de site web

XHTML question - valign ne fonctionne pas

  • jford
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 09, 2008
  • Messages: 2
  • Status: Offline

Message Juillet 9th, 2008, 2:36 pm

Salut,

Im rendre un projet, et j'ai décidé d'utiliser un style que j'ai fait il ya quelques mois.
Maintenant Im sûr à 100% validée pour le XHTML 1.0 & 1.1, mais le second, je entrez:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

en haut de la page, les "TD" J'utilise des droits d'auteur cesse d'être au bas de la page et colle à la fin du contenu.

Signification: Le tableau principal Im aide ne prendra pas 100% de la hauteur de la page peut offrir, ou à la verticale "-align: bottom" n'affecte pas la cellule de plus et Theres quelque chose d'autre pour le XHTML.

Mon code:
Code: [ Select ]
<html.....head..body..>
<table class="mainwindow" style="height: 100%;" cellspacing="0" cellpadding="0">
     <tr>
         <td>
                <table width="100%" style="height: 100%;" cellpadding="0" cellspacing="0">
                <tr>
                     <td style="vertical-align: top;">
                         <table width="100%" cellspacing="0" cellpadding="0">
                         <tr>
                                <td>
                                        ** Content **
                                </td>
                         </tr>
                         </table>
                     </td>
                </tr>
                <tr>
                     <td style="vertical-align: bottom;">
                         <table width="100%" cellpadding="0" cellspacing="0">
                         <tr>
                                <td class="subtitle">**Copy rights **</td>
                        </tr>
                         </table>
                    </td>
             </tr>
            </table>
     </td>
</tr>
</table>
</body>
</html>
  1. <html.....head..body..>
  2. <table class="mainwindow" style="height: 100%;" cellspacing="0" cellpadding="0">
  3.      <tr>
  4.          <td>
  5.                 <table width="100%" style="height: 100%;" cellpadding="0" cellspacing="0">
  6.                 <tr>
  7.                      <td style="vertical-align: top;">
  8.                          <table width="100%" cellspacing="0" cellpadding="0">
  9.                          <tr>
  10.                                 <td>
  11.                                         ** Content **
  12.                                 </td>
  13.                          </tr>
  14.                          </table>
  15.                      </td>
  16.                 </tr>
  17.                 <tr>
  18.                      <td style="vertical-align: bottom;">
  19.                          <table width="100%" cellpadding="0" cellspacing="0">
  20.                          <tr>
  21.                                 <td class="subtitle">**Copy rights **</td>
  22.                         </tr>
  23.                          </table>
  24.                     </td>
  25.              </tr>
  26.             </table>
  27.      </td>
  28. </tr>
  29. </table>
  30. </body>
  31. </html>

Code: [ Select ]
body {
margin:0px 0 0 0;
padding:0 0 0 0;
font:76% Tahoma;
background:#eaeaea url(Style/bg.gif) top center repeat-y;
color:#3a3a3a;
text-align: center;
height: 100%;
}

table.mainwindow {
        margin-left: auto;
        margin-right: auto;
        background-color: #76c2e7;
        width: 781px;
        background-repeat: no-repeat;
        background-position: top right;
        height: 100%;
        }

td.subtitle {
        background-color: #CFCFCF;
        width: 100%;
        height: 25px;
        color: #555555;
        font-size: 12px;
        font-family: Arial;
        text-align: center;
        }
  1. body {
  2. margin:0px 0 0 0;
  3. padding:0 0 0 0;
  4. font:76% Tahoma;
  5. background:#eaeaea url(Style/bg.gif) top center repeat-y;
  6. color:#3a3a3a;
  7. text-align: center;
  8. height: 100%;
  9. }
  11. table.mainwindow {
  12.         margin-left: auto;
  13.         margin-right: auto;
  14.         background-color: #76c2e7;
  15.         width: 781px;
  16.         background-repeat: no-repeat;
  17.         background-position: top right;
  18.         height: 100%;
  19.         }
  21. td.subtitle {
  22.         background-color: #CFCFCF;
  23.         width: 100%;
  24.         height: 25px;
  25.         color: #555555;
  26.         font-size: 12px;
  27.         font-family: Arial;
  28.         text-align: center;
  29.         }


Désolé pour toutes les tables - j'en ai besoin.

S'il vous plaît aider.

Merci beaucoup,
JFord
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juillet 9th, 2008, 2:36 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Juillet 9th, 2008, 2:53 pm

Le vertical-align règle s'applique à l'alignement de l'élément suivant par rapport à l'élément de la règle est appliquée. Pas de l'alignement des éléments enfants par rapport à l'élément à son application.

Youll besoin d'utiliser le "valign" attribut de position quelque chose au fond d'un <td>.
Strong with this one, the sudo is.
  • jford
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 09, 2008
  • Messages: 2
  • Status: Offline

Message Juillet 9th, 2008, 4:16 pm

Merci pour la réponse.

Je suis passé de valign pour vertical-align seulement maintenant que je me suis dit qu'il mai être la source du problème. Alors, le problème reste le même avec valigh. Bien que maintenant je sais que le valign n'est même pas nécessaire lorsque Im ne pas ajouter le DOCTYPE.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 3 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 131 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC