Problème avec display:block, les élément sont les un sous les autres

Version imprimable

Bonjour

Voici une page html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<body>
<div style="background-color: Red;" style="text-align: center">
        <asp:Button ID="BT_SEARCH_PUNAISE" runat="server" Text="Chercher" OnClick="BT_SEARCH_PUNAISE_Click"
            meta:resourcekey="BT_SEARCH_PUNAISEResource1" />
        <input type="button" id="BTN_CALL_UPDATE_PUNAISE" value="Mettre à jour" onclick="UpdatePunaise2();" />
        <input type="button" id="BTN_CALL_ADD_PUNAISE" value="Ajouter" onclick="CreatePunaise2();" />
        <input type="button" id="BTN_CLOSE_SEARCH_PUNAISE" value="Fermer" onclick="MasqueWuc();" />
    </div>
 
<br/><br/>	
<div style="background-color: Red;" style="text-align: center">
        <asp:Button ID="BT_SEARCH_PUNAISE" runat="server" Text="Chercher" OnClick="BT_SEARCH_PUNAISE_Click"
            meta:resourcekey="BT_SEARCH_PUNAISEResource1" />
        <input type="button" id="BTN_CALL_UPDATE_PUNAISE" value="Mettre à jour" onclick="UpdatePunaise2();" style="display:block;"/>
        <input type="button" id="BTN_CALL_ADD_PUNAISE" value="Ajouter" onclick="CreatePunaise2();" style="display:block;"/>
        <input type="button" id="BTN_CLOSE_SEARCH_PUNAISE" value="Fermer" onclick="MasqueWuc();" style="display:block;"/>
    </div>
 
	</body>
	</html>

Qui peut m'expliquer pourquoi dans la 2nd DIV, les boutons sont les un sous les autres et pas dans la 1ère.

J'ai fais cette page allégé pour comprendre pourquoi quand je change le display par javascript, la mise en forme est détruite.

Merci

13/01/2010, 21h43
12monkeys

Bonsoir

Parce que c'est le comportement par défaut des éléments block : ils se positionnent les uns sous les autres.

Les div sont en display:block par défaut, quand tu en places plusieurs dans une page, ils s'affichent les uns sous les autres, dans ton exemple c'est pareil...

La solution : display:inline-block.

Code:

1
2
3
4
5
<div style="background-color: Red;width:500px;text-align: center;">
        <input type="button" id="BTN_CALL_UPDATE_PUNAISE" value="Mettre à jour" onclick="UpdatePunaise2();" style="display:inline-block;"/>
        <input type="button" id="BTN_CALL_ADD_PUNAISE" value="Ajouter" onclick="CreatePunaise2();" style="display:inline-block;"/>
        <input type="button" id="BTN_CLOSE_SEARCH_PUNAISE" value="Fermer" onclick="MasqueWuc();" style="display:inline-block;"/>
    </div>

13/01/2010, 22h43
12monkeys

Ou tout simplement pas de display du tout...

Les input étant un élément en ligne.
14/01/2010, 08h42
seb.49

J'ai besoin de faire de display "on/off" en javascript et le problème se pose, donc ma solution me convient parfaitement
14/01/2010, 18h11
12monkeys

Dans ce cas :ccool:

Mais attention à la compatibilité des navigateurs http://covertprestige.info/css/inline-block/