Positionner deux blocs

Petit nouveau ! | 7 Messages

15 févr. 2020, 11:26

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
HTML:
<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>le globule</title>
</head>

<!-- ATTENTION : erreur de structure. Il manque la balise BODY -->
	<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">

<!-- ATTENTION : erreur de sémantique. C'est un seul article -->
<article>

<!-- ATTENTION : ça fonctionne mais on pouvait appliquer directement une bordure à la balise H2 pour réaliser la forme -->
<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 -->
<!-- ATTENTION : erreur de sémantique. La balise MAIN devrait être utilisée.
Le sens de lecture de la page n'est pas respecté dans la structure -->
<div class="panneau-droite">
			<figure class="photo-droite">
				<img src="img/pasglobe.jpg">
			</figure>

				<!-- ATTENTION : erreur de sémntique et de structure. La balise FIGCAPTION sert à indiquer la légende d'une image.
				FIGCAPTION doit être enfant de 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 -->

<!-- ATTENTION : <div class="menu-footer"> est inutile ici. Vous pouviez simplifier la structure en réduisant les imbrications de balises -->
<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>

CSS:
[code]
/* 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 {
	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 */

[/code]