Placer un élément en haut dans un div

Version imprimable

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:

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:

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

Erreur css

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

Code:

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;
}

03/01/2016, 20h52
jpomart

1 pièce(s) jointe(s)

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:

Pièce jointe 196932

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.
03/01/2016, 21h09
Le Néophyte

Ok alors remplace

Code:

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

par

Code:

<div class="nom-champ-ISAD">1965-[1970]</div>
04/01/2016, 15h46
NoSmoking

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

@jpomart

Citation:

...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 !
04/01/2016, 15h55
Le Néophyte

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

Code:

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

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

Code:

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

suffit

Et oui d'accord avec toi beaucoup trop de <div>
04/01/2016, 16h00
NoSmoking

Citation:

Envoyé par Le Néophyte

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

:nono: voir la réponse faite !
04/01/2016, 20h51
jpomart

1 pièce(s) jointe(s)

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 :

Pièce jointe 197015

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

1 pièce(s) jointe(s)

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:

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>

Pièce jointe 197027

Citation:

Au sujet du trop plein de div, si vous avez des conseils pour alléger tout cela, je suis preneur.

Voilà une structure possible, pas fortement sémantique mais bon...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="notice">
    <div class="menu-side">
        <span>Cote </span>: 8 D 3/1
        <br>
        <span>Boîte n° </span>: 1
    </div>
    <div class="menu-centre">
        <h1>Recherche de sources documentaires</h1>
        <h2>Présentation du contenu</h2>
        <ul>
            <li>Fiches de références bibliographiques</li>
            <li>Tapuscrits corrigés</li>
            <li>Notes de recherche</li>
        </ul>
    </div>
    <div class="menu-side">
        <span>Date(s)</span>:1965-[1970]
    </div>
</div>

et le CSS associé et allégé, à retoucher suivant ton besoin

Code:

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
html, body {
  margin:0;
  padding:0;
  font:1em/1.25em Verdana, Arial, sans-serif;
}
.notice{
  padding:.5em;
  margin:1%;
  overflow:hidden;      /* AJOUT */
  background:#eee;      /* permet la visualisation de la surface occupée */
}
div {
  box-sizing:border-box;
}
.menu-centre{
  width:65%;
  float:left;
  margin:0 .5em;
  border:1px solid rgb(233,78,27); /* forme abrégé */
}
.menu-side {
  padding:.5em;
  font-size:0.9em;
  width:15%;
  float:left;
  border:1px solid rgb(233,78,27); /* forme abrégé */
}
.menu-side span {
  display:inline-block;
  width:5em;
  font-weight:700;
}
.menu-centre h1 {
  font-size:1.25em;
  background:rgb( 240, 110, 60);
  color:#fff;
  line-height:2em;
  margin:1px;
  text-indent:.5em;
}
.menu-centre h2 {
  font-size:1.1em;
  text-indent:3em;
}
.menu-centre ul {
  margin-left:3em;
}

tu noteras que dans cette approche les trois zones sont en display:left.

06/01/2016, 15h31
jpomart

Merci à vous deux, cette fois-ci, c'est la bonne.

@Le Néophyte : effectivement avec la propriété float:right appliquée à la classe menu-droite, cela fonctionne. Il m'a fallu réduire la largeur du menu du centre.
Le </div> était présent dans mon code, mais pas dans le morceau que j'ai montré ici, désolé.

Tu es visiblement moins néophyte que moi \o/

@NoSmoking : Effectivement, moins sémantique, mais plus pratique. J'aime bien ce que tu proposes et vais sans doute alléger dans ce sens.
La petite histoire : je pars du XML et effectue une transformation des données vers un autre schéma XML, puis on passe au HTML. Et du coup il ne faut plus pensez "XML" à ce moment, c'est parfois difficile ;-)
06/01/2016, 23h23
Le Néophyte

Super alors !!!! N'oublie pas les pouces 👍 et de clôturer la discution !!! A bientôt 😉