Résolu Les paragraphes (<p></p>) "cassent" mon design !

Wiligan

Wiligan

Membre
Inscription
31 Octobre 2011
Messages
1 157
Réactions
161
Points
7 403
RGCoins
25
Salut !

Je recherchais un design simple et facile à faire pour le pas doué que je suis !
J'ai donc suivi ce tuto:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Certes, il est un peu vieillot, mais je l'ai remis un peu à jour en HTML 5 et ça fonctionnait parfaitement ... jusqu'à ce que je crée un paragraphe sur la page !

2426fea8c94d47e59269a101d509d586.png


(j'ai volontairement coupé la première partie de la page car elle contient des infos perso et sera mise en ligne uniquement sur l'intranet du lycée).

Voici le code:
HTML: 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <link rel="StyleSheet" type="text/css" href="CSS/style.css" />

    <title>Projet</title>
  </head>

  <body>
      <header id="header">
      </header>

      <nav id="menu">
          <a href="#">Lien 1</a> | <a href="#">Lien 2</a> | <a href="#">Lien 3</a> | <a href="#">Lien 4</a> | <a href="#">Lien 5</a>
      </nav>

      <section id="corps">
        <article id="article">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>
      </section>

      <footer id="footer">
        test
      </footer>
  </body>
</html>

Et le CSS qui va avec !

Code: 
body
{
   background-color: #cfcfcf;
   margin: auto;
   width: 833px;
}

#header
{
   background-image: url("../design/header.jpg");
   width: 833px;
   height: 322px;
}

#menu
{
   background-image: url("../design/menu.jpg");
   width: 833px;
   height: 73px;
   padding-top: 40px;

   text-align: center;
   font-size: 24px;
}

#menu a
{
   color: white;
   text-decoration: none;
   margin-left: 20px;
   margin-right: 20px;
}

#menu a:hover
{
   text-decoration: underline;
}

#corps
{
   background-image: url("../design/corps.jpg");
   background-repeat: repeat-y;
   width: 833px;
}

#article
{
   width: 700px;
   margin: auto;
}

#footer
{
   background-image: url("../design/footer.jpg");
   width: 833px;
   height: 2px;

   text-align: center;
   padding-top: 46px;
}


Merci de votre aide !
 
Trier par date Trier par votes
En fait si je retire le paragraphe ça donne ça:

c7d1bad75e2149f1bd3ee120f5903f2b.png


Le design reste en un seul bloc (tandis que quand je remet un paragraphe, un titre ou autre, il se coupe au dessus et en dessous du paragraphe).
 
Voter positivement 0 Voter négativement
Sampick69 a dit:
Tu peu nous faire une photo comme tu explique ?
Cliquez pour agrandir...

Mon texte est directement placé dans la balise <article></article>, ça donne ça (tout va bien):
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimage.prntscr.com%2Fimage%2Fc7d1bad75e2149f1bd3ee120f5903f2b.png&hash=156eb7b67722a762061daa443e44964d


Mais si je met le texte dans une balise <p></p> dans cette balise <article></article>, le design est "cassé":
https://reality-gaming.fr/proxy.php?image=http%3A%2F%2Fimage.prntscr.com%2Fimage%2F2426fea8c94d47e59269a101d509d586.png&hash=18c46829e1d17a64b60bc7d5b85ba975

En fait j'aimerais pouvoir mettre des paragraphes dans ma balise <article> sans "casser" le design !
 
Voter positivement 0 Voter négativement
You must be registered for see images attach
You must be registered for see images attach
You must be registered for see images attach
You must be registered for see images attach


(La première image est une mini tranche de 2px, c'est celle qui va remplir dynamiquement le corps !)
(Le gros rectangle noir c'est juste pour masquer l'image du header, pas une énorme faute de goût !)

Merci de ton aide !
 
Voter positivement 0 Voter négativement
Une solution que j'avais utilisé pour éviter ce décalage rajoute :

Ceci

Code: 
&nbsp;
Comme ceci

Code: 
<div id="article">
          &nbsp;
          <p>

Ainsi que
Code: 
</p>
        &nbsp;&nbsp;&nbsp;
        </div>
Au passage utilise une div et non <article> cela ne change rien hormis si tu souhaite utiliser un flux RSS ce que je doute fortement
 
Cette réponse a aidé l'auteur de cette discussion !
Voter positivement 0 Voter négativement
~ TheChypsis ~ a dit:
Une solution que j'avais utilisé pour éviter ce décalage rajoute :

Ceci

Code: 
&nbsp;
Comme ceci

Code: 
<div id="article">
          &nbsp;
          <p>

Ainsi que
Code: 
</p>
        &nbsp;&nbsp;&nbsp;
        </div>
Au passage utilise une div et non <article> cela ne change rien hormis si tu souhaite utiliser un flux RSS ce que je doute fortement
Cliquez pour agrandir...

Merci !

Pourquoi il y en a 3 entre la fin du p et du div ?

Et pour l'article on nous oblige à l'utiliser :/
 
Voter positivement 0 Voter négativement
Parce que j'ai missclick ^^ un seul suffit et puis je dois dire que sa rajoute un petit espace plutôt sympa

Ah ba autant pour moi alors sache que sa change rien.

Si jamais tu as besoin d'aide pour ton projet n'hésite pas à me Mp
 
Voter positivement 0 Voter négativement
~ TheChypsis ~ a dit:
Parce que j'ai missclick ^^ un seul suffit et puis je dois dire que sa rajoute un petit espace plutôt sympa

Ah ba autant pour moi alors sache que sa change rien.

Si jamais tu as besoin d'aide pour ton projet n'hésite pas à me Mp
Cliquez pour agrandir...

Dac' ! Tout fonctionne !
Merci de ton aide !
 
Voter positivement 0 Voter négativement
~ TheChypsis ~ a dit:
Une solution que j'avais utilisé pour éviter ce décalage rajoute :

Ceci

Code: 
&nbsp;
Comme ceci

Code: 
<div id="article">
          &nbsp;
          <p>

Ainsi que
Code: 
</p>
        &nbsp;&nbsp;&nbsp;
        </div>
Au passage utilise une div et non <article> cela ne change rien hormis si tu souhaite utiliser un flux RSS ce que je doute fortement
Cliquez pour agrandir...
ça marche certes mais c'est pas trop esthétique dans le code vaut mieux faire cela dans le css
 
Voter positivement 0 Voter négativement
Retour
Haut