Aligner horizontalement des formulaires

**Joruus** · 22/10/2014, 23h27

Je suis débutant en programmation web html/css et je bute depuis quelques jours pour aligner horizontalement un ensemble de formulaire composé de bouton customisé

J'ai ceci :
Nom : 503142qvkKj.png
Affichages : 317
Taille : 15,7 Ko

Nom : 503142qvkKj.png
Affichages : 317
Taille : 15,7 Ko

et je voudrais avoir cela
Nom : 902459Wp8oG.png
Affichages : 294
Taille : 13,1 Ko

Mon code html est le suivant :

Code html :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<header id="head_id">
    <div class="element_head">
        <?php if (empty($_SESSION[ 'username'])) { if (!isset($_POST[ 'username'])) { ?>
        <form id="log_in_form" class="header_form" method="post" action="index.php">
            <img name="login_pwd" class="img_login_pwd" src="http://img4.hostingpics.net/pics/741202button01username.png">
            <div id="formulaire">
                <input type="text" name="username" />
                <br />
                <input type="password" name="password" />
                <br />
                <input class="header_form" type="checkbox" name="remember_me" id="remember_me" />
                <label for="remember_me">Remember me</label>
                <br />
            </div>
            <!-- <input type="submit" value="Log in" />-->
            <input type="hidden" name="type_of_form" value="log_in">
            <input type="hidden" name="code" value="0">
            <input class="button_log_in" type="submit" name="log_in" value="" />
            <br>
        </form>
        <?php } else { /* connection with my datas base */ } } else { //l 'utilisateur est logge
        echo "User :" ;
        echo $_SESSION['username '] ;
        ?>
        <form id="log_out_form" method="post" action="index.php">
            <input type="submit" class="button_log_out" name="log_out" value="" />
            <input type="hidden" name="type_of_form"    value="log_out">
            <br>
        </form>
        <?php 
    } 
    ?>
    <form id="sign_in_form" method="post" action="index.php">
        <input type="hidden"   name="type_of_form" value="sign_in">
        <input type="submit" class="button_sign_in" name="sign_in" value="" />
    </form> 
    <form id="search_form" method="post" action="index.php">
        <img name="search" src="page_element/header/button_04_search.png">
        <input type="search" name="search" />
        <img name="search" src="page_element/header/button_05_magnifying_glass.png">
        <input type="hidden" name="type_of_form" value="search">
        <a href="index.php?type_of_link=new_snippet"><img name="new_snippet" src="page_element/header/button_06_new_file.png"></a>
    </form>
 
    </div>    
</header>

et mon code CSS est le suivant :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.img_login_pwd {
    float:left;
    border:none;
    width: 64px;
    /* largeur à spécifier */
    height: 64px;
    /* longueur à spécifier */
    display: inline-block;
}
.button_log_in {
    /* float:left; */
    background:url(http://img4.hostingpics.net/pics/160128button02login.png);
    border:none;
    width: 64px;
    /* largeur à spécifier */
    height: 64px;
    /* longueur à spécifier */
    cursor: pointer;
    display: inline-block;
}
.button_log_out {
    background:url(page_element/button_01_log_out.png);
    border:none;
    width: 64px;
    /* largeur à spécifier */
    height: 64px;
    /* longueur à spécifier */
    cursor: pointer;
    display: inline-block;
}
.button_sign_in {
    background:url(http://img4.hostingpics.net/pics/947651button03signin.png);
    border:none;
    width: 64px;
    /* largeur à spécifier */
    height: 64px;
    /* longueur à spécifier */
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
}
.button_search {
    background:url(http://hpics.li/98981ba);
    border:none;
    width: 64px;
    /* largeur à spécifier */
    height: 64px;
    /* longueur à spécifier */
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
}
.button_new_file {
    background:url(http://img4.hostingpics.net/pics/265686button06newFile.png);
    border:none;
    width: 64px;
    /* largeur à spécifier */
    height: 64px;
    /* longueur à spécifier */
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
}
.element_head {
    display: inline;
}
#head_id {
    background-color: red;
    width: 85%;
    height: 20%;
    border: 1px solid black;
    font-family: Trebuchet MS;
}

Je m'arrache les cheveux à essayer d'aligner ces images boutons

**NoSmoking** · 23/10/2014, 20h07

Bonjour,
ta structure ne me paraît pas très judicieuse, réorganise en partant de ce que tu souhaites obtenir, imagine des cases à remplir suivant 6 colonnes maxi si j'ai bien compté ( tu pourras en mettre moins).

**Joruus** · 23/10/2014, 21h55

Merci pour ta réponse, mais qu'entends tu par structure ? Le html ou le css ?

**NoSmoking** · 25/10/2014, 14h48

Je n'ai pas trop compris l'usage de tes multiple FORM et le découpage mais bon il t'appartient

Concernant ton problème tu devrait t'en sortir avec une utilisation de display:iline et de float:left.

Sur base du HTML suivant, proche de ce que tu as

Code html :

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
29
<div class="element_head">
    <fieldset>
        <form id="log_in_form" class="header_form" method="post" action="index.php">
            <input type="hidden" name="type_of_form" value="log_in">
            <input type="hidden" name="code" value="0">
            <div class="gauche_">
                <img class="img_login_pwd" src="http://img4.hostingpics.net/pics/741202button01username.png" alt="">
            </div>
            <div class="centre_">
                <input type="text" name="username"/>
                <input type="password" name="password"/>
                <input class="header_form" type="checkbox" name="remember_me" id="remember_me"/>
                <label for="remember_me">Remember me</label>
            </div>
            <input class="button_log_in" type="submit" name="log_in" value=""/>
        </form>
    </fieldset>
    <fieldset>
        <form id="search_form" method="post" action="index.php">
            <input type="hidden" name="type_of_form" value="search">
            <img src="page_element/header/button_04_search.png" alt="search">
            <input type="search" name="search" />
            <img src="page_element/header/button_05_magnifying_glass.png" alt="Loupe">
            <a href="index.php?type_of_link=new_snippet">
              <img src="page_element/header/button_06_new_file.png" alt="New file">
            </a>
        </form>
    </fieldset>
</div>

et en appliquant le CSS suivant tu devrais trouver ce que tu cherches.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.element_head{
  border:1px solid #888;
  background:#EEE;
  overflow: hidden;
}
fieldset{
  margin:0;
  padding:0.5em;
  border:none;
  background:#ABC;
  float: left;
  height:4em;
}
fieldset img{
  vertical-align:middle;
}
fieldset input{
  width:10em;
  padding:0;
  margin: 0 0 0.25em;
}
fieldset input[type="checkbox"]{
  width:1em;
}
fieldset img{
  height:64px;
  width:64px;
}
.img_login_pwd {
}
.button_log_in {
  background:url(http://img4.hostingpics.net/pics/160128button02login.png);
  border:0;
  cursor: pointer;
  display: inline;
}
.gauche_{
  float:left;
  width:4em;
  height:4em;
}
.centre_{
  float:left;
  width:9em;
  margin:0 0.5em;
}

A regarder de près, il est possible qu'il y demeure des propriétés non utilisées.

Une dernière question : pourquoi utiliser des images là où du texte serait suffisant?

**Baptiste457** · 26/10/2014, 19h22

J'espère ne pas trop m'immiscer dans la conversation

Après test de ton code, ajouter les lignes suivantes au css semblent fonctionner:

Code :

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

1
2
3
.img_login_pwd, #formulaire, .button_log_in, .button_sign_in, #search_form{float:left;}
.header_form{border:none;height:0px;}
.s_box{height: 64px;}

J'avais rajouté display:inline, mais j'ai aperçu qu'il était déjà défini, entre autres comme inline-block!

PS:

ton input devient

Code :

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

<input type="search" name="search" class="s_box" />

**Joruus** · 27/10/2014, 22h24

Au contraire Baptiste457, merci pour vos réponses je vais tester ça.

Pour répondre à ta question NoSmoking j'essaie de faire un design ressemblant aux tuiles de Windows 8, mais peut être qu'il y a un meilleur moyen de m'y prendre ?

Je suis ouvert à toutes remarques.

J'ai testé la solution de NoSmoking et ça à l'air de bien marcher pas mal. Je vais également tester ta solution des que j'ai le temps Baptiste.

**NoSmoking** · 29/10/2014, 11h30

Pour répondre à ta question NoSmoking...

ce n'est jamais, dans ton cas, que du texte sur un fond de couleur donc l'utilité d'image....

**Joruus** · 29/10/2014, 21h04

Du coup il vaudrait mieux que je dessine un carré en css ou html plutôt que de charger des images ?

**Baptiste457** · 30/10/2014, 11h05

Regarde:

Code :

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

div#new{display:block;width:50px;height:50px;position:relative;}

Code html :

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

1
2
3
4
5
<html>
<body>
<div id="new">Texte</div>
</body>
</html>

ça marche aussi avec

Code :

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

div.new{display:block;width:50px;height:50px;position:relative;}

Code html :

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

<div class="new">Texte</div>

**NoSmoking** · 30/10/2014, 19h46

@Joruus :
du CSS/HTML me semble largement suffisant dans ton cas

@Baptiste457 :

div.new{display:block;width:50px;height:50px;position:relative;}

je dirais que

Code :

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

1
2
3
.new {
  /* le CSS */
}

et suffisant inutile de surcharger avec un div devant.

**Joruus** · 30/10/2014, 20h55

Ouai j'ai testé et ça fonctionne pas mal, merci les gars, dernière question :

Comment je centre verticalement le texte dans les cubes ?

**NoSmoking** · 30/10/2014, 22h26

J'aurais tendance à dire que c'est du classique
exemple pour Search

Code html :

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

<div class="img_search">Search</div>

avec le CSS suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.img_search{
  font-family: Arial;
  font-size:16px;
  font-weight:bold;
  color:white;
  background:#00758C;
  height:64px;
  width:64px;
  line-height:64px;  /* centrage vertical */
  text-align:center; /* centrage horizontal */
}

Aligner horizontalement des formulaires

Positionnement en CSS

Discussions similaires

Partager

Partager