Partage

exercice semaine 3

13 juin 2018 à 9:59:51

Activité HTML5 - Semaine 3

<small>Temps d'attente moyen pour être corrigé sur cet exercice : corrigé dans la journée !</small>

Retour au cours

Il est temps de travailler la mise en page ! Pour le moment, nos pages étaient très, comment dire... verticales. On peut travailler le sens de lecture et profiter de la puissance de la mise en page CSS pour nos pages !

Je vais vous demander ici de structurer la page comme ceci :

  • A gauche, un liseré (purement décoratif, mais vous pouvez aussi mettre des informations à l'intérieur)
  • A droite, le contenu de votre CV, qui contiendra à l'intérieur, de gauche à droite les sections suivantes :
    • Mon expérience
    • Mes compétences
    • Ma formation

Cela devrait donner quelque chose comme ceci :

Si la hauteur du liseré peut être définie en valeur absolue (en pixels), tout le reste de la mise en page doit être en valeur relative (pourcentages). Le contenu doit occuper tout l'espace en largeur, quelle que soit la largeur de la fenêtre.

Bonjour,

Je n arrive pas à mettre la photo avec la présentation tout en haut du cv à cause de se liseré mis en place. j'en perds mon latin.

voici mes codes :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Katy Plouzeau</title>
    <link rel="stylesheet" type="text/css" href="CSS/cvkatyplouzeau.css">
</head>

<body>
    <div id="conteneur">
        <div class="element">
        </div>
            <header>

        <div class="element">
           
                <div id="pdp">
                        <a href="Images/katy.jpg" target="_blank"><img  src="Images/katy_mini.jpg" alt="photo d'identité"/></a>

                        <h1 id="title">katy plouzeau</h1>
                        <p>Aide à Domicile avec une solide expérience, capable de réaliser toutes les taches demandées en temps et en heure. Personne soucieuse d'obtenir des résultats dotés d'une capacité de communication interpersonnelle.</p><br/>
                </div>
        </div>       
            </header>
               
                   

                    <div class="element">
                    <div>           
                        <h2>Mon expérience et Compétence</h2><br/>
                   

                        <h3>07/2015  01/2017<br/><em> Aide à domicile C.C.A.S CESTAS</em></h3>

                        <ul>   
                            <li>Entretient de la maison</li>
                            <li>Aide à la toilette à une personne alitée</li>
                            <li>Accompagnement au rendez-vous médical</li>
                            <li>Effectuer des courses en respectant les habitudes alimentaires</li>
                            <li>A proposer des jeux de stimulation de la mémoire et jeux de société</li>
                            <li>Promenade</li>
                            <li>Aide dans les taches administratives</li>
                            <li>Préparation des repas</li>
                        </ul>   
   
                        <h3>10/2013  06/2015<br/><em> Aide à domicile A.D.M.R Allevard et st Pierre d'Allevard</em></h3>

                        <ul>
                            <li> Entretient domicile </li>
                            <li> Aide à la toilette à une personne alitée </li>
                            <li> Suivie d'une bénéficiaire en maltraitance morale et physique </li>
                            <li> Application de bas de contention </li>
                            <li> Préparation de repas </li>
                            <li> Aide au couché </li>
                            <li> Transfere à l'aide du disque 360° (soulève malade) </li>
                            <li> Promenade et jeux </li>

                        </ul>
                    </div>       
                    </div>       

                    <div class="element">
                    <div>   
                        <h2>Ma formation</h2>

                        <div id="text">
                            <p>Alors là    c'est simple....j'ai tout appris sur le tas.</p>
                        </div>
                    </div>   
                    </div>
       
   

    </div>
</body>
</html>

et voilà mon css

@font-face
{
       font-family: 'nanumgothicextrabold';
    src: url('../Fonts/nanumgothic-extrabold-webfont.eot');
    src: url('../Fonts/nanumgothic-extrabold-webfont.eot') format('embedded-opentype'),
         url('../Fonts/nanumgothic-extrabold-webfont.woff2') format('woff2'),
         url('../Fonts/nanumgothic-extrabold-webfont.woff') format('woff'),
         url('../Fonts/nanumgothic-extrabold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body
{
    background-image: url("../Images/neige-blanche-montagne.jpg");
    background-repeat: no-repeat;
    font-family: "nanumgothicextrabold";

}

#title
{
    font-size: 3em;
    text-transform: capitalize;
}

h1   
{
    color: purple;
    text-align: center;
    font-size: 1.3em ;
}
h2
{
    text-align: none;
    color: purple;
}

p
{
    color: black;
    text-align: center;
}
ul
{
    border:3px purple solid;
    border-radius: 10px;
    box-shadow: 6px 6px 6px black;
    width: 30%;
}

#pdp
{
    position: relative;
}


#pdp img
{
    position: absolute;
    top: 0px;
    right: 0px;
}


#bloc_page
{
     width: 100%;
     display: flex;
}     

            
 #text
{
    border:3px purple solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 6px 6px 6px black;
    color: black;
    width: 80%;
    height: 50%;

}
   

#conteneur
{
   
    display: flex;

}

.element:first-child
{
    background-color: purple;
    min-height:120vh;
    width: 200px;

}
.element
{
    display: flex;
    height: 80%;
    width: 80%;
}
.element:first-child(2)

{
   
    align-items:  flex-start;
    justify-content: center;
    width: 100%;
    height: 30%;

}

Staff 13 juin 2018 à 10:12:43

Bonjour,

Merci d'utiliser la mise en forme de code Image

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Image de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
18 juin 2018 à 8:51:28

<pre class="brush: c;css</pre>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Katy Plouzeau</title>
	<link rel="stylesheet" type="text/css" href="CSS/cvkatyplouzeau.css">
</head>

<body>
	<div id="conteneur">
		<div class="element">
		</div>
			<header>

		<div class="element">
			
				<div id="pdp">
						<a href="Images/katy.jpg" target="_blank"><img  src="Images/katy_mini.jpg" alt="photo d'identité"/></a>

						<h1 id="title">katy plouzeau</h1>
						<p>Aide à Domicile avec une solide expérience, capable de réaliser toutes les taches demandées en temps et en heure. Personne soucieuse d'obtenir des résultats dotés d'une capacité de communication interpersonnelle.</p><br/>
				</div>
		</div>		
			</header>
				
					

					<div class="element">
					<div>			
						<h2>Mon expérience et Compétence</h2><br/>
					

						<h3>07/2015  01/2017<br/><em> Aide à domicile C.C.A.S CESTAS</em></h3>

						<ul>	
							<li>Entretient de la maison</li>
							<li>Aide à la toilette à une personne alitée</li>
							<li>Accompagnement au rendez-vous médical</li>
							<li>Effectuer des courses en respectant les habitudes alimentaires</li>
							<li>A proposer des jeux de stimulation de la mémoire et jeux de société</li>
							<li>Promenade</li>
							<li>Aide dans les taches administratives</li>
							<li>Préparation des repas</li>
						</ul>	
	
						<h3>10/2013  06/2015<br/><em> Aide à domicile A.D.M.R Allevard et st Pierre d'Allevard</em></h3>

						<ul>
							<li> Entretient domicile </li>
							<li> Aide à la toilette à une personne alitée </li>
							<li> Suivie d'une bénéficiaire en maltraitance morale et physique </li>
							<li> Application de bas de contention </li>
							<li> Préparation de repas </li>
							<li> Aide au couché </li>
							<li> Transfere à l'aide du disque 360° (soulève malade) </li>
							<li> Promenade et jeux </li>

						</ul>
					</div>		
					</div>		

					<div class="element">
					<div>	
						<h2>Ma formation</h2>

						<div id="text">
							<p>Alors là	c'est simple....j'ai tout appris sur le tas.</p>
						</div>
					</div>	
					</div>
		
	

	</div>
</body>
</html>

 et le code CSS

<pre class="brush: c;css</pre>
@font-face
{
	   font-family: 'nanumgothicextrabold';
    src: url('../Fonts/nanumgothic-extrabold-webfont.eot');
    src: url('../Fonts/nanumgothic-extrabold-webfont.eot') format('embedded-opentype'),
         url('../Fonts/nanumgothic-extrabold-webfont.woff2') format('woff2'),
         url('../Fonts/nanumgothic-extrabold-webfont.woff') format('woff'),
         url('../Fonts/nanumgothic-extrabold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body
{
	background-image: url("../Images/neige-blanche-montagne.jpg");
	background-repeat: no-repeat;
	font-family: "nanumgothicextrabold";

}

#title
{
	font-size: 3em;
	text-transform: capitalize;
}

h1	
{
	color: purple;
	text-align: center;
	font-size: 1.3em ;
}
h2
{
	text-align: none;
	color: purple;
}

p
{
	color: black;
	text-align: center;
}
ul
{
	border:3px purple solid;
	border-radius: 10px;
	box-shadow: 6px 6px 6px black;
	width: 30%;
}

#pdp
{
	position: relative;
}


#pdp img 
{
	position: absolute;
	top: 0px;
	right: 0px;
}


#bloc_page
{
	 width: 100%;
	 display: flex;
}	 

	 		
 #text
{
	border:3px purple solid;
	border-radius: 10px 10px 10px 10px;
	box-shadow: 6px 6px 6px black;
	color: black;
	width: 80%;
	height: 50%;

}
	

#conteneur
{
	
	display: flex;

}

.element:first-child
{
	background-color: purple;
	min-height:120vh;
	width: 200px;

}
.element
{
	display: flex;
	height: 80%;
	width: 80%;
}
.element:first-child(2)

{
	
	align-items:  flex-start;
	justify-content: center;
	width: 100%;
	height: 30%;

}
 

-
Edité par KatyPlouzeau 18 juin 2018 à 9:09:06

19 juin 2018 à 10:00:53

Je n arrive pas à mettre la photo avec la présentation tout en haut du cv à cause de se liseré mis en place. j'en perds mon latin.

exercice semaine 3

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