Partage

Comment mettre 2 boite une en dessous de l'autre?

Je comprends pas..

13 mars 2018 à 15:52:12

Bonjour à tous !

J'ai un petit soucis avec l'affichage de mes boites concernant l'exercice n°3 du cours html/css.

Le but était de mettre un liseré à gauche prenant 100% de la hauteur, plus plusieurs cadre sur le reste de la page (verticaux et horizontaux).

J'arrive pour le liseré, et pour avoir mes blocs "expériences", "compétences"et "formations" un à coté de l'autre j'ai réussi aussi.

Après ça il me reste à caser :

- mon bloc header à droite

- et mon bloc "article" (qui contient expériences, compétences et formations) à droite au dessous de header.

Et c'est ça que je n'arrive pas faire, pourtant 2 blocs qui se suivent devrait se positionner un en dessous de l'autre même sans css..

voici mon code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Mon CV</title>
</head>

<body>
	<aside>
		<div id="texteaside">
		<h2 class="jaune">Infos sur le liseré :</h2>
		<p>Ce liseré prends 15% de la largeur de l'écran et 100% de sa hauteur.<br /><br />
			Je sais pas si vous avez autant galéré que moi pour faire ce liseré, mais moi j'y ai passé plusieurs heures..<br /><br />
		Edit : 1 heure de plus pour centrer ce texte verticalement ^^<br /><br /></p>
		<div id="smilley">
		<p><img src="smiley.png" class="center" alt="Smiley deviens fou" />
		</p>
	</div>
</div>
	</aside>
<header>
	<h1 class="center"><img src="moi.jpg" class="imageflottante" alt="Photo de Cipicchia Laurent" />Laurent CIPICCHIA</h1>
	<p class="center">Electricien et auto-entrepreneur</p><br />
</header>
<article>
  <div id="experience">
  	<h2>Mon expérience</h2>
    <ul>
    	<li><strong>2018</strong> : En cours de reconversion professionnel pour devenir <strong>Développeur Web</strong></li>
    	<li><strong>De 2011 à maintenant</strong> : Auto-entrepreneur sur le web en parallèle de l'électricité</li>
    	<li><strong>De 2002 à 2017</strong> : Electricien dans diverses usines metallurgiques et sidérurgiques</li>
    </ul>
</div>
    <div id="competences">
    <h2>Mes compétences</h2>

    <ul>
    	<li> Création de sites de niches avec le cms Wordpress</li>
    	<li> Marketing d'affiliation</li>
    	<li> Email Marketing</li>
    	<li> Référencement de pages (SEO et SEA)</li>
    </ul>
    <p>Je ne m'étends pas sur mes compétences en électricité vu que ce domaine ne m'intéresse plus.</p>
</div>

    <div id="formation">
    <h2>Ma formation</h2>

    <ul>
    	<li><strong>2018</strong> : Plusieurs certificats sur <a href="https://openclassrooms.com">OpenClassrooms</a></li>
    	<li><strong>2002</strong> : BAC PRO Equipements et installations électriques</li>
    	<li><strong>2000</strong> : BEP/CAP Electrotechnique</li>
    </ul>
</div>
</article>

</body>
</html>

et

html 
{
  height: 100%;
}

body
{
	height: 100%;
	margin: 0;
	padding: 0;
}
h1
{
	color: red;
	font-weight: bold;
	font-size: 3em;
}

p
{
	text-align: justify;
}

h2
{
  color: brown;
}

.center
{
  text-align: center;
}

.jaune
{
	color:yellow;
	text-align: center;
}

a
{
  font-weight: bold;
}

.imageflottante
{
    float: right;
    border-radius: 70px;
}

#smilley
{
	margin: auto;
	border: 3px red solid;
	width: 50%;
}

body
{
    background-image: url("fond.jpg");
    border: 3px red solid;
}

article
{
	display: flex;
	margin: auto;
	border: 3px orange solid;
	width: 85%;
	position: absolute;
	right: 0px;
}

#experience
{
    width: 20%;
    margin: auto;
    border: 3px maroon solid;
    min-height: 80%;
}

#competences
{
    width: 20%;
    margin: auto;
    border: 3px black solid;
    min-height: 100%;
}

#formation
{
    height: 100%;
    width: 20%;
    margin: auto;
    border: 3px blue solid;
}

aside
{
    background-image: url("Wood_BG.jpg");
	width: 15%;
	border: 3px green solid;
	height:100%;
	position: absolute;
	left: 0px;
	color:white;
	padding: 10px;
}

header
{
	border: 3px fuchsia solid;
	margin: auto;
	width: 85%;
	position:absolute;
	right: 0px;
}

#texteaside
{
	border: 3px fuchsia solid;
	margin-top: 50vh;
    transform: translateY(-50%);
}

Comme vous pouvez le voir, article et header se superposent au lieu de se suivre..

Merci d'avance pour votre coup de main, car là je sèche depuis des heures..

Edit :

Apparemment le soucis vient de

	header
{
	border: 3px fuchsia solid;
	margin: auto;
	width: 85%;
	position:absolute;
	right: 0px;
}

si j'enlève

	position:absolute;
	right: 0px;

alors les boites se suivent bien, mais je ne suis plus collé contre le bord droit..

Si vous avez une idée pour rester collé à droite tout en ayant les boites qui se suivent?

EDIT : SOLUTION

J'y ai mis la journée mais j'ai trouvé une solution qui me satisfait (pas la meilleure je pense mais bon..)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Mon CV</title>
</head>

<body>
	<aside>
		<div id="texteaside">
		<h2 class="jaune">Infos sur le liseré :</h2>
		<p>Ce liseré prends 15% de la largeur de l'écran et 100% de sa hauteur.<br /><br />
			Je sais pas si vous avez autant galéré que moi pour faire ce liseré, mais moi j'y ai passé plusieurs heures..<br /><br />
		Edit : 1 heure de plus pour centrer ce texte verticalement ^^<br /><br /></p>
		<div id="smilley">
		<p><img src="smiley.png" class="center" alt="Smiley deviens fou" />
		</p>
	</div>
</div>
	</aside>
<div id="test">
<header>
	<h1 class="center"><img src="moi.jpg" class="imageflottante" alt="Photo de Cipicchia Laurent" />Laurent CIPICCHIA</h1>
	<p class="center">Electricien et auto-entrepreneur</p><br />
</header>
<article>
  <div id="experience">
  	<h2>Mon expérience</h2>
    <ul>
    	<li><strong>2018</strong> : En cours de reconversion professionnel pour devenir <strong>Développeur Web</strong></li>
    	<li><strong>De 2011 à maintenant</strong> : Auto-entrepreneur sur le web en parallèle de l'électricité</li>
    	<li><strong>De 2002 à 2017</strong> : Electricien dans diverses usines metallurgiques et sidérurgiques</li>
    </ul>
</div>
    <div id="competences">
    <h2>Mes compétences</h2>

    <ul>
    	<li> Création de sites de niches avec le cms Wordpress</li>
    	<li> Marketing d'affiliation</li>
    	<li> Email Marketing</li>
    	<li> Référencement de pages (SEO et SEA)</li>
    </ul>
    <p>Je ne m'étends pas sur mes compétences en électricité vu que ce domaine ne m'intéresse plus.</p>
</div>

    <div id="formation">
    <h2>Ma formation</h2>

    <ul>
    	<li><strong>2018</strong> : Plusieurs certificats sur <a href="https://openclassrooms.com">OpenClassrooms</a></li>
    	<li><strong>2002</strong> : BAC PRO Equipements et installations électriques</li>
    	<li><strong>2000</strong> : BEP/CAP Electrotechnique</li>
    </ul>
</div>
</article>
</div>

</body>
</html>

et php :

html 
{
  height: 100%;
}

body
{
	height: 100%;
	margin: 0;
	padding: 0;
}
h1
{
	color: red;
	font-weight: bold;
	font-size: 3em;
}

p
{
	text-align: justify;
}

h2
{
  color: brown;
}

.center
{
  text-align: center;
}

.jaune
{
	color:yellow;
	text-align: center;
}

a
{
  font-weight: bold;
}

.imageflottante
{
    float: right;
    border-radius: 70px;
}

#smilley
{
	margin: auto;
	border: 3px red solid;
	width: 50%;
}

body
{
    background-image: url("fond.jpg");
    border: 3px red solid;
}

article
{
	display:flex;
	margin: auto;
	border: 3px orange solid;
	width: 100%;
}

#experience
{
    height: 100%;
    width: 30%;
    margin: auto;
    border: 3px maroon solid;
}

#competences
{
    height: 100%;
    width: 30%;
    margin: auto;
    border: 3px black solid;
}

#formation
{
    height: 100%;
    width: 30%;
    margin: auto;
    border: 3px blue solid;
}

aside
{
    background-image: url("Wood_BG.jpg");
	width: 15%;
	border: 3px green solid;
	height:100%;
	position: absolute;
	left: 0px;
	color:white;
	padding: 10px;
}

header
{
	border: 3px fuchsia solid;
	margin: auto;
	width: 100%;
}

#texteaside
{
	border: 3px fuchsia solid;
	margin-top: 50vh;
    transform: translateY(-50%);
}

#test
{
	width: 83%;
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 3px;
	border: 3px red solid;
}

en bref j'ai rajouté le bloc "test" qui regroupe header et article, mis un flex et une position en absolute à droite sur ce bloc test et remanié la taille des blocs se trouvant à l'intérieur.

Je laisse tout de même le sujet ouvert, si un plus compétent que moi à une meilleure solution :-)

merci

-
Edité par Laurent Cipicchia 13 mars 2018 à 18:08:58

Donne moi ton avis sur ma Reconversion professionnel en Développeur Web ----- Rejoins moi sur LinkedIn

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%

Comment mettre 2 boite une en dessous de l'autre?

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown