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
Retour
Haut