Bonjour,

Ma page est composée de 4 boites et je voudrai mettre dans ces boites des boutons. Les boites sont en position relative et les boutons en position absolue. Les boutons se positionnent bien, mais ils ne se mettent pas en ligne. En gros un bouton par ligne. Comment faire pour qu'ils soient alignés à l'horizontal ?

Merci pour votre aide !

L'idéal, c'est defaire une liste

Le html

<ul>

<li><img src="bouton_1.jpg" alt="" /></li>

<li><img src="bouton_2.jpg" alt="" /></li>

etc...

</ul>

Le css

ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }

ul li a {
 display:block;
 float:left;   
 width:100px; /*Dimensions de tes boutons*/ 
 padding:5px; /*espace entre les boutons*/
 }

Alors voici le code généré:

<div class="peda">
<h1>Pédagogique</h1>
<label>IP:</label>...<br>
<label>Masque:</label>...<br>
<label>PAS:</label>...<br>
<label>DNS:</label>...<br>
<label>Mon IP:</label>...<br>
<label>Serveur:</label>...<br>
<label>Slis:</label>...<br>
<label>PFS:</label>...<br>
<label>Mot de passe Administrateur: </label>...<br>
<label>Mot de passe Adminsta: </label>...<br>
<label>Mot de passe Admin local: </label>...<br>
<label>Mot de passe Mod_loc: </label>...<br>
<label>SPR: </label>....<br>
<div class="petitbouton">
<a href="netshPeda.php"><input value="IP" type="submit"></a>
<a href="mstscPeda.php"><input value="Mstsc" type="submit"></a>
<a href="mstscZMI.php"><input value="Mstsc ZMI" type="submit"></a>
<a href="mstscDMZ.php"><input value="Mstsc DMZ" type="submit"></a>
</div>
</div>


Et le CSS:

div.peda{
position: relative;
margin: 1%;
width: 45%;
height: 70%;
float: left;
text-align: left;
border:5px;
border-style: double;
border-color: silver;
border-radius: 20px;
padding: 10px;
background-color: black;
padding-bottom: 2%;
}

div.petitbouton input{
position: absolute;
width: 100px;
height: 40px;
background-color: lime;
border-color: lime;
font-weight: bold;
bottom: 2%;
}
div.petitbouton a{
text-decoration: none;
}

je vais essayer les listes, merci :)

On m'a donné une solution qui marche niquel ! J'ai mis tous les input en absolue, donc les boutons se superposés !

Voici mon nouveau code CSS :

div.petitbouton {
position: absolute;
bottom: 2%;
}

div.petitbouton input{
width: 100px;
height: 40px;
background-color: lime;
border-color: lime;
font-weight: bold;
}
div.petitbouton a{
text-decoration: none;
}

Merci beaucoup pour ton aide Dreamer !

Tu m'en vois heureux.

N'oublies pas de mettre ton post en résolu !!

Oups, pas vu !!

Pas grave ^^