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>
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>
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
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
