[CSS 2] Comment placer un div à gauche d'un contenu ? [Résolu]

rambc · 27/11/2011, 18h57

Bonjour.

Dans le code suivant, je veux que le div de classe date soit à la guache des autres div contenus dans le div de classe day. L'idée est de faire apparaître la date mise en forme comme sur un calendrier que l'on effeuille au jour le jour.

Voici ce que je cherche à obtenir visuellement dans un 1er temps : un lien temporaire.

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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Un exemple de mise en forme d'un cahier de texte</title>
 
        <style type="text/css">
/* Reset tools
 *
 * http://meyerweb.com/eric/tools/css/reset/
 * v2.0 | 20110126
 * License: none (public domain)
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
    display: block;
}
body{
    line-height: 1;
}
ol, ul{
    list-style: none;
}
blockquote, q{
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
    content: '';
    content: none;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
 
 
/* The CSS rules */
h1{
    letter-spacing: 4px;
    text-align: center;
}
 
.newChapter h2{
    text-align: center;
}
 
.day{
    display:inline
}
.date{
    background-color:rgb(230,230,230);
}
.dayName, .year{
    background-color:rgb(160,0,0,0.7);
}
        </style>
    </head>
 
    <body>
        <h1>Seconde 1</h1>
 
        <div class="newChapter">
            <h2>Chapitre A : Rappels numériques</h2>
            <div class="day">
                <div class="date">
                    <h3 class="dayName">Lundi</h3>
                    <h3 class="dayNumber">28</h3>
                    <h3 class="month">Nov.</h3>
                    <h3 class="year">2011</h3>
                </div>
                <div class="school">
                    <div class="lesson">
                        <h4>Cours</h4>
                        <ul>
                            <li>Chapitre A : Rappels numériques</li>
                            <ul>
                                <li>I) Les nombres simples</li>
                                <li>II) Les nombres irrationnels</li>
                                <ul>
                                    <li>1) C'est quoi un réel...</li>
                                    <li>2) Une idée folle : les irrationnels</li>
                                </ul>
                            </ul>
                        </ul>
                    </div>
                    <div class="working">
                        <h4>Travail en classe</h4>
                        <ul>
                            <li class="correction">Correction de l'exercice 1</li>
                            <li class="work">Activité 1 page 1</li>
                        </ul>
                    </div>
                    <div class="homework">
                        <h4>Travail pour le Mardi 29 Nov. 2011</h4>
                        <ul>
                            <li class="work">Exercices 2 et 3 page 4</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
 
<!-- Pas de changement de chapitre -->
        <div class="continuedChapter">
            <div class="day">
                <div class="date">
                    <h3 class="dayName">Mardi</h3>
                    <h3 class="dayNumber">29</h3>
                    <h3 class="month">Nov.</h3>
                    <h3 class="year">2011</h3>
                </div>
                <div class="school">
                    <div class="working">
                        <h4>Travail en classe</h4>
                        <ul>
                            <li class="correction">Correction des exercices 2 et 3 page 4</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
 
<!-- Changement de chapitre pu retour à un ancien -->
        <div class="newChapter">
            <h2>Chapitre B : Géométrie</h2>
            <div class="day">
                <div class="date">
                    <h3 class="dayName">Mercredi</h3>
                    <h3 class="dayNumber">30</h3>
                    <h3 class="month">Nov.</h3>
                    <h3 class="year">2011</h3>
                </div>
                <div class="school">
                    <div class="lesson">
                        <h4>Cours</h4>
                        <ul>
                            <li>Chapitre B : Géométrie plane</li>
                            <ul>
                                <li>I) Configurations planes</li>
                                <li>II) Pythagore et compagnie</li>
                                <ul>
                                    <li>1) De la géométrie au calcul</li>
                                    <ul>
                                        <li>a) Droites parallèles</li>
                                        <li>b) Triangles rectangles</li>
                                    </ul>
                                    <li>2) Du calcul à la géométrie</li>
                                    <ul>
                                        <li>a) Droites parallèles</li>
                                        <li>b) Triangles rectangles</li>
                                    </ul>
                                </ul>
                            </ul>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

dominos · 27/11/2011, 19h15

Code :

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

float:left;

?

rambc · 27/11/2011, 19h23

Merci, mais avec cette solution le texte se met autour du bloc mis à gauche comme avec des lettrines. Or je ne souhaite pas cela.

dominos · 27/11/2011, 19h32

faut peut être positionner aussi les div (left/top/width/height..), faut aussi revoir l'imbrication.

bon dev.

rambc · 27/11/2011, 19h55

Des pistes pour une meilleure imbrication ?

Macmillenium · 27/11/2011, 20h43

En jouant sur le contexte de formatage:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.day,
.school {
    /*display:inline*/
    overflow:hidden;
}
 
.date {
  float:left;
  margin-right:10px;
  background-color:rgb(230,230,230);
}

Sinon, tu as mal balisé cette partie:

Code html :

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

1
2
3
4
5
6
7
 
<div class="date">
  <h3 class="dayName">Lundi</h3>
  <h3 class="dayNumber">28</h3>
  <h3 class="month">Nov.</h3>
  <h3 class="year">2011</h3>
</div>

Afin d'avoir une hiérarchie de titres correcte, la date doit être dans un seul H3:

Code html :

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

1
2
3
4
5
6
7
 
<h3 class="date">
  <span class="dayName">Lundi</span>
  <span class="dayNumber">28</span>
  <span class="month">Nov.</span>
  <span class="year">2011</span>
</h3>

avec:

Code css :

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

1
2
 
.date span { display:block; }

rambc · 27/11/2011, 21h01

Merci.

Si tu as 5 min pour m'expliquer comment marche ta ruse de sioux, je serais preneur. Je me remets au CSS depuis peu...

Merci pour le correctif pour les dates. Je voulais m'attaquer à ce problème juste après : j'avais bien conscience que ce n'était pas du tout sémantique.

Macmillenium · 27/11/2011, 21h12

En très gros: Le contexte de formatage conféré (via overflow:hidden) à .day, permet à ce dernier d'occuper le reste de la largeur disponible en tenant compte de la présence de l'adjacent flottant .date.

rambc · 28/11/2011, 17h25

Merci.

27/11/2011, 21h12	#8
Macmillenium Rédacteur/Modérateur Inscription : mars 2008 Messages : 2 290 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Sarthe (Pays de la Loire) Informations professionnelles : Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : mars 2008 Messages : 2 290 Points : 3 208 Points : 3 208	En très gros: Le contexte de formatage conféré (via overflow:hidden) à .day, permet à ce dernier d'occuper le reste de la largeur disponible en tenant compte de la présence de l'adjacent flottant .date. __________________ Je ne réponds pas aux questions techniques par MP.
	00

27/11/2011, 19h15	#2
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	Code : Sélectionner tout - Visualiser dans une fenêtre à part float:left; ?
	00

27/11/2011, 19h23	#3
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci, mais avec cette solution le texte se met autour du bloc mis à gauche comme avec des lettrines. Or je ne souhaite pas cela.
	00

27/11/2011, 19h32	#4
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	faut peut être positionner aussi les div (left/top/width/height..), faut aussi revoir l'imbrication. bon dev.
	00

27/11/2011, 19h55	#5
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Des pistes pour une meilleure imbrication ?
	00

27/11/2011, 21h01	#7
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci. Si tu as 5 min pour m'expliquer comment marche ta ruse de sioux, je serais preneur. Je me remets au CSS depuis peu... Merci pour le correctif pour les dates. Je voulais m'attaquer à ce problème juste après : j'avais bien conscience que ce n'était pas du tout sémantique.
	00

28/11/2011, 17h25	#9
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email