Partage

activité 3 mise en page avec Flexbox

13 novembre 2017 à 12:57:30

Bonjour à tous,

Bon ça m'embête de venir demander car j'aime bien me débrouiller tout seule d'habitude...j'ai recherché sur le forum, vu des sujets par rapport à mon pb mais soit je suis pas réveillé (pourtant il est 13h..) soit je suis pas doué :/

je pense que mon CV est plutôt bon (peut être encore un peu classique..) mais je n'arrive pas à mettre le fameux liseré sur le coté...vous allez sans doute trouver ça nul mais bon... ça me fait chier depuis tt à l'heure...

je vous mets l'HTML et le CSS. Merci de votre aide et bonne journée à tous.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css" />

			<title>Renaudin</title>
	<head>

		<div id="bloc_page">

 	<header>

<a href="images/moi.jpg"><img src="images/minimoi.jpg" class="photo" alt="photo christophe" title="c'est moi !" /> </a>


		<h1>Renaudin Christophe</h1>

		<p class="introduction"> <em>Si tu veux courir, cours 1 km. Si tu veux changer ta vie, cours un marathon.</em> </p>

	</header>

	<body>

		<div id="lisere">
		</div>

<br></br>

		<aside>

		<div id="exp_form_comp">

		<h3>Expériences professionnelles</h3>

		<ul> 
			<li><strong>10/2002 à 10/2017</strong> : 
				Conseiller en assurances - Sté MATMUT ORSAY (91)</li>
			<li><strong>02/2002 à 09/2002</strong> : 
				Technicien Hotline - Sté CHALLENGER LES ULIS (91)</li>
			<li><strong>08/1999 à 09/2000</strong> : 
				Employe libre-service - MARCHE PLUS MONTLHERY (91)</li>
			</ul>

		<h3>Formation</h3>

		<ul>
			<li><strong>En cours</strong> : Dévéloppeur d'application Frontend</li>
			<li><strong>1999</strong> : BAC STT Action commerciale Lycée René Cassin (91)</li>
			<li><strong>1996</strong> : BEP Action commerciale et comptable Lycée Paul Langevin (91)</li>
		</ul>

		<h3>Compétences</h3>

		<ul>
			<li>Appréciation de risques assurances</li>
			<li>Etude de risques crédits</li>
			<li>Gestion de sinistres IARD</li>
			<li>MacOs / Windows</li>
			<li>iOS</li>
			<li>Word/Excel/Powerpoint</li>
			<li>Web</li> <a href="https://openclassrooms.com/course-certificates/6716470028"> Certificat de réussite OpenClassRooms </a>

		</ul>

		</div>

		</aside>

	<body>	

	<footer>
			
	</footer>

</html>

et le CSS >>

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


body 
{
background: url("images/fond gris.jpg");
margin: 0%
padding: 0%;
}

#bloc_page
{
	width: 800px;
	margin: auto;
}

#lisere

{
	position: relative;
	background-color: #5b5252;
	width: 10%;
	margin-top: 50px;
	height: 400px;
	border-radius: 10%;

}

h1
{
	text-align: center;
	font-family: 'goudy_bookletter_1911regular', arial, serif;
}

.introduction
{
	margin-top: 50px ;
	text-align: center;
	color: blue;
	border: 2px #5b5252 solid;
}

.photo
{
	width: 70px ;
	float: right;
	box-shadow: 6px 6px 3px gray 
}

h3
{

	font-family: 'goudy_bookletter_1911regular', arial, sans serif;
	color: #443d3d;
	text-decoration: underline;
}

ul
{
	font-family: arial; 
}


#exp_form_comp
{
	display: flex;
	flex-direction: row;
	text-align: baseline;
}

Mewen_bzh

13 novembre 2017 à 13:29:54

Salut,

Première étape : corriger son fichier HTML

Ici je vois plusieurs erreurs :

- Ligne 7 : tu utilises <head> au lieu de </head>,

- Ligne 9, tu ouvres une <div id="bloc_page"> mais à aucun moment dans le code tu penses à fermer cette div,

- Ligne 27 : tu écris <br> et </ br> au lieu de <br /> (de plus ces sauts de lignes sont inutiles ici, tu devrais gérer tes margins et paddings en CSS),

- Ligne 61 : le lien devrait être dans l'item de liste et non en dehors,

- Un peu partout : pas de alt sur les images, pas de title sur les liens.

Corrige déjà cela et tu y verras plus clair pour la suite.

-
Edité par Mewen_bzh 13 novembre 2017 à 13:30:07

Je ne réponds pas aux messages privés.

cekri91

13 novembre 2017 à 14:25:57

Merci beaucoup Mewen

Erreur de débutant...c'est comme ça qu'on apprend..

J'ai corrigé le code c'est ok mais je bloque tes sur le liseret...

je remets le code modifié >>

Merci de ton aide

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css" />

			<title>Renaudin</title>
	</head>

		<div id="bloc_page">

 	<header>

<a href="images/moi.jpg"><img src="images/minimoi.jpg" class="photo" alt="photo christophe" title="c'est moi !" /> </a>


		<h1>Renaudin Christophe</h1>

		<p class="introduction"> <em>Si tu veux courir, cours 1 km. Si tu veux changer ta vie, cours un marathon.</em> </p>

	</header>

	<body>

		<div id="lisere">
		</div>


		<aside>

		<div id="exp_form_comp">

		<h3>Expériences professionnelles</h3>

		<ul> 
			<li><strong>10/2002 à 10/2017</strong> : 
				Conseiller en assurances - Sté MATMUT ORSAY (91)</li>
			<li><strong>02/2002 à 09/2002</strong> : 
				Technicien Hotline - Sté CHALLENGER LES ULIS (91)</li>
			<li><strong>08/1999 à 09/2000</strong> : 
				Employe libre-service - MARCHE PLUS MONTLHERY (91)</li>
			</ul>

		<h3>Formation</h3>

		<ul>
			<li><strong>En cours</strong> : Dévéloppeur d'application Frontend</li>
			<li><strong>1999</strong> : BAC STT Action commerciale Lycée René Cassin (91)</li>
			<li><strong>1996</strong> : BEP Action commerciale et comptable Lycée Paul Langevin (91)</li>
		</ul>

		<h3>Compétences</h3>

		<ul>
			<li>Appréciation de risques assurances</li>
			<li>Etude de risques crédits</li>
			<li>Gestion de sinistres IARD</li>
			<li>MacOs / Windows</li>
			<li>iOS</li>
			<li>Word/Excel/Powerpoint</li>
			<li>Web <a href="https://openclassrooms.com/course-certificates/6716470028" title="certificat OCR"> Certificat de réussite OpenClassRooms</a></li> 

		</ul>

		</div>
		</div>


		</aside>

	<body>	

	<footer>
			

	</footer>

</html>

et le CSS >>

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


body 
{
background: url("images/fond gris.jpg");
margin: 0%
padding: 0%;
}

#bloc_page
{
	width: 800px;
	margin: auto;
}

#lisere

{
	position: relative;
	background-color: #5b5252;
	width: 10%;
	margin-top: 50px;
	margin-bottom: 30px ;
	height: 400px;
	border-radius: 10%;

}

h1
{
	text-align: center;
	font-family: 'goudy_bookletter_1911regular', arial, serif;
}
.introduction
{
	margin-top: 50px ;
	text-align: center;
	color: blue;
	border: 2px #5b5252 solid;
}

.photo
{
	width: 70px ;
	float: right;
	box-shadow: 6px 6px 3px gray 

}

h3
{
	

	font-family: 'goudy_bookletter_1911regular', arial, sans serif;
	color: #443d3d;
	text-decoration: underline;
}

ul
{
	font-family: arial; 
}


#exp_form_comp
{
	display: flex;
	flex-direction: row;
	text-align: baseline;
	
}

Mewen_bzh a écrit:

Salut,

Première étape : corriger son fichier HTML

Ici je vois plusieurs erreurs :

- Ligne 7 : tu utilises <head> au lieu de </head>,

- Ligne 9, tu ouvres une <div id="bloc_page"> mais à aucun moment dans le code tu penses à fermer cette div,

- Ligne 27 : tu écris <br> et </ br> au lieu de <br /> (de plus ces sauts de lignes sont inutiles ici, tu devrais gérer tes margins et paddings en CSS),

- Ligne 61 : le lien devrait être dans l'item de liste et non en dehors,

- Un peu partout : pas de alt sur les images, pas de title sur les liens.

Corrige déjà cela et tu y verras plus clair pour la suite.

-
Edité par Mewen_bzh il y a environ 1 heure

noopy360

13 novembre 2017 à 14:50:22

Vue le bordel dans ton code (mal indenter, espace inutile, balise inutile et/ou mal utiliser, etc...), je me suis permis de revoir tout ton code... si tu veut des explication sur ce que j'ai fait a ton code fait moi signe...

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
            <title>Renaudin</title>
		</head>
		<body>
			<header>
				<a href="images/moi.jpg"><img src="images/minimoi.jpg" class="photo" alt="photo christophe" title="c'est moi !" /> </a>
				<h1>Renaudin Christophe</h1>
				<p class="introduction"> <em>Si tu veux courir, cours 1 km. Si tu veux changer ta vie, cours un marathon.</em> </p>
			</header>
			<section>
				<aside></aside>
				<div class="corp">
					<article>
						<h2>Expériences professionnelles</h2>
						<ul>
							<li><strong>10/2002 à 10/2017</strong> :
							Conseiller en assurances - Sté MATMUT ORSAY (91)</li>
							<li><strong>02/2002 à 09/2002</strong> :
							Technicien Hotline - Sté CHALLENGER LES ULIS (91)</li>
							<li><strong>08/1999 à 09/2000</strong> :
							Employe libre-service - MARCHE PLUS MONTLHERY (91)</li>
						</ul>
					</article>
					<article>
						<h2>Formation</h2>
						<ul>
							<li><strong>En cours</strong> : Dévéloppeur d'application Frontend</li>
							<li><strong>1999</strong> : BAC STT Action commerciale Lycée René Cassin (91)</li>
							<li><strong>1996</strong> : BEP Action commerciale et comptable Lycée Paul Langevin (91)</li>
						</ul>
					</article>
					<article>
						<h2>Compétences</h2>
						<ul>
							<li>Appréciation de risques assurances</li>
							<li>Etude de risques crédits</li>
							<li>Gestion de sinistres IARD</li>
							<li>MacOs / Windows</li>
							<li>iOS</li>
							<li>Word/Excel/Powerpoint</li>
							<li>Web <a href="https://openclassrooms.com/course-certificates/6716470028" title="certificat OCR"> Certificat de réussite OpenClassRooms</a></li>
						</ul>
					</article>
				</div>
			</section>
		</body>
</html>

CSS

@font-face{
	font-family: 'goudy_bookletter_1911regular';
	src: url('fonts/goudy_bookletter_1911-webfont.eot');
	src: url('fonts/goudy_bookletter_1911-webfont.eot?#iefix') format('embedded-opentype'),
	url('fonts/goudy_bookletter_1911-webfont.woff2') format('woff2'),
	url('fonts/goudy_bookletter_1911-webfont.woff') format('woff'),
	url('fonts/goudy_bookletter_1911-webfont.ttf') format('truetype'),
	url('fonts/goudy_bookletter_1911-webfont.svg#goudy_bookletter_1911regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
body{
	background: url("images/fond gris.jpg");
	margin: 0%
	padding: 0%;
}
#bloc_page{
	width: 800px;
	margin: auto;
}
section, .corp{
	display:flex;
}
aside{
	background:red;
	width: 10%;
	height: 400px;
}
h1{
	text-align: center;
	font-family: 'goudy_bookletter_1911regular', arial, serif;
}
.introduction{
	margin-top: 50px ;
	text-align: center;
	color: blue;
	border: 2px #5b5252 solid;
}
.photo{
	width: 70px ;
	float: right;
	box-shadow: 6px 6px 3px gray;
}
h2{
	font-family: 'goudy_bookletter_1911regular', arial, sans serif;
	color: #443d3d;
	text-decoration: underline;
}
ul{
	font-family: arial;
}

-
Edité par noopy360 13 novembre 2017 à 15:00:50

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

cekri91

13 novembre 2017 à 16:20:19

Oui beaucoup d'espaces inutiles...je ne sais pas si au bout d'1 semaine on peut déjà arriver à tout faire nickel...apparemment c'est pas encore mon cas :/

J'ai revu le code en corrigeant ces erreurs.

j'ai bien capté que la balise <section> qui commence après <header> et qui englobe la page est le conteneur (d'ou le display flex dans le CSS). les <article> que j'ai oublié de mettre...

j'ai bien réussi à me mettre le liseré, j'essaie de voir maintenant pour qu'il fasse toute la hauteur de la page... mais il s'élargit quand j'agrandis la page...

Merci Noopy

noopy360 a écrit:

Vue le bordel dans ton code (mal indenter, espace inutile, balise inutile et/ou mal utiliser, etc...), je me suis permis de revoir tout ton code... si tu veut des explication sur ce que j'ai fait a ton code fait moi signe...