Activité HTML5 - Semaine 4

15 novembre 2017 à 18:15:12

Bonsoir à tous,

je suis actuellement sur l'activité de la semaine 4. Lorsque j'essaie de réduire la taille de la fenêtre, le liseret s'efface comme prévu , mais je n'arrive pas à placer mon conteneur (contenant les parties "Mon expérience" "Mes compétences" et "Ma formation" à gauche.Elles s'affichent comme voulu en colonne mais ne s'alignent pas à gauche de la page.

J'ai essayé par diverses manières comme vous le verrez mais sans succès. Pourriez-vous m'indiquer ce qu'il ne va pas ?

Voilà mon code HTML:

<!DOCTYPE html>

<html> 

<head>

<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/> 
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
<title> Mon CV </title> 

</head> 


<body> 

<aside>

</aside>

<header>


<h4> <a href="photo.png"><img src="photo_mini.png" class="img" alt="Photo Google"/></a> </h4> 

<h1> <strong>  Santos Alexandre </strong> </h1> <br/> 



<h3> <em> Etudiant et curieux.</em> </h3> <br/>


</header>



<section>


<div id="conteneur">
	<div class="exp"> <h2> Mon expérience </h2>  
	


<p>



<ul> <li> Novembre 2017 : <br/> 
Chargé de renforts, BNP Paribas </li> <br/>
 
<li> Août 2017: <br/>
Auxiliaire de vacances, BNP Paribas </li> <br/>

<li> Décembre 2016: <br/>
Vendeur, Chocolaterie Roy </li> <br/>

</ul>

</div>

</p>

<p>

<div class="comp"> <h2> Mes compétences </h2> 

<ul>

<li> Pack Office </li> <br/>

<li> Début HTML et CSS</li> <br/> 

</ul>

</div>

</p>

<p>

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

<ul> 

<li> 2013-2017: <br/>
Université Paris 10 </li> <br/>

<li> 2017-2019: <br/>
Inseec Paris </li> <br/>

</ul>

</div>

</p>



</section>



</body>

</html>

Et mon code CSS:

Alexandre */
h1
{
	text-align: center;
	font-family: Blogger_Sans-Medium-webfont;
	color: white;
	
margin-right: -130px;
}

/* Photo CV */
img
{
	float: right;
	width: 125px;
	border: 5px solid black;
margin-left: -150px;
}




/* Etudiant et curieux */ 
em
{
	color:white;
}
h3
{
	text-align: center;
}
h3
{
	font-size: large;
	margin-right: 126px;
margin-right: -130px;
}


/*Sous-parties */
h2
{
	text-decoration: underline;
}
h2
{
	color:white;
}
.comp
{
	margin-left: -40px;
}






/* Image de fond  */
body
{
background: url(blue.jpg) fixed ;
}
body
{
	background-size: 100%auto;
}


/*Puces */ 
ul
{
	color:silver;
}
ul
{
	font-weight: bold;
}

ul
{
	list-style: none;
}
li
{
	font-size: medium;
	color: white;
}


/* Police */
@font-face{ 
	font-family: 'Blogger_Sans-Medium-webfont';
	src: url('Blogger_Sans-Medium-webfont.eot');
	src: url('Blogger_Sans-Medium-webfont.eot?iefix') format('eot'),
	     url('Blogger_Sans-Medium-webfont.woff') format('woff'),
	     url('Blogger_Sans-Medium-webfont.ttf') format('truetype'),
	     url('Blogger_Sans-Medium-webfont.svg#webfont') format('svg');
}

/*Conteneur */
#conteneur
{
	display: flex;
	justify-content: space-around;
	margin-top: 100px;
margin-left: 150px;
width: auto;
}

/* Liseret */
aside
{
position: absolute;
Width : 100px;
Height: 100%;
background-image: url(grey.jpg);
margin: -5px;
margin-left: -15px;
margin-top: -20px;
}

/* Test sur PC */
@media all and (max-width: 900px)
{
	aside
	{
		display: none;
	}

    img
    {
    	margin-top: 150px;

    }

	#conteneur
	{
		display: flex;
		flex-direction: column;
        margin-left: none;
        justify-content:none;
    } 

    
    .exp .comp .form
    {
    	text-align: left;
        margin-left: none;
    }
}

<code>

noopy360

15 novembre 2017 à 18:23:45

Salut il y a pas mal de problème dans ton code :

- Ta balise <p> que tu ouvre ligne 45 qui se trouve dans la <div> "exp" tu la referme en dehors

- ligne 40 ta <div> "conteneur" n'est jamais fermer

- L'indentation de ton code est plus que inexistante

dans ton css :

- ligne 41 et 45 tu modifie 2x la balise h2 alors que l'ouvrir que une fois suffit

- idem ligne 60 et 64 pour le <body>

- 3x pour les lignes 71, 75 et 80 pour le <ul>

Du coup ton code est pas agréable à lire du tout...

mais je vais quand même essayer de regarde...

edit : ta solution dans ton code ligne 141 remplace none par 0

Après je dit ça je dit rien mais tu ton code est mal organiser tu devrais dessiner sur une feuille la façon dont tu va organiser tes blocks (même si ça peut paraître idiot mais quand on commence c'est plus simple)

Si tu as d'autre question demande

-
Edité par noopy360 15 novembre 2017 à 18:49:26

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

Lapaczer

15 novembre 2017 à 18:45:43

Je sais qu'il est pas très beau à lire, j'avais du mal au début et je l'avais pas modifié en conséquence :s

Mais je l'ai changé selon tes conseils, voilà ce que j'ai à présent. J'espère que ce sera plus agréable à lire:

HTML:

OCTYPE html>

<html> 

<head>

<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/> 
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
<title> Mon CV </title> 

</head> 


<body> 

<aside>

</aside>

<header>


<h4> <a href="photo.png"><img src="photo_mini.png" class="img" alt="Photo Google"/></a> </h4> 

<h1> <strong>  Santos Alexandre </strong> </h1> <br/> 



<h3> <em> Etudiant et curieux.</em> </h3> <br/>


</header>



<section>


<div id="conteneur">
	<div class="exp"> <h2> Mon expérience </h2>  
	


<p>



<ul> <li> Novembre 2017 : <br/> 
Chargé de renforts, BNP Paribas </li> <br/>
 
<li> Août 2017: <br/>
Auxiliaire de vacances, BNP Paribas </li> <br/>

<li> Décembre 2016: <br/>
Vendeur, Chocolaterie Roy </li> <br/>

</ul>

</p>

</div class="exp">


<p>

<div class="comp"> <h2> Mes compétences </h2> 

<ul>

<li> Pack Office </li> <br/>

<li> Début HTML et CSS</li> <br/> 

</ul>

</p>

</div class="comp">



<p>

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

<ul> 

<li> 2013-2017: <br/>
Université Paris 10 </li> <br/>

<li> 2017-2019: <br/>
Inseec Paris </li> <br/>

</ul>

</p>

</div class="form">





</section>



</body>

</html>

Et CSS:

/*Santos Alexandre */
h1
{
	text-align: center;
	font-family: Blogger_Sans-Medium-webfont;
	color: white;
	
margin-right: -130px;
}

/* Photo CV */
img
{
	float: right;
	width: 125px;
	border: 5px solid black;
margin-left: -150px;
}




/* Etudiant et curieux */ 
em
{
	color:white;
}
h3
{
	text-align: center;
	font-size: large;
	margin-right: 126px;
    margin-right: -130px;
}


/*Sous-parties */
h2
{
	text-decoration: underline;

  {
	color:white;
  }
.comp
  {
	margin-left: -40px;
  }
}






/* Image de fond  */
body
{
    background: url(blue.jpg) fixed ;
	background-size: 100%auto;
}


/*Puces */ 
ul
{
	color:silver;

	font-weight: bold;

	list-style: none;
}

li
{
	font-size: medium;
	color: white;
}


/* Police */
@font-face{ 
	font-family: 'Blogger_Sans-Medium-webfont';
	src: url('Blogger_Sans-Medium-webfont.eot');
	src: url('Blogger_Sans-Medium-webfont.eot?iefix') format('eot'),
	     url('Blogger_Sans-Medium-webfont.woff') format('woff'),
	     url('Blogger_Sans-Medium-webfont.ttf') format('truetype'),
	     url('Blogger_Sans-Medium-webfont.svg#webfont') format('svg');
}

/*Conteneur */
#conteneur
{
	display: flex;
	justify-content: space-around;
	margin-top: 100px;
margin-left: 150px;
width: auto;
}

/* Liseret */
aside
{
position: absolute;
Width : 100px;
Height: 100%;
background-image: url(grey.jpg);
margin: -5px;
margin-left: -15px;
margin-top: -20px;
}

/* Test sur PC */
@media all and (max-width: 900px)
{
	aside
	{
		display: none;
	}

    img
    {
    	margin-top: 150px;

    }

	#conteneur
	{
		display: flex;
		flex-direction: column;
        margin-left: none;
        justify-content:none;
    } 

    
    .exp .comp .form
    {
    	text-align: left;
        margin-left: none;
    }
}

pipelette13

15 novembre 2017 à 18:58:55

Bonjour,

Il y a vraiment plein de choses à revoir, je te conseil de revenir en arrière ans le cours, sinon ça va être difficile par la suite.

Quelques exemple :

Pourquoi mettre ton lien dans un <h4> ?

mettre un <em> dans un <h3>

Et <h1><strong> ???? sérieux

Tes balises servent de description/sémantique du document web, le CSS pour la mise en forme/page.

La tu mets un <em> dans un <h3> juste pour la forme, erreur...

-------------

Dans ton CSS, trop de doublons

/* Etudiant et curieux */
em
{
    color:white;
}
h3
{
    text-align: center;
}
h3
{
    font-size: large;
    margin-right: 126px;
margin-right: -130px;
}
 
 
/*Sous-parties */
h2
{
    text-decoration: underline;
}
h2
{
    color:white;
}

Pour quoi pas simplement :

em , h2
{
    color:white;
}

Ou alors déclarer une classe dans ton HTML pour cette couleur, et l'attribuer aux éléments qui doivent avoir le même comportement. Surtout que l'on peut cumuler plusieurs class (contrairement aux id)

Ex:

<p class="taille__1 color__1 ">
 bla bla bla
</p>

.color__1
{
  color: white;
}

Ne le prends pas mal hein, j'étais comme toi moi aussi, mais il y a un moment ou il faut se remettre en question, tu n'as pas acquis ce qui est expliqué, il faut prendre son temps et revenir en arrière si besoins

-
Edité par pipelette13 15 novembre 2017 à 19:02:33

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean