Partage
  • Partager sur Facebook
  • Partager sur Twitter

aide pour l exo tp3 html css3

HTML/ CSS

Anonyme
11 octobre 2018 à 11:20:11

Bonjour  malgré que j ai pu vérifier mon code avec les different correcteur  je n arrive toujours pas mettre en colonne horizontale mes 3 paragraphes comme sur le cv de mathieu nebra   sa fai Une semaine que je galere de malade^^  

HTML
<!DOCTYPE html>
<html lang="fr">
    
                     
 
<head>
 
<meta charset="utf-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<title>elias</title>
 
 <style type="text/css">

  
html, body {
    height: 50%;
    margin: 0;
}
  
.sidebar {
   position: fixed;
   float: left;
    width: 90px;
    height: 100%;
    background: grey;
top: 0px;
bottom: 100px}
  
.container1 {
    margin-left: 350px;
    background: white;

 margin-top: 0; }


.container2 {margin-left: 100px

margin-top: 0;
}


         
        </style>
    </head>
    <body>
        

        <div class="sidebar">
           
        

        </div>
      

</body>


				
				 <span style="position: absolute; top: 10px; right: 120px;width: 100px; height: 10px;bottom: 100px"> <img alt="ma photo" src="img/elias.mini.jpg"/>  </span>
				
		
	<body>	
			


      <header>
          
<div class="container1"/>

      <p><h1> EL habchi Elias </h1></p>
</div>
   

    </header>  

		<div class="container2"/>
						


                       <p> <h2> Apprenti Developpeur chez Openclassrooms</h2><p>
				
				
				
		</div>
              
 

                    
            
</p>

       
        <h4> Mon experience </h4>
                        <h4> Avril-Juin 2016: Equipier polyvalent/Animateur de vente en cdi de deux mois chez EAT HAPPY (spécialité japonaise)   </h4>
                        <ul>
                            <li>-Préparation,décongélation et cuisson des différentes pâtes en respectant les standards </li>
                            <li>Préparation des entrées chaudes et froides  </li>
                            <li>Nettoyage et entretien de la cuisine et du matériel (four et chambres froides pour le stock)
 </li>
                            

                            <li>Effectuer la préparation des sushis et divers salades(salade wakame ou salade de choux aux carottes) </li>
                            <li>-Gérer les DLC (date limite de consommation) </li>
                            <li>-Animer divers projets culturels mise à disposition dans les centres commerciales et sortie des transports en commun</li>
                        </ul>
                             


       		

<
        			

                     <p>
                        <h4> mes competences</h4>
						<ul>
							<li>excel, word, </li>
<li>SST : sauveteur-secouriste du travail
HOBO : Habilitation électrique pour personnel non-électricien
Logiciel de comptabilité: Ciel
Logiciels bureautiques: Word / Excel / Powerpoint / Access 
Logiciel de montage vidéo: Adobe Premiere Elements
Logiciel de traitement d'image: Adobe Photoshop
</li>
						</ul>		 
					




			<p>			

    

<h4> Ma formation </h4>
                        <ul>
                            <li>2017/2018 - Formation Agent de Sûreté et de Sécurite Privé (A2SP) à l’ AFPA de Philippe Auguste paris, 75011)</li>
                            <li>2012/2013 - Baccalauréat STG (sciences de la technologie de la gestion) spécialité comptabilité, Lycée Martin Nadaud , 75020)</li>
                            
                        </ul>






                        
					
				
</p>

			


</div>


</body>
CSS
/* Corp de page */

@font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff2') format('woff2'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 body
{
    font-family: 'open_sansregular','verdana','trebuchet';
    background-color: #DCDDDE;
    font-size: 2px;
    padding: 5px;
    height: 100%;
}





section { display: flex;
flex-direction: row-reverse; }
       





.element:nth-child(2) /* On prend le deuxième bloc élément */
{
    background-color: blue;
     /* Seul ce bloc sera aligné à la fin */
}






header
{
    text-align: center;
    border: 2px solid navy;
    margin-bottom: 3px;
font-size: : 1.2em;

}
 

p {
    margin: 50px 0;
    padding: 10px;
    border: 1px solid #999;
]
Résultat de recherche d'images pour "cv mathieu nebra"

-
Edité par Anonyme 11 octobre 2018 à 11:21:41

  • Partager sur Facebook
  • Partager sur Twitter
Delboar
  • HTML / CSS
11 octobre 2018 à 12:16:23

Salut,

C'est Bagdad ton code...

Il te manque un point virgule ici:

.container2 {margin-left: 100px
 
margin-top: 0;
}

Tu fermes la balise body et tu la ré-ouvre, Uh ?

<body>
      
 
        <div class="sidebar">
            
         
 
        </div>
       
 
</body>
 
 
                 
                 <span style="position: absolute; top: 10px; right: 120px;width: 100px; height: 10px;bottom: 100px"> <img alt="ma photo" src="img/elias.mini.jpg"/>  </span>
        </body>

Tu n'as pas besoin (ni le droit) de mettre une <h1> dans un paragraphe (<p></p>) (voir types block et inline).

<p><h1> EL habchi Elias </h1></p>

Tu fermes ton accolade avec un crochet...

p {
    margin: 50px 0;
    padding: 10px;
    border: 1px solid #999;
]

Ton css, tu l'importes où dans ton html ? Nulle part.

En plus une taille de 2px sur le body, Uh ?

body
{
    font-size: 2px;

Bon je m'arrête là, essayes de recommencer ton taff avec cette base.

Le fichier style.css doit être dans le même répertoire que le fichier index.html. Ce n'est pas exactement le même style mais au moins tu auras une base propre.

index.html

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>elias</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <header>
    <img alt="ma photo" src="img/elias.mini.jpg" />
    <h1>EL habchi Elias</h1>
    <p>Apprenti Developpeur chez Openclassrooms</p>
  </header>
  <div class="container">
    <div class="bloc">
      <p> Mon experience </p>
      <ul>
        <li>
          Avril-Juin 2016: Equipier polyvalent/Animateur de vente en cdi de deux mois
          chez EAT HAPPY (spécialité japonaise)
        </li>
        <li>
          Préparation,décongélation et cuisson des différentes pâtes en respectant
          les standards
        </li>
        <li>Préparation des entrées chaudes et froides</li>
        <li>
          Nettoyage et entretien de la cuisine et du matériel (four et chambres froides
          pour le stock)
        </li>
        <li>
          Effectuer la préparation des sushis et divers salades(salade wakame
          ou salade de choux aux carottes)
        </li>
        <li>Gérer les DLC (date limite de consommation)</li>
        <li>
          Animer divers projets culturels mise à disposition dans les centres
          commerciales et sortie des transports en commun
        </li>
      </ul>
    </div>

    <div class="bloc">
      <p> Mon experience </p>
      <ul>
        <li>
          Avril-Juin 2016: Equipier polyvalent/Animateur de vente en cdi de deux mois
          chez EAT HAPPY (spécialité japonaise)
        </li>
        <li>
          Préparation,décongélation et cuisson des différentes pâtes en respectant
          les standards
        </li>
        <li>Préparation des entrées chaudes et froides</li>
        <li>
          Nettoyage et entretien de la cuisine et du matériel (four et chambres froides
          pour le stock)
        </li>
        <li>
          Effectuer la préparation des sushis et divers salades(salade wakame
          ou salade de choux aux carottes)
        </li>
        <li>Gérer les DLC (date limite de consommation)</li>
        <li>
          Animer divers projets culturels mise à disposition dans les centres
          commerciales et sortie des transports en commun
        </li>
      </ul>
    </div>

    <div class="bloc">
      <p> Mon experience </p>
      <ul>
        <li>
          Avril-Juin 2016: Equipier polyvalent/Animateur de vente en cdi de deux mois
          chez EAT HAPPY (spécialité japonaise)
        </li>
        <li>
          Préparation,décongélation et cuisson des différentes pâtes en respectant
          les standards
        </li>
        <li>Préparation des entrées chaudes et froides</li>
        <li>
          Nettoyage et entretien de la cuisine et du matériel (four et chambres froides
          pour le stock)
        </li>
        <li>
          Effectuer la préparation des sushis et divers salades(salade wakame
          ou salade de choux aux carottes)
        </li>
        <li>Gérer les DLC (date limite de consommation)</li>
        <li>
          Animer divers projets culturels mise à disposition dans les centres
          commerciales et sortie des transports en commun
        </li>
      </ul>
    </div>
  </div><!-- container -->

</body>

</html>

style.css

@font-face {
  font-family: 'open_sansregular';
  src: url('OpenSans-Regular-webfont.eot');
  src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('OpenSans-Regular-webfont.woff2') format('woff2'),
       url('OpenSans-Regular-webfont.woff') format('woff'),
       url('OpenSans-Regular-webfont.ttf') format('truetype'),
       url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'open_sansregular', Verdana, Geneva, Tahoma, sans-serif;
  background-color: #DCDDDE;
  padding:0;
}
header {
  text-align:center;
}
header > img {
  float:right;
}
.container {
  width:90%;
  margin:auto;
  display:flex;
  justify-content:space-around;
}
.bloc {
  width:30%;
}
.bloc > p {
  text-align:center;
  font-weight:bold;
}

En espérant que ça t'aideras.

-
Edité par Delboar 11 octobre 2018 à 12:21:06

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
11 octobre 2018 à 22:08:21

j ai suivi ce que ta ecrit  il  ya juste que le liseret ne s affiche pas mais sinon les 3 paragraphes sont aligné  et aussi l image a droite ne s affiche pas  en tt cas merci bcp pour tn aide
  • Partager sur Facebook
  • Partager sur Twitter
Delboar
  • HTML / CSS
12 octobre 2018 à 9:29:33

Je n'ai pas mis de liseret c'est normal. Pour la photo elle doit s'appeller elias.mini.jpg et doit être dans un dossier img qui est se situe au même endroit que l'index.html
  • Partager sur Facebook
  • Partager sur Twitter