probleme exercice 3 mise en page du cv

gmichele

6 février 2017 à 19:25:04

Bonjour,

Après plusieurs heures de prise de tête, je me decide à demander de l'aide

voici a quoi devrait ressembler mon cv

et voila a quoi ressemble le mien !!!

Je n'arrive pas

1- A mettre ma photo en haut à droite

2 - Que mon liseré prenne toute la hauteur de la page, sans marge sur le coté.

PLEASE HEEEELP

Voici mon code :

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

<h1> Montagu Michèle </h1>
<p> Futur Webmaster à votre service </p>
</div>
<div class="ma photo">
<img class="photo"  src= "ma_photo_cv.jpg " alt= ma photo de cv />


<div class="lisere">
text
</div>


<div id="conteneur">
<div class="experiences"> <h2> Mon experience </h2>

<ul>
<li><strong> De 1789 à 1819</strong> Fantôme en Ecosse </li>
<li> <strong>De 1820 à 1832</strong> Statue au chateau de Versailles </li>
<li> <strong>De 1833 à 1920</strong> Fantôme de l'Opera Garnier</li>
<li> <strong>De 1921 à 2010</strong> Gardien de nuit au Louvre </li>
</ul></div>

<div class="competences"> <h2> Mes compétences </h2>
<p> Reconnu meilleur fantôme du siècle en 1802 en Ecosse </p></div>
<div class="formation"><h2> Ma formation </h2>
<p> J'ai été formé au travers de mes longues expérences </p></div>
</div>


</body>
</html>

et mon CSS

h1
{ /* mon nom*/
color: black;
font-family: Georgia;
text-align: center;
 }

 body
 {
	 background-image: url("fond.jpg");
 }
	
		
p
	{/*futur we....*/
		text-align: center;
		font-size: 15px;
	}
	
	
#conteneur /*mon experience*/
{
display: flex;
justify-content: space-around;
margin-right: 20%;
margin-top: 10%;

}
/*lisere*/
html, body, {
    height: 100%;
    margin: 0px;
}
  
.lisere {
   float: left;
    width: 90px;
    height: 1000px;
    background: black;
	border-radius: 10px;
	font-size: 
}
  .photo
{
    float: right;
}

Merci d'avance de votre aide

-
Edité par gmichele 6 février 2017 à 19:26:05

gmichele

RaphaëlDuchemin

7 février 2017 à 8:21:59

dans le html la photo vient après le <h1> donc c'est logique que si tu mets un float:right elle ne soit pas tout en haut mais après le titre. Donc il faut la mettre en premier dans le body.

Même problème pour le liseré.

-
Edité par RaphaëlDuchemin 7 février 2017 à 8:24:07

Fawn Le Sombre

7 février 2017 à 11:16:12

Evitez de mettre des balises <div> partout....

Je m'explique, essayez comme dans l'exemple du cours et avec les mots clefs donnés dans les instructions de visualiser le résultat voulu :

-Quelle balise sémantique pourrait contenir un titre et une photo ?

-Un liseret sur le côté...Quelle balise sémantique pourrait faire ça ?

-On nous parle de "sections"...Même réflexion...

Ensuite évidement pourquoi ne pas mettre quelques balises <div> pour des conteneurs par exemple ?

Au pire faites un petit dessin (c'est ce que j'ai fait), ça aide bien

Voilà je pense ne pas pouvoir aider plus que ça

Schéma :

-
Edité par Fawn Le Sombre 7 février 2017 à 13:21:52

gmichele

7 février 2017 à 19:01:25

Merci à vous 2, très bonne l'idée du shéma je vais reprendre mon code a 0, tout sera surement beaucoup plus clair

Encore merci

gmichele

Sévrine

19 avril 2017 à 18:19:04

Bonjour !

Je commence sérieusement à douter de ma logique... 3 jours que je fais et refais mais je n'y suis toujours pas... Ça commence à être démotivant !

J'ai tout recommencer en suivant le schéma parce qu'il me semblait qu'avec ça je comprenais bien mais a priori toujours pas ! HELP !

Je veux pas forcément qu'on me donne la solution mais si jamais vous voyez les aberrations dans mon code, je veux bien un coup de main.

Finalement, les seuls choses qui se placent bien c'est mon <aside> et mon titre. Mais la photo est en plein milieu et les blocs texte sont les uns en dessous des autres...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="style-cv3.css">
		<title>CV │ Sévrine MJC</title>
	</head>

	<body>
		<div class="conteneur"> <!--Bloc page-->
			<aside> <!--Bordure-->
				<p>Employée dévouée, travailleuse et débrouillarde, je suis de retour d’une expatriation de 5 ans au Québec.</p>
				<p>Ma grande polyvalence et ma capacité d’apprentissage m’ont permis d’évoluer d’un simple poste de commis administratif à celui de graphiste exécutante. Cette fonction m’a permis de confirmer mon plaisir à travailler en intégration web, photographie et retouches photos.</p>
				<p>Cette expérience m’a donné l’opportunité d’évoluer et d’acquérir des compétences très variées dans un service marketing et communications dynamique.</p>
				<p>Depuis mon retour, j’assure un poste de web marketer pour la même entreprise en télétravail et je souhaite maintenant aller vers de nouveaux défis.</p>
			</aside>

			<div> <!--Conteneur-->
				<header> <!--Titre et photo-->
					<h1>Sévrine MJC</h1>
					<p>Graphiste │ Web Marketer à la recherche de nouveaux défis</p>
					<a href="images/sevrine.jpg" target="_blank"><img src="images/sevrine_miniature.jpg" alt="Ma photo" title="Cliquez pour agrandir" id="images" /></a>
				</header>

				<div class="contenu"> <!--Conteneur de sections-->
					<section>
						<h3>Mes expériences</h3>
						<ul>
							<li><strong>De 2016 à 2017 :</strong> Web marketer spécialisée Inbound pour Fordia - Télétravail</li>
							<li><strong>De 2011 à 2016 :</strong> Infographiste exécutante pour Fordia - Montréal, QC, Canada</li>
							<li><strong>De 2007 à 2011 :</strong> Adjointe à la responsable boutique pour l'Aquarium Mare Nostrum - Montpellier</li>
						</ul>
					</section>
					<section>
						<h3>Mes compétences</h3>
						<ul>
							<li>InDesign CS6</li>
							<li>Photoshop CS6</li>
							<li>Illustrator CS6</li>
							<li>Acrobat DC</li>
						</ul>
					</section>
					<section>
						<h3>Ma formation</h3>
						<ul>
							<li>Actuellement en formation certifiante, <a href="https://openclassrooms.com/">OpenClassrooms</a></li>
							<li>Certification Inbound Marketing, <a href="http://academy.hubspot.com/">Hubspot Academy</a></li>
							<li>Formation Photoshop, Alias Formation</li>
						</ul>
					</section>
				</div>
			</div>
		</div>
	</body>
</html>

@font-face {
    font-family: 'caviar_dreamsregular';
    src: url('CaviarDreams-webfont.eot');
    src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams-webfont.woff') format('woff'),
         url('CaviarDreams-webfont.ttf') format('truetype'),
         url('CaviarDreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
	background: url("images/background.jpg") fixed no-repeat;
	font-family: 'caviar_dreamsregular', Arial, Impact, serif;
	width: 1000px;
}

h3
{
	color: #26A594;
	font-style: italic;
}

.conteneur
{
	display: block;
	flex-flow: row nowrap;
	justify-content:space-between;
	align-items: flex-start;
	align-content: flex-start;
}

aside
{
	align-self: stretch;
	position: fixed;
	background-color: #046380;
	width: 150px;
	height: 100%;
	padding: 0 20px 0 20px;
	font-size: 0.8em;
	border-radius: 6px;
	margin-top: -15px;
	font-style: italic;
	color: white;
}

header
{
	align-self: center;
	flex: 1 1 auto;
	text-align: center;
	margin-left: 200px;

}

#images
{
	align-self: right;
	margin-top: -100px;
	border: 3px #000;
	border-radius: 60px;
	box-shadow: 3px 3px 6px black;

}

.contenu
{
	align-self: baseline;
	margin-left: 200px;
	padding-top: 150px;
}

.expe .compe .form
{
	align-self: space-between;
	max-width: 33%;
}

Sev