Pourquoi la bordure ul est plus large que la bordure de la table?

Pourquoi la bordure ul est plus large que la bordure de la table? Pourquoi la hauteur ul ne contient-elle pas tous les éléments li?Pourquoi la bordure ul est plus large que la bordure de la table?

Merci beaucoup pour votre aide ...

alt text

ul 
    { 
     font-family: Verdana; 
     font-size: 8pt; 
    } 

    ul a 
    { 
     text-decoration: none; 
     color: Black; 
    } 

    ul a:hover 
    { 
     text-decoration: underline; 
    } 

    table 
    { 
     background-color: Transparent; 
     border-collapse: collapse; 
    } 
    table tr td 
    { 
     vertical-align: top; 
     text-align: left; 
     font: Verdana, Geneva, sans-serif; 
     font-size: 12px; 
    } 

    #tblYayinAkisi 
    { 
     border:1px white solid; 
     background-color: #222222; 
     font-family: Verdana; 
     color: #ffffff; 
     vertical-align: middle; 
     font-size: 10pt; 
     width:100%; 
    } 

    #tblYayinAkisi th 
    { 
     background-color: Transparent; 
     background-image: url(../images/bckSiyahGriTram.png); 
     background-repeat: repeat-x; 
     height: 20px; 
     padding-left: 10px; 
    } 

    #tblYayinAkisi td 
    { 
     background-color: #222222; 
    } 

    #tblYayinAkisi td ul 
    { 
     border:1px white solid; 
     width:100%; 
     margin-left: 10px; 
    } 
    #tblYayinAkisi td ul li 
    { 
     clear:both; 
     padding-top: 7px; 
     list-style: none; 
    } 
    #tblYayinAkisi td ul li b 
    { 
     margin-right: 10px; 
     float: left; 
    } 

    #tblYayinAkisi td ul li a 
    { 
     color: #ffffff; 
     float: left; 
    }

code complet:

<html> 
    <head> 
     <style> 
      body 
      { 
       background-color: Red; 
      } 
      ul 
      { 
       font-family: Verdana; 
       font-size: 8pt; 
      } 
      ul a 
      { 
       text-decoration: none; 
       color: Black; 
      } 
      ul a:hover 
      { 
       text-decoration: underline; 
      } 
      table 
      { 
       background-color: Transparent; 
       border-collapse: collapse; 
      } 
      table tr td 
      { 
       vertical-align: top; 
       text-align: left; 
       font: Verdana, Geneva, sans-serif; 
       font-size: 12px; 
      } 
      #tblYayinAkisi 
      { 
       border: 1px white solid; 
       background-color: #222222; 
       font-family: Verdana; 
       color: #ffffff; 
       vertical-align: middle; 
       font-size: 10pt; 
       width: 100%; 
      } 
      #tblYayinAkisi th 
      { 
       background-color: Transparent; 
       background-image: url(../images/bckSiyahGriTram.png); 
       background-repeat: repeat-x; 
       height: 20px; 
       padding-left: 10px; 
      } 
      #tblYayinAkisi td 
      { 
       background-color: #222222; 
      } 
      #tblYayinAkisi td ul 
      { 
       border: 1px white solid; 
       width: 100%; 
       margin-left: 10px; 
      } 
      #tblYayinAkisi td ul li 
      { 
       clear: both; 
       padding-top: 7px; 
       list-style: none; 
      } 
      #tblYayinAkisi td ul li b 
      { 
       margin-right: 10px; 
       float: left; 
      } 
      #tblYayinAkisi td ul li a 
      { 
       color: #ffffff; 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <table id="tblYayinAkisi"> 
      <tbody> 
       <tr> 
        <th> 
         YABAN'da bugün 
        </th> 
       </tr> 
       <tr> 
        <td> 
         <ul> 
          <li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li> 
          <li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li> 
          <li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li> 
          <li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li> 
          <li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li> 
         </ul> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <div style="text-align: center;"> 
          <img src="images/canliYayin.png" /> 
          <img src="images/tumAkis.png" /> 
         </div> 
         <br /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
    </html>

Source

2010-01-16 uzay95

s'il vous plaît poster le code HTML avec le css – Ray

J'ai posté (code complet). – uzay95

-1

enlèverait juste la largeur de 100% pour l'élément ul, et ajouter un droit marge, comme suit:

#tblYayinAkisi td ul 
{ 
    border: 1px white solid; 
    margin-left: 10px; 
    margin-right: 10px; 
}

Cela résout l'affichage dans Firefox, et devrait fonctionner pour d'autres navigateurs.

Source

2010-01-16 22:46:50 Thilo

Mais ul est dans la table. Et si j'ajoute Largeur: 100%, il aura la largeur maximum comme la table ne le fera-t-il pas? Pourriez-vous s'il vous plaît exprimer pourquoi? – uzay95

Si vous spécifiez 100% plus les marges gauche et droite, cela représente plus de 100% de l'élément englobant, au moins dans certains navigateurs. Ne spécifiez que 100% si ce n'est pas déjà le cas par défaut, comme c'est le cas pour les éléments de niveau bloc comme ul. – Thilo

Le problème de hauteur se produit car le contenu b et le contenu flottent. Cela signifie que l'élément li n'a aucun contenu réel (c'est-à-dire non flottant). Retirez flottant de et vous devriez être bon à faire.

Source

2010-01-16 22:50:07

Si b tag ou des balises dans li ont un attribut flottant, ils n'appartiendront pas à l'élément li? – uzay95

Les balises flottantes appartiennent à l'élément li, mais elles n'ajoutent pas leur hauteur à la hauteur li. Juste trouvé une autre solution - http://www.quirksmode.org/css/clearing.html - le dépassement: chose automatique. –

Pourquoi la bordure ul est plus large que la bordure de la table?

Répondre

Questions connexes