Partage

Exercice 4 du HTML/CSS

A L'aide

4 mai 2017 à 2:25:49

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.




4 mai 2017 à 15:19:21

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 !

Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie... je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi...
17 mai 2017 à 19:39:46

Bonjour,

Merci pour votre aide. Je vais revoir la leçon comme vous me l'avez conseillé.

Isa

Exercice 4 du HTML/CSS

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