Discussion :

[Invité]

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 tous alignés à l'horizontal ?

Merci pour votre aide !

[Bovino]

Sans voir ton code (le HTML généré, pas le PHP), c'est difficile de t'aider... à moins de faire subir des choses horribles à de pauvres animaux pour lire dans leurs entrailles, méthode assez peu efficace de surcroit.

[Invité]

Merci Bovino pour ta réponse et le déplacement du sujet

Alors voici le code généré:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;
	}

[Vil'Coyote]

les éléments bouton sont de type inline si je ne me gourre pas. donc normal qu'ils ne s'affichent que sur des lignes distincte. A modifier par le css ou via positionnement de div (ou de tableau même si c'est déprécié) .

par contre c'est quoi cette méthode de faire??? des boutons submit avec des lien <a> ? tu es sûr de savoir ce que tu fait?

[Invité]

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

Voici mon nouveau code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
    }

Oui je suis sûre de ce que je fais ^^

[Invité]

Merci beaucoup pour votre aide !

[RomainVALERI]

par contre c'est quoi cette méthode de faire??? des boutons submit avec des lien <a> ?

Oui ça pique les yeux, là

Bah... le problème est "résolu", alors bon... à bientôt Tiffany

[Invité]

Bon apparemment mes boutons ne plaisent pas ... ^^

Comment je pourrai faire alors ?

[RomainVALERI]

Ne le prends pas mal, hein

Mais en effet c'est un montage surprenant. L'extrait posté est-il inclus dans un formulaire ? Si non, les input perdent leur raison d'être. Si oui, et que tu as besoin de déclencher la soumission du formulaire après un clic sur n'importe lequel de ces boutons, c'est le <a> englobant qui est "de trop". Avec une structure hétérodoxe comme celle-là, même si par essais/erreurs tu arrives à un résultat stable à un moment donné, tu te prépares des problèmes futurs avec des comportements inattendus... Si l'objectif du procédé était de pouvoir déclencher différentes pages php en fonction du bouton cliqué, sache que tu peux avoir un input submit non apparent, plusieurs boutons "classiques" dans le formulaire (<button>), et sur leur onclick : d'abord tu donnes la valeur adéquate à la propriété "action" du form, et ensuite tu déclenches le form.submit ... mais c'est dur à dire avec certitude sans voir le reste (la définition du form, notamment) et sans connaitre le résultat escompté.

Si tu veux assainir ça, n'hésite pas, on peut t'aider ^^

[Invité]

Non je ne le prend pas mal du tout ! Au contraire j'ai pleins de choses à apprendre, je ne suis qu'en 1ere année de BTS !

Les boutons ne font pas parti d'un formulaire, je voulais simplement faire un envoie vers une autre page mais avec l'apparence d'un bouton.

[RomainVALERI]

Si tu as déjà une image spécifique à utiliser pour ton bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="url.que.tu.veux.atteindre" id="siBesoinDePointerDessusAvecJS">
   <img src="nomFichierImage.jpg" alt="titreANePasNegligerPourLAccessibilite">
</a>

Sinon pour l'apparence "standard" des boutons prévue par le navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick="document.location.href='url.que.tu.veux.atteindre';">texte du bouton</button>

[NoSmoking]

Bonjour,
excusez moi de cette intrusion,

je voulais simplement faire un envoie vers une autre page mais avec l'apparence d'un bouton.

autant il faut rendre au BUTTON sa place pour les actions, autant quand on veut mettre un lien la bonne balise reste la balise A.

Si l'on veut faire ressembler un lien à un bouton, il existe le CSS, je pense que c'est cette voie que tu dois explorer.

[Invité]

Merci beaucoup pour votre aide