CSS/HTML Activité 4 : Liseret & Responsive Texte

19 septembre 2018 à 11:32:23

Bonjour à tous,

Je suis bloquée, après des heures de modifications et recherches sur le forum, je me permets d'ouvrir un sujet.

- Faire disparaître le liseret en réduisant la fenêtre de la page : OK

- Faire se déplacer les blocs les un en dessous des autres en réduisant la fenêtre de la page : PAS OK

Je suis vraiment embêtée de ne pas y arriver, je ne vois pas où est le soucis... Voici mon HTML ainsi que mon CSS ci-dessous :

Merci pour votre aide !!

Agathe

<!DOCTYPE html>
<html>
    
<head>
    <meta charset= "utf-8" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" media="screen and (max-width: 1024px)" />
    <meta name="viewport" content="width=device-width" />

    <title>Le CV d'Agathe</title>
</head>    
  	
<body>
	
	<div class="sidebar"></div>
    
    <header>
    	<h1 class="title"> Agathe B </h1>
    	<a class="photo" href="img/originale.jpg"><img src="img/resized.jpg" alt="Photo CV" /> </a>
    	<p class="introduction"> ETUDIANTE EN RECHERCHE D'UN <strong> STAGE DE FIN D'ETUDES </strong> </p>
	</header>	
		
    
    	<div id="conteneur">
    	
    	<section id="experiences">
    		<h2><strong> Mon expérience </strong></h2>
				<ul>
					<li> 2017-2018 : Commercial & Digital Content Intern - Dublin, Irlande </li>
					<li> 2017 : F&B Coordinator Intern - Mellieha, Malte</li>
					<li> 2016 : Business Developper - Paris, France </li>
				</ul>
		</section>
		
		<section id="competences">
			<h2><strong> Mes compétences </strong></h2>
				<ul>
					<li> Anglais C2 </li>
					<li> Photoshop</li>
					<li> SQL </li>
				</ul>
		</section>

		<section id="formation">
			<h2><strong> Ma formation </strong></h2>
			
				<p> ISC Business School </p>		
	
		</section>
    
    </div>

</body>

</html>

CSS :

strong 
{
	color: rgb(151,130,95);
}

@font-face { 
    font-family: 'AbhayaLibre-Regular.ttf';
    src: url('cAbhayaLibre-Regular.ttf');
    src: url('AbhayaLibre-Regular.ttf') format('embedded-opentype'),
         url('AbhayaLibre-Regular.ttf') format('woff'),
         url('AbhayaLibre-Regular.ttf') format('truetype'),
         url('AbhayaLibre-Regular.ttf') format('svg');
}

h2 
{
    font-family: 'AbhayaLibre-Regular.ttf', Arial, serif;
}

h1,.introduction
{
    text-align: center;
}

.photo
{
    text-align: right;
}

.photo
{
    float: right;
    position: fixed;
    left: 92%;
    bottom: 1%;
    top:1%;
}

body
{
    background-image: url("sable1.jpg");
    background-attachment: fixed; 
    background-repeat: no-repeat;
}


.introduction
{
    border-left: 1.5px ridge #c77706;
    border-right: 1.5px ridge #c77706;
    border-top: 1.5px ridge #c77706;
    border-bottom: 1.5px ridge #c77706;
}

.introduction
{
    box-shadow: 6px 6px 6px black;
}


#conteneur
    {
        display: flex;
        margin-left: 10%
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-end;
    }


.sidebar {
    position: fixed;
    left: 1%;
    bottom: 1%;
    top:1%;
    width: 80px;
    height: 80%px;
    background: #c77706;
    border-radius: 5px;
}

#competences
    {
        width: 25%;
        height: 10%;
        word-wrap: break-word;
    }
 
#experiences
    {
        width: 40%;
        height: 50%;
        word-wrap: break-word;
    }
 
#formation
    {
        width: 20%;
        height: 40%;
        word-wrap: break-word;
    }

@media all and (max-width: 1024px)
    { 
    
    .sidebar
    {
    Display: none;
    }
      
    .conteneur /* Declarer l'arrière-plan blanc à changer pour les ecran de petite taille - fonctionne correctement*/
    {
    width: auto;
    margin-right: auto;
    margin-left:auto;
    background-color: white;
    } 
      
    section /* Afficher les sections experiences, formation, competences les une en dessous des autres - Ne fonctionne pas*/
    {
    display: block;
    clear: both; /* LIGNE AJOUTE */
    width: 100%; /* LIGNE AJOUTE */
    }

    }

-
Edité par AgatheBoutard 19 septembre 2018 à 11:33:00

Frogweb

19 septembre 2018 à 11:48:46

Salut,

annule dans les media-queries la propriété avec laquelle tu aligne tes éléments en lui mettant la valeur qu'il faut.

-
Edité par Frogweb 19 septembre 2018 à 11:49:04

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AgatheBoutard

19 septembre 2018 à 11:53:36

Salut @Frogweb,

Merci pour ta réponse. Cependant je ne comprends pas vraiment où tu veux venir.

Peux tu m'expliquer d'une autre manière ?

Merci beaucoup

-
Edité par AgatheBoutard 19 septembre 2018 à 11:53:58

Frogweb

19 septembre 2018 à 11:56:27

Qu'elle est la propriété appliquée à .container qui fait en sorte que ces blocs enfants soient alignés horizontalement ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AgatheBoutard

19 septembre 2018 à 12:00:44

Display peut-être ? ou Width ?

hmm...

EDIT : J'ai également un soucis avec ma photo qui sort du cadre une fois la fenêtre rétrécie... Merci d'avance

-
Edité par AgatheBoutard 19 septembre 2018 à 12:04:17

Frogweb

19 septembre 2018 à 12:05:00

Oui, c'est display:flex. (ça serait bien que tu en sois sûr ^^)

Donc, dans tes media-queries il ne suffit pas de ne pas mettre la propriété display pour que ça revienne à la normale.
Il faut lui changer sa valeur. Quelle est la valeur par défaut du display d'une div ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AgatheBoutard

19 septembre 2018 à 12:16:27

J'apprends encore désolée...

La valeur par défaut c'est block non ?

Frogweb

19 septembre 2018 à 12:18:14

AgatheBoutard a écrit:

J'apprends encore désolée...

La valeur par défaut c'est block non ?

Ne sois pas désolée, tout le monde à commencé un jour.

Oui c'est bien block.
Donc dans tes media-queries tu rajoutes display:block à .container.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AgatheBoutard

19 septembre 2018 à 16:56:48

Merci pour ta réponse.

J'ai en effet ajouté la valeur block mais cela ne marche pas...

@media all and (max-width: 1024px)
    { 
    
    .sidebar
    {
    Display: none;
    }
      
    .conteneur /* Declarer l'arrière-plan blanc à changer pour les ecran de petite taille - fonctionne correctement*/
    {
    display: block;
    width: auto;
    margin-right: auto;
    margin-left:auto;
    background-color: white;
    } 
      
    section /* Afficher les sections experiences, formation, competences les une en dessous des autres - Ne fonctionne pas*/
    {
    display: block;
    clear: both; /* LIGNE AJOUTE */
    width: 100%; /* LIGNE AJOUTE */
    }

    }

-
Edité par AgatheBoutard 19 septembre 2018 à 17:04:23

Frogweb

19 septembre 2018 à 17:28:55

Les blocs sont toujours alignés ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

EmmanuelBeziat

19 septembre 2018 à 19:17:02

Salut,

Dans ton CSS normal, tu cibles un ID, et dans tes media queries tu cibles une classe. Décide-toi (en faveur des classes, de préférence).

https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations

-
Edité par EmmanuelBeziat 19 septembre 2018 à 19:17:52

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

AgatheBoutard

20 septembre 2018 à 9:50:31

@rhooManu, Merci c'était en effet le problème ! Les blocs se mettent les uns en dessous des autres, c'est parfait merci!

#Madiv .MaClass il faut absolument que ça rentre!

Le dernier problème auquel je me confronte est le fait que ma photo sort de la fenêtre lorsque je la rétrécie. Une idée ? J'essaie de changer les valeurs mais cela ne marche pas..

merci à vous!

Frogweb

20 septembre 2018 à 11:01:52

Salut,

un width:100% et height:auto sur l'image devrait faire l'affaire.

PS : j'ai bon Manu ? :-°

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AgatheBoutard

20 septembre 2018 à 12:20:12

Dans les media queries ou bien en css normal ? Lorsque je mets ces valeurs en css normal, ma photo ne s'affiche plus à droite du CV

Frogweb

20 septembre 2018 à 12:32:29

Mets un display:block à ton <a> qui contient l'image et donne lui une largeur.

Pas mal de petites choses qui ne vont pas dans code.
Doucement sur les %, surtout sur les margin qui sont à éviter.
Ligne 77 tu as une erreur : 80%px

-
Edité par Frogweb 20 septembre 2018 à 12:34:49

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !