[HTML & CSS] Alignement formulaire

Logiciel & apps Programmation
1

Hello, j’ai suivi le tutorial pour aligner ses formulaires sans tableaux, qui est sur le SDZ, voici le code de mon formulaire :


<form method="post" action="livreor.php">
  
    <p>
<label for="pseudo">Pseudo :</label><input type="text" id="pseudo" name="pseudo" /><br /><br />
<label for="message">Message :</label><textarea name="message" rows="8" cols="35" id="message"></textarea><br />
<label for="envoyer"></label><input type="submit" value="Envoyer" name="envoyer" id="envoyer"/>
    </p>
    </form>

et voici le code CSS qui va avec :

label {
display:block;
width:125px;
float:left;
}

Mais voici ce que ca affiche au final :

http://www.jeoffrey54.com/upload/livre-or-sdz.jpg

Tout s’affiche bien sauf le bouton Envoyer. J’aimerais le positionner exactement en dessous et au milieu de la partie “Message”.

Comment faire ?

Bonne journée :slight_smile:

2

Je pencherais sur le faite que le label “envoyer” est vide, et donc un block vide est souvent pas affiché à l’écran. Pour cela essaye tout simplement de mettre une espace HTML dans ton label “envoyer” de la façon suivante :

<label for="envoyer"> </label><input type="submit" value="Envoyer" name="envoyer" id="envoyer"/>

:slight_smile: !

3

On s’approche du but :smiley:

Regarde ce que ca donne : lien

Que rajouter maintenant ?

4

Strange…

Essaies ça :

<form method="post" action="livreor.php">
   <p>
<label for="pseudo">Pseudo :</label><input type="text" id="pseudo" name="pseudo" style="float:left;" /><br /><br />
<label for="message">Message :</label><textarea name="message" rows="8" cols="35" id="message" style="float:left;"></textarea><br />
<label for="envoyer"></label><input type="submit" value="Envoyer" name="envoyer" id="envoyer" style="float:left;" />
   </p>
   </form>
5

Actualise, c’est encore pire qu’avant :frowning:

6

essaie :

…
<label for="message">Message :</label><textarea name="message" rows="8" cols="35" id="message"></textarea></p>
<p align=center><label for="envoyer"></label><input type="submit" value="Envoyer" name="envoyer" id="envoyer"/>
</p>
</form>

7

Ou ça :

<form method="post" action="livreor.php">
  <p>
<label for="pseudo">Pseudo :</label><input type="text" id="pseudo" name="pseudo" style="float:left;" />
<div style="clear:both;"></div>
<label for="message">Message :</label><textarea name="message" rows="8" cols="35" id="message" style="float:left;"></textarea>
<div style="clear:both;"></div>
<label for="envoyer"></label><input type="submit" value="Envoyer" name="envoyer" id="envoyer" style="float:left;" />
<div style="clear:both;"></div>
  </p>
  </form>
8

Voici ce que ca donne :

http://www.jeoffrey54.com/upload/livreor.jpg

Je re teste une autre solution

9

Le plus simple dans ton cas serait quand même un tableau…
M’enfin je suppose que tu veux éviter non?

10

:hello:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml?quot;>

<head>
<title>Livre d&prime;or</title>

<!--  [ class="envoi" ]  margin 280px permet de positionné le bouton envoie  -->
<!--  [ class="envoi" ]  margin 10px marge entre textarea et le bouton envoie  -->
<style type="text/css">
<!--
.calage{
margin:0 20px 0;
display:inline;
width:130px;
float:left;
color:#000;
font:bold 10px Verdana, Arial, Helvetica, sans-sherif; 
}

.envoi{
background-color:#FFF;
margin:10px 280px 0;    
width:60px;
height:20px;
color:#000;
font:bold 10px Verdana, Arial, Helvetica, sans-sherif;
}
-->
</style>

</head>

<body>


<form method="post" action="livreor.php">

<label for="pseudo" class="calage">Pseudo :</label>
<input type="text" id="pseudo" name="pseudo" />
<br />
<br />
<label for="message" class="calage">Message :</label>
<textarea name="message" rows="8" cols="35" id="message"></textarea>
<br />
<input type="submit" value="Envoyer" name="envoyer" id="envoyer" class="envoi" />

</form>

</body>
</html?gt;

Voila le bouton envoi et au centre du textarea :wink: