Positionner un block

**nagyp** · 14/02/2020, 19h13

Bonjour. Je suis en train de reprendre cette exercices et je me trouve en présence de deux soucis.
1° le texte "Tip globule au top du blog en double colonne est décaler par rapport au autre textes.
2em: la colonne de droite refuse obstinément de remonter à coter de celle de gauche. vue que l'on ne doit pas utiliser les flexbox je suis un peut bloquer.
SI l'un d'entre vous à une petite idée

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
184
185
<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>le globule</title>
</head>
 
 
	<body class="page-principal">
  		<div id class="wrapper">
 
			<h1 class="titre vert">Le globule</h1>
				<main>
				<nav class="menu-panneau ">
					<ul>
						<li class="item"><a href="#">Accueil</a></li>
						<li class="item"><a href="#">Tous Nos choix</a>
 
					<div class="panneau">
							<figure>
							<img src="img/menu-01.jpg">
							</figure>
 
						<dl class="col"><!-- sous menu 1-->
							<dt>notre choix 1</dt>
							<dd class="item-panneau"><a href="#">Choix 1.1 </a></dd>
							<dd class="item-panneau"><a href="#">Choix 1.2 </a></dd>
							<dd class="item-panneau"><a href="#">Choix 1.3 </a></dd>
						</dl>
							<figure>
							<img src="img/menu-03.jpg">
							</figure>	
						<dl   class="col">	
							<dt>notre choix 2</dt>
							<dd class="item-panneau"><a href="#">Choix 2.1 </a></dd>
							<dd class="item-panneau"><a href="#">Choix 2.2 </a></dd>
						</dl>
 
							<figure>
							<img src="img/menu-02.jpg">
							</figure>		
						<dl   class="col">		
							<dt>notre choix 3</dt>
							<dd class="item-panneau"><a href="#">Choix 3.1 </a></dd>
							<dd class="item-panneau"><a href="#">Choix 3.2 </a></dd>
							<dd class="item-panneau"><a href="#">Choix 3.3 </a></dd>
						</dl>
					</div>			
			</li>
		<!-- fin du premier sous menu tous nos choix-->
 
		<li class="item"><a href="#">Nos triangles ronds</a>
 
			<div class="panneau">
				<figure>
				<img src="img/menu-04.jpg">
				</figure>	
			<dl class="col"><!-- sous menu 1-->
				<dt>Nos triangles 2</dt>
				<dd class="item-panneau"><a href="#">surtriangles 1.1 </a></dd>
			</dl>
				<figure>
				<img src="img/menu-06.jpg">
				</figure>
 
			<dl class="col">	
				<dt>Nos triangles 2</dt>
				<dd class="item-panneau col"><a href="#">surtriangles 2.2 </a></dd>
			</dl>	
				<figure>
				<img src="img/menu-05.jpg">
				</figure>
 
			<dl class="col">		
			<dt>Nos triangles 2</dt>
			<dd class="item-panneau"><a href="#">surtriangles  3.3 </a></dd>
		</dl>
	</div>
</li>
		<li class="item"><a href="#">contact</a></li>
	</ul>
</nav>
 
 
<div class="panneau-gauche">
 
 
<article>
 
<div class="half-round"></div>
	<h2 class="vert sous-titre">Globule globe</h2>
		<div class="text italic">
			<p>
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>
		</div>
</article>
<article>
<div class="half-round"></div>
	<h2 class="vert sous-titre">Globule pas globe</h2>
		<div class="text ">
			<p>
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>
			<br>
			<p>
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>
		</div>
</article>
 
<article>
 
 
				<figure class="float-left">
				<img src="img/globule.jpg" >
				<figcaption class="italic align-right" >Gluon du globule </figcaption>
				</figure>
		<div class="text">
	<p>
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
				like Aldus PageMaker including  book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
 				including versions of Lorem Ipsum.and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.the leap into electronic typesetting, remaining essentially unchanged. It was popularised
				in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsumthe leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like.
 
	</p>
		</div>
</article>
 
<article>
<div class="half-round"></div>
	<h2 class="vert sous-titre">Tip globule au top du blog</h2>
		<div class="text deux-colonne">
	<p>
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
				like Aldus PageMaker including  book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
 				including versions of Lorem Ipsum.and more recently with desktop publishing software like Aldus PageMaker including versio popularised
				in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsumthe leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like.
	</p>
		</div>
</article>
 
</div> <!-- fin de la panneau gauche -->
 
 
<div class="panneau-droite">
			<figure class="photo-droite">
				<img src="img/pasglobe.jpg">
			</figure>
 
				<figcaption class="text">
					<h2 class="vert sous-titre">pas globe</h2>
					publishing software like Aldus PageMaker including versions of Lorem Ipsumthe leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sh
				</figcaption>
 
 
			<figure>
				<img src="img/pasblog.jpg">
			</figure>
				<figcaption  class="text">
					<h2 class="vert sous-titre">pas blog</h2>
					publishing software like Aldus PageMaker including versions of Lorem Ipsumthe leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
				</figcaption>
 
 
</div> <!--fin de la panneau de droite -->
 
<div class="menu-footer">
	<footer>
			<nav class="container-footer" >
			<ul class="menu-footer">
				<li><a href="#">Lien footer</a></li>
				<li><a href="#">Lien footer</a></li>
				<li><a href="#">Lien footer</a></li>
				<li><a href="#">Lien footer</a></li>
				<li><a href="#">Lien footer</a></li>
			</ul>
		</nav>
	</footer>
</div> <!-- fin du menu footer -->
</div> <!-- fin wrapper -->
</main>
</div> <!--fin menu principal -->
</html>

code 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
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
184
185
186
187
188
189
190
191
192
/* reset */
* {
	margin:0;
	padding: 0;
	box-sizing: border-box; }
 
body { font-family: arial, helvetica, sans-serif }
/* fin reset */
/* balise generiques */
 
.page-principal{
	background: #000000;
	background: -moz-linear-gradient(top, #000000 0%, #EDEDED 50%, #FFFFFF 100%);
	background: -webkit-linear-gradient(top, #000000 0%, #EDEDED 50%, #FFFFFF 100%);
	background: linear-gradient(to bottom, #000000 0%, #EDEDED 50%, #FFFFFF 100%);}
 
.wrapper {
	width: 1180px;
	background-color: #FFF;
	/* ATTENTION : margin:0 auto; */
	margin: auto;	
	border-radius: 12px;
	-webkit-box-shadow: -7px 8px 15px 9px #888;
	box-shadow: -7px 8px 15px 9px #888;}
 
main {margin: 0 40px 0 40px}	
 
.vert { color: #139c19;}
 
.text {
	text-align: justify;
	padding: 1em;
	color: #000; }
 
/* fin des balises generique */
/* titre */
.titre {
	color: #139C19;
	font-size: 5em;
	text-align: center;
	text-shadow:#000;
	text-shadow: -2px 5px 1px #000;
	padding: 0.2em;}
/* fin titre */
/* menu haut */
 
.menu-panneau {
	border-radius: 50px;
	background: -moz-linear-gradient(top, #444, #111);
	background: -webkit-linear-gradient(top, #444, #111);
	background: linear-gradient(to bottom, #444, #111);
	-webkit-box-shadow: 0px 10px 0px -6px #9C9C9C;
	box-shadow: 0px 10px 0px -6px #9C9C9C;
	position: relative;
	margin-bottom: 3em; }
 
.menu-panneau ul li:first-child  {
    padding-left: 2em;
} 
 
.item {display: table-cell; }
 
.item a {
	color: #f2f2f2;
	text-decoration: none;
    display: block;
    padding: 10px; }
 
.item a:hover {
	background-color: #139c19;
	text-shadow: 0px 3px 0px #000;
	color: #fafafa;}
 
.panneau {
	background-color: #139c19;
	display: none;
	position: absolute;
	margin-left: 5px;
	width: 550px;
	border: 6px solid #000;
	border-top: 0px; }
 
.item:hover .panneau { display: block; }
 
.panneau figure {
	margin-top: 0px;
	float: right;
	margin:-2px;}
 
.clearfix-overflow { overflow: hidden; }
 
.col {
	height: 11em;
	background: #19B123;
	background: -moz-linear-gradient(top, #19B123, #139C19);
	background: -webkit-linear-gradient(top, #19B123, #139C19);
	background: linear-gradient(to bottom, #19B123, #139C19); }
 
.item-panneau, a {
	display: block;
	margin-top: 5px;
	margin-left: 10px;
	text-decoration: none;
	color: #fff;
	text-align: center;}
 
.center a{text-align: center;  }
 
.item-panneau a:hover{
	text-shadow: -2px 2px 0px rgba(0,0,0,0.55);
	color: #ededed;
	text-align: center;}
 
.triangle dt {
	margin-left: 120px;
	padding-top: 20px;
	font-size: 20px;}
/*fin menu haut */
 
/* panneau de gauche */
.col dt{
	font-weight: bold;
	padding-top: 2.2em;
	text-align: center;}
 
.panneau-gauche {
	width: 70%; }
 
.half-round {
	float:left ;
 	width:5px ; margin-left: auto;	margin-right: 1em;
 	padding: 0.2em 0 0.5em 2em;
    height: 35px;
    background: #139C19;
    border-radius: 50px 0 0 50px;}
 
.sous-titre {margin: 0 5px 2px;}
 
.italic p, .italic{
	font-style: italic;
	color: #777;}
 
.float-left {
	float: left;
	margin: 0 15px 10px -40px; }
 
.align-right {text-align: right;  }
 
.deux-colonne{
	columns:2;
	column-rule:2px solid #f2a;
	column-gap: 2em; }
 
/* Fin du panneau de gauche */
 
/* panneau droite */
.panneau-droite {
	float: right;
	width: 30%;
	-webkit-box-shadow: -1px 3px 12px 0px #ccc;
	box-shadow: -1px 3px 12px 0px #ccc;
	padding: 18em 0 2em 0;}
/* fin panneau droite*/
 
/* menu footer */
 
.container-footer {
	border-top:1px solid #139c19;
	text-align: center; }
 
.menu-footer > li {
	margin-top:1em;
	margin-bottom:20px;
	display: inline-block;
	position: relative;}
 
.menu-footer a {
	color:#fff;
	display:block;
	padding:10px;
	text-decoration:none;
	text-align:center;
	border-radius:50px;
	width: 140px;
	background: -moz-linear-gradient(top, #19B123 , #139C19);
	background: -webkit-linear-gradient(top, #19B123, #139C19);
	background: linear-gradient(to bottom, #19B123, #139C19)  }
 
.menu-footer a:hover{
	background: rgba(21,165,29,0.5);
	color: #000;}
/* fin menu footer */

Positionner un block

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager