Supp liseré dans la version mobile + bloc vetical

HELP -Pouvez-vous me dire ce qui ne va pas dans mon code svp ?

26 mars 2017 à 19:52:04

Bonjour à tous !

Voila, je bloque sur l'exo du TP 4, pouvez-vous me dire ce qui cloque dans mon code svp ?

Voici le résumé de l'exo :

"Pour cet exercice, vous allez devoir adapter le CV que vous avez fait jusqu'ici pour qu'il s'affiche verticalement (et non horizontalement) sur les petites résolutions.

Le schéma ci-dessous décrit comment le site doit s'afficher. A gauche, la version "normale" écran large (disons 1024 pixels de large au moins) et à droite la version réduite, plus adaptée à une expérience mobile.

Vous devrez :

Faire disparaître le liseré dans la version mobile
Afficher verticalement les sections expérience, compétences et formation au lieu de les afficher côte à côte horizontalement.

Voici mon code :

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css"  /> <!--pour tout le monde -->
        
    <title> CV morgane </title>
</head>

<body>


<div id="liseret"> </div>
<div id="wrap">
 
 <header>
  <h1><b>Morgane</b></h1>
  <p id="intro">Communication, photographie</p>                         


  <figure> 
   <a href="img/momo lol.jpg">
     <img src="img/momo.jpg" title="Cliquez pour agrandir" alt="cmoi">
   </a> 
  </figure>
 </header> 
 
  
  
  <div id="rubriques">
  
    <section id="experience_professionnelle">
      <article>  
      <h2><b>Expérience professionnelle</b></h2>
        <ul>
           <li><b>Journaliste Web</b></li>
           <li><b>Responsable Communication</b></li>
           <li><b>Chef de projet</b></li>
        </ul>  
        </article>    
    </section> 
    
   
    
    <section id="competence"> 
      <article> 
      <h2><b>Compétences</b></h2> 
        <ul>
           <li><b>Photographie</b></li>
           <li><b>Communication</b> </li>
           <li><b>Rédaction-web</b></li>
           <li><b>HTML5 CSS3</b></li>
        </ul> 
        </article>     
    </section>
    
  
    
    <section id="formation"> 
      <article> 
      <h2><b>Formation</b> </h2> 
        <ul>
           <li><b>2014-2016 :</b> Bachelor Publicité </li>
           <li><b>2012-2014 :</b> Certification en Relations Publiques </li>
           <li><b>2010-2012 :</b> Diplome d'Études Juridiques </li>
        </ul>  
         
       </article>  
    </section>
    
    
  </div>  
    
 </div>   

 
  
</body>
</html>

et le CSS :

@charset "utf-8";
/* CSS Document */


body {
	background: url(img/telechargement.jpg) no-repeat center fixed; background-size:cover;	
	font-family: Arial, serif;
	margin:0; padding:0;
}
#liseret {
	  background-color:mediumspringgreen;
	  width:10%;
	  height:950px;
	  float:left;
	 	  }
	  
#wrap {
	float:left;
	width:90%;
	min-height:900px;
}

header { margin:auto; }
h1 {
	text-align: center;
	font-size:3em;
	color: gold;
}
#intro {
	text-align: center;
	margin-top:-20px;
	font-size:2em;
}
figure { position:absolute;
    right:1%;
	top:0;
	text-align: center;
	margin-bottom: 80px;
}
img {
	float:right;
    border-bottom: 3px black inset;
    border-right: 3px black inset;
    box-shadow: 2px 2px 2px black;
	}

#rubriques { 
margin-top:200px;	
    display:flex;
    justify-content: space-around;
}
section {max-width:20%; }
section h2 {
	color: tomato;
}

section ul, section p {
	font-size:1.2em;
}

@media (min-width: 480px) and (max-width:900px)
{
figure { 
	position:static;
   	text-align: center;
	margin-bottom: 5%;
		}
#section {float: none;}
}

@media all and (max-width: 480px)
/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)
{
	#liseret { display: none; }
}

Sophie29

27 mars 2017 à 11:16:29

Bonjour,

Tu a bien nettoyé ton code depuis la dernière fois, bravo !

Alors le liseret doit dispraitre c'est bien ça ? donc le :

#liseret{
   display:none;
}

doit être ajouté à toutes les tailles d'écrans, pourquoi seulement les orientation portrait ?

Ensuite pour que les rubriques apparaissent en colonnes ajoute un :

#rubriques{
    display:flex;
    flex-direction:column;
}

aux tailles d'écran correspondantes.

Alors qu'est ce que ça donne ?

MorganeBalbo

27 mars 2017 à 19:43:34

Bonjour Sophie, heureuse de te retrouver lol !

Il y a juste une chose, les blocs (expérience, formation, compétences) doivent s'afficher verticalement uniquement sur les petites résolution (mobile) et pas sur les autres. Pour ce qu'il en est du liseret, il doit disparaître uniquement dans la version mobile

J'ai bien changé ces infos mais... les blocs s'affichent verticalement, quelque soit la résolution.

Voici mon CSS changé :

@media (min-width: 480px) and (max-width:900px)
{
figure { 
	position:static;
   	text-align: center;
	margin-bottom: 5%;
		}
#section {float: none;}
}

@media all and (max-width: 480px)
/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)
{
#liseret { 
	display: none; 
		 }

#rubriques { 
margin-top:200px;	
    display:flex;
    flex-direction: column;
    justify-content: space-around;
			}
}

kev27

27 mars 2017 à 23:13:21

Salut tu n'as pas mis les instruction au bonne endroit .

La version mobile c'est @media all and (max-width:480px)

Toi tu as mis sur l'orientation portrait

La fainéantise est un vilain défaut

Sophie29

28 mars 2017 à 9:33:20

Bonjour Kev27,

Je suis d'accord avec toi. T'y est presque MarieJosephineRigaut !