Je fais des sites depuis plusieurs années et j'ai toujours utilisé des tableaux html dans mon code.
Ça ne m'apporte aucun problème particulier, mais je vois toujours des gens qui disent que les DIV c'est mieux pour une tonne de raisons plus ésotériques les unes que les autres.
Bien que je ne comprenne pas trop le but de la chose, j'aimerais me familiariser avec le concept et tenter de coder mon prochain site seulement avec des div.
J'ai commencé à coder et j'arrive à un problème.
Je veux seulement émuler ce que ferait un tableau html qui représente un menu, et à la droite du menu j'aimerais que ça agisse comme un autre TD, pour afficher le drapeau de la langue du site.
Voici mon code :Code :
<div class="menu_box">
<asp:Image ID="imgHome" name="imgHome" CssClass="menu_item" runat="server" meta:resourceKey="imgHome" />
<asp:Image ID="imgApps" name="imgApps" CssClass="menu_item" runat="server" meta:resourceKey="imgApps" />
<asp:Image ID="imgServices" name="imgServices" CssClass="menu_item" runat="server" meta:resourceKey="imgServices" />
<asp:Image ID="imgGAQ" name="imgGAQ" CssClass="menu_item" runat="server" meta:resourceKey="imgGAQ" />
<asp:Image ID="imgAbout" name="imgAbout" CssClass="menu_item" runat="server" meta:resourceKey="imgAbout" />
<div class="language_box">
<asp:Image ID="imgLang" name="imgLang" CssClass="menu_lang" runat="server" ImageUrl="../images/en.png" />
</div>
</div>
Code :
.menu_box
{
height:43px;
width:1000px;
background-image:url('../images/menu_filler.png');
background-repeat:repeat-x;
display:table-cell;
vertical-align:middle;
}
.language_box
{
display:inline-block;
}
.menu_item
{
padding-left:15px;
padding-right:15px;
}
.menu_lang
{
padding-right:10px;
}
----------------------------------------------
Normalement je ne fais qu'ajouter un TD pour que la cellule s'affiche à droite de la première, et je peux spécifier un vertical-align indépendamment pour chaque cellule, mais là je dois utiliser display:inline-block; pour que le DIV du language s'affiche à l'intérieur du DIV principal (à droite). Sinon il s'affiche en dessous du premier div!! Ça m'amène ensuite au problème avec le vertical-align. Dans le sens que si je modifie le vertical-align du DIV menu-box, ça change aussi le vertical-align du DIV language-box. Même chose si j'utilise un padding-top sur une des deux box, les deux se modifient en fonction du padding de l'autre, alors que je voudrais que tout soit indépendant, comme des cellules d'un tableau HTML...
Voici le code html qui me permettrait de faire ce que je veux :Code :
<table class="menu">
<tr>
<td style="vertical-align:middle">
<asp:Image ... bla bla bla bla />
<asp:Image ... bla bla bla bla />
</td>
<td style="vertical-align:top">
<asp:Image id="language" ... bla bla />
</td>
</tr>
</table>
Il y a quelque chose que je ne saisis pas, et j'aimerais comprendre.
Merci d'avance.
Connexion
Inscription
FAQ
Rechercher
