Comment émuler la barre de titre de la fenêtre en CSS/HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <head> 
    <style> 
     table {border: 1px solid black; width: 500px} 
     .title {height: 40px} 
     .close {float: right} 
     td {text-align: center; border: 1px solid black} 
    </style> 
    </head> 

    <body> 
    <table> 
     <tr> 
      <td class="title"> Centered <span class="close">XXXXX</span> </td> 
     </tr> 
     <tr> 
      <td>content</td> 
     </tr> 
     <tr> 
      <td>content</td> 
     </tr> 
     <tr> 
      <td>content</td> 
     </tr> 
    </table> 
    </body> 
</html>

Dans cet exemple, le «XXXX» est en effet placé à droite, mais le texte «centré» est légèrement décalé vers la gauche. Ceci est dû au fait que "XXXX" occupe toujours de l'espace dans le flux de documents à côté du texte "Centré". Comment puis-je l'avoir si "centré" est centré exactement comme le reste de la table?Comment émuler la barre de titre de la fenêtre en CSS/HTML

Heres et rendu exemple:

rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png

Source

2009-08-12 priestc

Sera-ce une table de largeur fixe, avec une largeur fixe de valeur « XXXX »? – PortageMonkey

@PortageMonkey dans mon cas, oui. Mais la meilleure solution serait celle où elle peut être variable. – priestc

Si vous placez absolument le span.close, il ne prendra pas la place et votre titre doit être parfaitement centrée:

tr td { 
    position: relative; 
} 

tr td span.close { 
    position: absolute; 
    top: 0; 
    right: 0; 
}

Modifier Oups - jamais rencontré cela avant. Normalement, un parent avec position: parent agira comme système de coordonnées pour un enfant avec position: absolute, mais pas dans le cas d'un <td>. Si vous enveloppez votre titre et span.close dans un <div> avec le code suivant, vous devriez être en affaires:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd"> 

<html> 
<head> 
    <style> 
     table {border: 1px solid black; width: 500px} 

     .title div { 
      position: relative; 
      height: 40px; 
     }    

     td {text-align: center; border: 1px solid black}    

     td span.close { 
      position: absolute; 
      top: 0; 
      right: 0; 
     } 
    </style> 
</head> 

<body> 
    <table> 
     <tr> 
      <td class="title"> 
       <div>Centered <span class="close">XXXXX</span></div> 
      </td> 
     </tr> 
     <tr> 
      <td>content</td> 
     </tr> 
     <tr> 
      <td>content</td> 
     </tr> 
     <tr> 
      <td>content</td> 
     </tr> 
    </table> 
</body>

Source

2009-08-12 15:14:33 Pat

Cela ne fonctionnera que si le TD est positionné de manière absolue. Sinon, le "top: 0 right: 0" est associé à l'ensemble du document: http://img196.imageshack.us/i/screenshot1kkn.png/ – priestc

Comment émuler la barre de titre de la fenêtre en CSS/HTML

Répondre

Questions connexes