Partage

Exercice "Pratiquez"HTML-CSS, Le Globe Trotter

Je suis un globe trotter bloqué !

Anonyme

27 décembre 2016 à 0:34:10

Je viens à vous après des heures de prises de tête sur cet exercice. Il y a différentes étapes à valider. Après avoir placé la balise <nav> et supprimé les puces de la balise <ul>, je dois accoler deux blocs, le header et le menu. Seulement, si visuellement les deux blocs sont bien côte à côte, l’éditeur considère que ce n'est pas bon. Je m'y suis pris à six reprises, mais le résultat reste le même.

http://www.hostingpics.net/viewer.php?id=866895blogtrotter.jpg

Le second problème vient de la mise en place des paragraphes, à 80% de la largeur, en justifié et centré. J'ai beau relire le cours, je n'arrive pas à valider les trois qualités demandées, il y en a toujours une qui fait défaut, j'en deviens zinzin (oui seulement à ce stade de l'apprentissage, au secours!!!!). J'utilise width et text-align mais ça reste obscur.

http://www.hostingpics.net/viewer.php?id=982047codecss.jpg

Je vous remercie d'avance du temps que vous avez pris, au moins à lire mon problème :).

-
Edité par Anonyme 27 décembre 2016 à 0:35:54

AbcAbc6

27 décembre 2016 à 5:56:31

bonjour, merci d'utiliser le bouton code </> pour insérer du code sur le forum.

Pour ton css, car on n'a pas le html correspondant, en aucun cas flex-direction ne prend la valeur inline-block, ça c'est pour le display; voici les valeur possible https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction

Anonyme

27 décembre 2016 à 15:13:25

Bonjour,

Merci d'avoir pris la peine de répondre et de me corriger. J'ai repris le code de zéro et ça marche...presque.

Je ne parviens pas à centrer mes balises <p> tout en justifiant le texte à 80%. La seule fois, où ça a marché visuellement c'est lorsque j'ai ajouté une classe au paragraphe. Mais bien entendu, le correcteur du code n'a pas accepté la démarche. Qu'est-ce que j'ai manqué ? (je continue à me pencher dessus :))

FICHIER HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le blog trotter</title>
    </head>

    <body>
      <div id="topsection">
        <div class="element">
          <header>
            <h1>Le blog trotter</h1>
            <p>Je parcours la planète... et vous la fais découvrir !</p>
          </header>
        </div>
        
        <div class="element">
          <nav>
            <ul id="menu">
             <li><a href="#">Accueil</a></li>
             <li><a href="#">Archives</a></li>
             <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </div>  
      </div>

      <h1>La Chine</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
      
      <h1>L'Espagne</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
        
      <footer>
        <p>Copyright Le Blog Trotter<br />
      </footer>
        
    </body>
</html>

FICHIER CSS

/* Feuille de style */

/*retrait des puces*/
ul{list-style-type: none;}


#topsection  /*caractéristiques du conteneur header et menu*/
{
  display: flex;
  width: 700px;
  height: 120px;
  border: 1px solid teal;
}
.element    /*caractéristiques du header et du menu*/
{
  width: 300px;
  height: 100px;
}

p          /*paragraphes centrés, justifiés à 80% de largeur*/
{
  width: 80%;
  text-align: justify;
  margin: auto;
  padding: auto;
}

-
Edité par Anonyme 27 décembre 2016 à 15:36:48

AbcAbc6

27 décembre 2016 à 16:06:05

bonjour, pourtant tu as bien indiquer tous les paragraphes centrer, justifier et de 80% de largeur du parent.

Deux petite chose, ce ne sont pas des erreurs, mais pas nécessaire le <div> qui entoure le <nav> et le <header>, tu peux indiquer la class sur ces deux éléments directement.

Dans la css ligne 25 inutile, un paragraphe n'a pas de padding par défaut. Et on évite de donner une hauteur directement à un élément, car si le contenu est plus important le design casse; utilise plutôt min-height.

Tom Lefebvre

28 décembre 2016 à 22:07:11

J'ai le meme problème que lui est ce que quelqu'un peux répondre s'il vous plait c'est affreusement gênant d'etre bloqué sans rien pouvoir y faire.

Merci :)

PS: c'est étonnant qu'il n'y ai pas de correction ou meme indice car il y a tellement de possibilité seulement le "bots" n'en n'accepte qu'une donc bon...

-
Edité par Tom Lefebvre 28 décembre 2016 à 22:34:10

djoumadkamel

28 décembre 2016 à 22:57:04

salut

tu peux me faire un simple dessign de ton exercice (un petit dessin) car comme ça il y en a pleine de possibilié de design!

Tom Lefebvre

29 décembre 2016 à 23:25:55

Je voudrai simplement le code pour " Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page" dans le TD Exercice "Pratiquez"HTML-CSS, Le Globe Trotter

Car j'ai essayé un tas de truc :

/* Feuille de style */

/*retrait des puces*/

ul{list-style-type: none;}

#topsection /*caractéristiques du conteneur header et menu*/

{

display: flex;

width: 600px;

height: 120px;

border: 1px solid teal;

}

.element /*caractéristiques du header et du menu*/

{

width: 300px;

height: 100px;

}

p /*paragraphes centrés, justifiés à 80% de largeur*/

{

width: 80%;

text-align: justify;

margin: auto;

}

.global

{

text-align: justify;

margin-left: auto;

margin-right: auto;

width: 600px}

je sais que c'est beaucoup trop mais pourtant tout est centré et il ne valide pas, meme sans en mettre trop j'ai vraiment relu tout les cours et aucun amis à moi ne s'y connais :/

JeffFleurimond

30 décembre 2016 à 0:05:28

Je peux avoir les codes Java ?

Tom Lefebvre

30 décembre 2016 à 11:43:55

C'est un code html après ( l'énoncé en gros ) le voici:

<!DOCTYPE html>

<title>Le blog trotter</title>

</head>

<body>

<h1>Le blog trotter</h1>

<p>Je parcours la planète... et vous la fais découvrir !</p>

</header></div>

<nav>

<li><a href="#">Accueil</a></li>

<li><a href="#">Archives</a></li>

<li><a href="#">Contact</a></li>

</ul></nav>

</div></div>

<h1>La Chine</h1>

<p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

<p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>

<h1>L'Espagne</h1>

<p>Copyright Le Blog Trotter<br />

</footer>

</body></div>

</html>

-
Edité par Tom Lefebvre 30 décembre 2016 à 12:25:48

djoumadkamel

30 décembre 2016 à 22:28:54

tu cherche a obtenir l'image suivente :

le code HTML:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="style.css" />
      <title>Le blog trotter</title>
  </head>
 
  <body class="body">
  <!-- /////////////////////////////////////////////-->
    <div class="header">
      <header>
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
      </header>
      <nav>
          <ul>
             <li><a href="#">Accueil</a></li>
             <li><a href="#">Archives</a></li>
             <li><a href="#">Contact</a></li>
          </ul>
      </nav>
    </div>
      <!-- /////////////////////////////////////////////-->
    <div class="p">
      <h1>La Chine</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
 
      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
       
      <h1>L'Espagne</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
 
      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.<br><br></p>
    </div>
    <footer>
        <p>Copyright Le Blog Trotter<br/></p>
    </footer>
         
  </body>
</html>

et le CSS:

body{
  width:100%;
  
}
.body{
width:80%;
margin: auto;
}
ul{
  list-style-type: none;
}
 .header{
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  width:100%;
  height: 120px;
  margin:auto;
}
 header{
  background-color: teal;
  width:50%;
 }
 header p{
  text-indent: 40px;
 }
 nav{
  width:50%;
  background-color: yellow;
 }
 
  /*paragraphes centrés, justifiés à 80% de largeur*/
.p{}
.p p{
  width: 80%;
  text-align: justify;
  margin:auto;
}
footer{
  background-color: grey;
  padding: 1%;
  width:98%;
  text-align: justify;
  margin-bottom: 10px;
}

Anonyme

1 janvier 2017 à 21:59:58

Eh bien, je suis content de constater que mon problème est partagé et a trouvé de bonnes propositions. Merci djoumadkamel!

Mais j'ai trouvé la solution validée par le correcteur, Tom Lefebvre . Voici comment faire :

C'est très simple (au point que j'ai envie de me trépaner), j'ai juste mis la largeur de mon conteneur à 100% et celle des éléments à 50%. En faisant ça, le correcteur a validé le code.

=== CSS ===

/* Feuille de style */

ul{list-style-type: none;}

#topsection
{
  display: flex;
  border: 1px solid;
  width: 100%;
  height: 120px;
  
}

.element
{
  min-height: 100px;
  min-width: 50%;
  background-color: pink;
}

p
{
  text-align: justify;
  width: 80%;
  margin: auto;
}

Merci à toi aussi AbcAbc6 pour tes conseils sur la clarté du code.

J'ai hâte de vous retrouver sur de nouveaux problèmes ha ha ha !

-
Edité par Anonyme 2 janvier 2017 à 11:54:02

Tom Lefebvre

2 janvier 2017 à 16:22:40

Super ! Merci à vous !

AlexandreGoui

3 mars 2017 à 2:10:17

J'arrive un peu tard mais il suffisait de faire :

ul {list-style-type: none}

#topsection

{

display: flex;

flex-direction: row;

}

{

text-align: justify;

width: 80%;

margin:auto;

}

En espérant que ça va être utile à quelqu'un

francoisdelporte

1 avril 2017 à 20:46:01

A mon tour de devenir foufou avec cette console !

Ca doit être tout bête mais je vois pas le problème ...

Toujours la même consigne.

Voici mon code HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le blog trotter</title>
    </head>

    <body>
      <div id="topsection">
        <div class="Gauche">
        <header>
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
        </header>
        </div>  
      <nav>  
        <div class="Droite">
        <ul id="menu">
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Archives</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        </div>  
      </div>

      <h1>La Chine</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
      
      <h1>L'Espagne</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
        </nav>  
      <footer>
        <p>Copyright Le Blog Trotter<br />
      </footer>
        
    </body>
</html>

Et le CSS

/* Feuille de style */
#menu
{
  list-style-type:none;
}

#topsection
{
  display:flex;
  flex-direction:row;
  border:2px solid;
}  

p
{
  text-align:justify;
  width:80%;
  margin:auto;
}

Voici la réponse du BOT !

C'est la réponse du BOT

En vous remerciant !!

-
Edité par francoisdelporte 1 avril 2017 à 20:57:47

AboubakarHissourou

16 avril 2017 à 16:34:05

/* Feuille de style */
ul {
list-style:none;
}
#topsection /*caractéristiques du conteneur header et menu*/
{
display: flex;
width: 700px;
height: 120px;
border: 1px solid teal;
}
p /*paragraphes centrés, justifiés à 80% de largeur*/
{
text-align: justify;
width: 80%;
margin: auto;
}

Lormelet01

10 mai 2017 à 10:12:14

{

text-align:justify;

width:80%;

margin:auto;

}

Lokito

27 mai 2017 à 6:48:09

AbcAbc6 a écrit:

bonjour, pourtant tu as bien indiquer tous les paragraphes centrer, justifier et de 80% de largeur du parent.

Deux petite chose, ce ne sont pas des erreurs, mais pas nécessaire le <div> qui entoure le <nav> et le <header>, tu peux indiquer la class sur ces deux éléments directement.

Dans la css ligne 25 inutile, un paragraphe n'a pas de padding par défaut. Et on évite de donner une hauteur directement à un élément, car si le contenu est plus important le design casse; utilise plutôt min-height.

sauf que sur les 4 conditions demandées, la première est de placée la balise nav au bon endroit, et si l'on fait <nav class="menu"> </nav> le correcteur nous dit que la balise est mal placée, alors que si on enleve le class de nav, la balise est bien placée. Pourquoi?

-
Edité par Lokito 27 mai 2017 à 6:48:37

DjomanLeonThierryYapi

27 juin 2017 à 20:04:30

Salut, je viens de façon modeste aider a mon tour, bonne chance a tous :

faycal1975

22 août 2017 à 11:02:32

voici ma solutio net je vous assure que ça marche

CSS//

/* Feuille de style */

#menu

{

list-style:none;

}

#topsection, #menu

{

display:flex;

}

{

display: flex;

flex-direction: column;

width: 80%;

text-align:justify;

margin: auto

}

en HTML

il suffit d'ajouter la balise <nav> de cette façon

<nav>

<li><a href="#">Accueil</a></li>

<li><a href="#">Archives</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

CaroleMazars1

3 septembre 2018 à 14:11:32

Merci beaucoup faycal1275!!

Cela faisait un long moment que je cherchais.

Lamecarlate

3 septembre 2018 à 14:28:17

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. Me contacter par MP si besoin.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Exercice "Pratiquez"HTML-CSS, Le Globe Trotter

Je suis un globe trotter bloqué !

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs