28172 sujets

CSS et mise en forme, CSS3

Pb avec un display block

Bonjour

Voici une page html :

<html>
<head>
<body>
<div style="background-color: Red;text-align: center">
        <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;width:500px;text-align: center;display:inline;display:inline-block">
        <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
Modifié par seb.49 (13 Jan 2010 - 21:42)
Display, vous connaissez ? Smiley cligne

Autrement dit, que tes boutons s'affichent les uns en dessous des autres, c'est normal, puisque tu leur as appliqué la propriété display avec la valeur block (au moyen de l'attribut style).
seb.49 a écrit :
J'ai fais cette page allégé pour comprendre pourquoi quand je change le display par javascript, la mise en forme est détruite.

Si tu ne nous montres pas ton code JavaScript, il nous sera difficile de t'aider efficacement.
Modifié par Victor BRITO (13 Jan 2010 - 21:32)
Salut,

pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.


seb.49 a écrit :
Qui peut m'expliquer pourquoi dans la 2nd DIV, les boutons sont les un sous les autres et pas dans la 1ère.
Euh... on peut supposer que ça vient de la différence entre les 2 à savoir les display:block affectés aux INPUT qui font qu'ils se placent les uns sous les autres non ?

(Re)lire : bloc et en-ligne.
Victor BRITO a écrit :

Si tu ne nous montres pas ton code JavaScript, il nous sera difficile de t'aider efficacement.


J'ai justement fais cette page qui reproduit le pb sans javascript pour une meilleur lisibilité.

Je crois que les liens fourni vont m'aider. Merci
Merci à vous pour votre rapidité et votre efficacité.

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

Modifié par seb.49 (13 Jan 2010 - 21:53)
Sujet clos
Aller à