Placer un élément en haut dans un div

**jpomart** · 02/01/2016, 19h34

Bonjour,

J'ai lu pas mal de tutoriels et fait une recherche dans le forum, sans trouver la réponse à mon interrogation:

Je souhaite organiser plusieurs éléments d'une page en trois menus alignés.Tout se passe correctement à l'exception près que l'élément situé dans le div placé à droite se loge en bas du block et non en haut. J'ai essayé d'utiliser vertical-align:top; , sans succès.

Voilà les codes:

HTML:

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
<div class="notice">
               <div class="menu-gauche">
                  <div class="champ-ISAD-cote">
                     <div class="nom-champ-ISAD">Cote : </div>8 D 3/1</div>
                  <div class="champ-ISAD-boite">
                     <div class="nom-champ-ISAD">Boîte n° : </div>1</div>
               </div>
               <div class="menu-centre">
                  <div class="champ-ISAD-intitule">
                     <span class="nom-champ-ISAD-intitule">Intitulé : </span>Recherche de sources documentaires</div>
                  <div class="champ-ISAD">
                     <div class="nom-champ-ISAD">Présentation du contenu : </div>
                     <ul>
                        <li>Fiches de références bibliographiques</li>
                        <li>Tapuscrits corrigés</li>
                        <li>Notes de recherche</li>
                     </ul>
                  </div>
               </div>
               <div class="menu-droite">
                  <div class="champ-ISAD-date">
                     <div class="nom-champ-ISAD"/>1965-[1970]</div>
               </div>
            </div>

Une partie de la 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
29
30
31
32
33
34
35
36
37
*.notice{
    white-space:normal; 
    display:block;
    padding:1%; margin:1%;
    width:100%;
}
 
*.menu-gauche{
    float:left;
	width:15%;
	border-width:1px;
 border-style:solid;
 border-color:RGB(233,78,27);
}
*.menu-centre{
    width:65%;
    float:left;
     border-style:solid;
 border-color:RGB(233,78,27);
 
}
*.menu-droite{
    width:15%;
    position:relative; left:90%;
    float:none;
         border-style:solid;
 border-color:RGB(233,78,27);
}
 
*.champ-ISAD-date
{ display:inline; white-space:normal; vertical-align:top;
}
 
 
*.champ-ISAD-date
{ display:inline; white-space:normal; vertical-align:top;
}

Le problème d'affichage se situe au niveau du menu de droite, même si tout est lié. L'élément <div class="nom-champ-ISAD"> reste en bas malgré l'utilisation de vertical-align:top; .

Quelqu'un aurait une idée de l'origine du problème?

Merci

**Le Néophyte** · 03/01/2016, 02h08

Salut, si j'ai bien compris tu veux aligner tous les 3 menus en haut ?
Avec ce code css c'est bon :

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
*.notice{
    white-space:normal; 
    display:block;
    padding:1%; margin:1%;
    width:100%;
}
 
*.menu-gauche{
    float:left;
	width:15%;
	border-width:1px;
 border-style:solid;
 border-color:RGB(233,78,27);
}
*.menu-centre{
    width:65%;
    float:left;
     border-style:solid;
 border-color:RGB(233,78,27);
 
}
*.menu-droite{
	width: 15%;
	position: relative;
	float: left;
	border-style: solid;
	border-color: RGB(233,78,27);
}
 
*.champ-ISAD-date
{ display:inline; white-space:normal; vertical-align:top;
}
 
 
*.champ-ISAD-date
{ display:inline; white-space:normal; vertical-align:top;
}

**jpomart** · 03/01/2016, 20h52

Bonjour,

Et merci de ta réponse.
Ce n'est pas exactement cela : je voudrais que le contenu du menu de droite remonte. Actuellement il descend et je ne vois pas pourquoi:

Nom : capture_notice_css_1.JPG
Affichages : 947
Taille : 31,8 Ko

Nom : capture_notice_css_1.JPG
Affichages : 947
Taille : 31,8 Ko

Par contre si j'utilise la solution que tu me conseilles, toute la mise en page est déstructurée (c'est pourquoi j'avais fait autrement).
Du coup je me demande si le problème ne viendrait pas d'une erreur globale dans ma feuille de style.

J.

**Le Néophyte** · 03/01/2016, 21h09

Ok alors remplace

Code :

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

<div class="nom-champ-ISAD"/>1965-[1970]</div>

par

Code :

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

<div class="nom-champ-ISAD">1965-[1970]</div>

**NoSmoking** · 04/01/2016, 15h46

@Le Néophyte :
le moteur de rendu des navigateurs corrige ce genre d'erreur, mais il est bon de ne pas les faire.

@jpomart

...que l'élément situé dans le div placé à droite se loge en bas du block et non en haut.

tu subit de plein fouet l'utilisation des tes float:left.

La solution proposée par Le Néophyte est correcte mais il te faut dans ce cas rétablir le flux normal après l'élément de droite.

Plusieurs solutions existent et dans ton cas tu peux simplement ajouter un overflow:hidden à ton élément <div class="notice">.

Nota beaucoup de <div> pour rien dans ton code !

**Le Néophyte** · 04/01/2016, 15h55

Finalement dans son cas il a juste mis un '/' de trop avant le premier '>' de son code :

Code :

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

<div class="nom-champ-ISAD"/>1965-[1970]</div>

Donc c'est pour cela que dans son cas corriger le code par

Code :

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

<div class="nom-champ-ISAD">1965-[1970]</div>

suffit

Et oui d'accord avec toi beaucoup trop de <div>

**jpomart** · 04/01/2016, 20h51

Merci à vous deux.

Si j'applique cette solution, le bloc de droite s'adapte au contenu et du coup, plus de problème d'alignement vertical. Parfait!

Mais du coup, ce div se place en dessous à gauche de cette manière :

Nom : capture_notice_css_2.JPG
Affichages : 911
Taille : 31,2 Ko

Nom : capture_notice_css_2.JPG
Affichages : 911
Taille : 31,2 Ko

Je vais continuer de chercher.

Au sujet du trop plein de div, si vous avez des conseils pour alléger tout cela, je suis preneur.
Ces fichiers vont être utilisés pour créer un ePub et mon souci est d'être libre côté mise en page, d'où la création de nombreuses classes et la séparation systématique des informations.

J

**Le Néophyte** · 04/01/2016, 22h57

Salut

Quelle solution as-tu testée ? "Ps il manque un </div> à la fin aussi..."

Quel Doctype utilise tu ?

Quand je fait ca ca fonctionne !

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
74
75
76
77
78
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document sans nom</title>
<style>
*.notice{
	white-space: normal;
	display: block;
	padding: 1%;
	margin: 1%;
	width: 100%;
}
 
*.menu-gauche{
    float:left;
	width:15%;
	border-width:1px;
 border-style:solid;
 border-color:RGB(233,78,27);
}
*.menu-centre{
    width:65%;
    float:left;
     border-style:solid;
 border-color:RGB(233,78,27);
 
}
*.menu-droite{
	width: 15%;
	position: relative;
	border-style: solid;
	border-color: RGB(233,78,27);
	float: right;
}
 
*.champ-ISAD-date
{ display:inline; white-space:normal; vertical-align:top;
}
 
 
*.champ-ISAD-date
{
	display: inline;
	white-space: normal;
	vertical-align: top;
}
</style>
</head>
 
<body>
<div class="notice">
               <div class="menu-gauche">
                  <div class="champ-ISAD-cote">
                     <div class="nom-champ-ISAD">Cote : </div>8 D 3/1</div>
                  <div class="champ-ISAD-boite">
                     <div class="nom-champ-ISAD">Boîte n° : </div>1</div>
               </div>
               <div class="menu-centre">
                  <div class="champ-ISAD-intitule">
                    <span class="nom-champ-ISAD-intitule">Intitulé : </span>Recherche de sources documentaires</div>
                  <div class="champ-ISAD">
                     <div class="nom-champ-ISAD">Présentation du contenu : </div>
                     <ul>
                        <li>Fiches de références bibliographiques</li>
                        <li>Tapuscrits corrigés</li>
                        <li>Notes de recherche</li>
                     </ul>
                  </div>
               </div>
               <div class="menu-droite">
                  <div class="champ-ISAD-date">
                     <div class="nom-champ-ISAD">1965-[1970]</div>
               </div>
            </div>
            </div>
</body>
</html>

Nom : Capture d’écran 2016-01-04 à 22.56.28.png
Affichages : 1305
Taille : 500,5 Ko

Placer un élément en haut dans un div

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager