Exercice 4 du HTML/CSS

Bonjour,

Débutante dans ce cours de HTML/CSS, j'ai besoin d'aide concernant l'exercice 4 ou l'on doit mettre en pratique nos connaissances sur le responsive design via les Media Queries.Voila ce que l'on doit faire:

Pour cet exercice, vous allez devoir adapter le CV que vous avez fait jusqu'ici pour qu'il s'affiche verticalement (et non horizontalement) sur les petites résolutions.

Le schéma ci-dessous décrit comment le site doit s'afficher. A gauche, la version "normale" écran large (disons 1024 pixels de large au moins) et à droite la version réduite, plus adaptée à une expérience mobile :

Vous devrez :

Faire disparaître le liseré dans la version mobile
Afficher verticalement les sections expérience, compétences et formation au lieu de les afficher côte à côte horizontalement.

Après des heures a m'arracher les cheveux ( je vais finir chauve, lol), j'ai enfin réussi a faire disparaitre le liseré et que mes 3 sections de mon cv passe les uns sous les autres.

Par contre, rien n'a faire mes h1, h2 et mon image dans mon header ne bouge pas pour s'adapter a la taille de l'écran.

Voici mon HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="stylecv2.css">
		<title>Mon C.V.</title>
	</head>

	<body>
		<div id="bloc_page">
			<div class="conteneur">
				<header>
				 	<a href="maia.jpg"><img src="miniature.jpg" alt="photos de mes toutous" title="cliquez pour agrandir"/></a>
					<h1>MAIA</h1>
					<h2>Future Développeuse Back</h2>
				</header>
				<div id="corps">
					 	<aside>
						</aside>
					<section id="experience">
						<h2> Mon experience</h2>
							<ul>
								<li><strong>1999</strong> Psychologue Sociale,I.F.I.P. Rochefort:</br>
						 Passation de test de personnalité et entretiens individuels.</br>
					    Elaboration et formalisation de projets professionnels.</br>
						 Animation de groupes de 8 à 10 personnes.</li>

								<li><strong>1998-1999</strong> Psychologue Sociale,Service de Technologie de l'éducation, Liège, Belgique</br>
						 Analyse des besoins et definition des objectifs de formation.</br>
						 Création de page Web avec Powerpoint.</br>
						 Collaboration à la coordination d'une action de formation de 6 semaines.</li>

								<li><strong>1998</strong> Psycholgue Sociale, Pro Select Search, Liège, Belgique.</br>
						 Accueil physique et téléphonique, sélection de C.V.</br>
						 Passation, correction, analyse et interpretation des tests.</br>
						 Entretien individuels et rédaction de profils.</li>

								<li><strong>1993-1997</strong> Surveillante d'externat, Collège Jean-Hay, Marennes, 17</br>
						 Surveillance et aide aux éléves.</br>
						 Planification des emplois du temps et formation des nouveaux collègues.</br>
						 Gestion des abscences, résolution de problemes de discipline ou personnels.</li>
							</ul>
					</section>
					<section id="competences">
						<h2>Mes compétences</h2>
							<ul>
								<li><strong>Psychologie Sociale :</strong></br>
						 Passation des tests de personnalité et entretiens individuels.</br>
						 Elaboration et formalisation de projets professionnels.</br>
						 Animation de groupes de 8 à 10 personnes.</br>
						 Passation, correction, analyse et interpretation de tests.</br>
						 Sélection de c.v., entretien individuels et rédaction de profils. </br></li>
								<li> <strong>Correctrice :</strong></br>
						 Correctrice benevole de recueil de poèmes.</br>
						 Correctrice benevole au comité de lecteur Nouvelles plumes.</br></li>
								<li><strong>Informatique :</strong></br>
						 WORD, EXCELL, INTERNET </li>
							</ul>
					</section>
					<section id="formation">
						<h2>Formations</h2>
							<ul>
								<li><strong>2015</strong> Centre d'écriture et de Communication:</br>
					Formation de correctrice par correspondance</li>
								<li><strong>2009-2010</strong> APP de Jonzac et Sif de Saintes:</br>
					Formation à Word, Excell, Powerpoint, Comptabilité et Anglais</li>
								<li><strong> 1995-1997</strong> Université de Grenoble</br>
					D.E.P.S.A. Diplôme Européen de Psychologie Sociale Appliquée, Master 2</li>
								<li><strong> 1993-1995</strong> CNED,</br>
					 B.T.S. Comptabilité et Gestion ( 1 ere année)</li>
								<li><strong> 1992-1993</strong> Université de Poitiers</br>
					 Maîtrise de Psychologie Sociale.</li>
							</ul>
					</section>
				</div>
			</div>
		</div>
	</body>
</html>

Et mon CSS:

/*definition police personnalisées*/
@font-face { 
    font-family: 'ambleregular';
    src: url('fonts/Amble-Regular-webfont.eot');
    src: url('fonts/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Amble-Regular-webfont.woff') format('woff'),
         url('fonts/Amble-Regular-webfont.ttf') format('truetype'),
         url('fonts/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* elements principaux de la page*/
body
{
    background-image: url('fond_creme.png');
    font-family:'ambleregular', Arial,sans-serif;
 }
 #bloc_page
 {
 width:1200px;
 margin:auto;
 background-image:url('fond-creme.png');
}

/*header*/
header
{
width: 90%;
margin-bottom:20px ;
padding-bottom:20px;
text-align: center;
}
img
{
float: right;
width:100px;
height:70px;
border:3px solid black;
box-shadow: 5px 5px 3px black;
}
header h1
{
    font-size: 1.8em;
   
}
header h2 
{
    font-size: 1em;
    
}
/*corps*/
.conteneur
{
    width: 100%;
    margin-right: 10px;
}
.corps
{
    width:1100px; 
}
section h2
{
    
    font-size: 1.2em;
    color:#570906;
    text-align: center;
}
section
{
    display:inline-block;
    width:30%;
    text-align: justify;
    padding: 12px;
    vertical-align: top;
}

/*lisere*/
aside
{
    position: absolute;
    background:url("lisere_transparent.png")repeat-y;
    width:10%;
    left:15px;
    height:600px;
    margin-top: 2px;
 
}
@media all and (max-width: 1024px){
section
{
    display: block;
    clear: both;
}
aside
{
display: none;
}
}

J'ai essayé plusieurs façons mais rien n'y fait, aussi si vous pouviez m'aider je vous en remercie d'avance.

Bonjour,

Voici une version un peu plus légère (mais pas complete) que la votre : https://jsfiddle.net/WiizMamel/b8sqyd1h/

Les images ne s'affichent pas car elles sont stockés sur votre pc.

Vous avez fait plusieurs erreurs :

- La balise </br> n'existe pas c'est <br/>

- Dans votre css vous avez fixé à plusieurs reprises une largeur width. Par exemple : .width: 1100px, la largeur est donc toujours à 1100 pixels et il est donc normal que ça dépasse des petits écrans.

- Je vous conseil surtout de revoir ce chapitre : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox qui est selon moi le chapitre le plus difficile à maîtriser.

Bonne chance !

A L'aide

Exercice 4 du HTML/CSS

Supprimer

Modérer

Signaler le message aux modérateurs