Sujet Précédent Sujet Suivant

Peut on écrire dans une marge (html)

Fermé
Insecure_IRL Messages postés 2 Date d'inscription mardi 14 septembre 2021 Statut Membre Dernière intervention 15 septembre 2021 - 14 sept. 2021 à 20:24
Insecure_IRL Messages postés 2 Date d'inscription mardi 14 septembre 2021 Statut Membre Dernière intervention 15 septembre 2021 - 15 sept. 2021 à 17:50
Bonjour,
je suis un débutant en HTML, je me demandais si il était possible d'écrire dans une marge ? j'ai le minimum syndical pour le codage html donc soyez indulgents sur ma présentation c'est a dire je pense que il y aura beaucoup de superflu pour qqun qui est meilleur que moi (fin logique..) merci beaucoup d'avance

code : 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon premier site web</title>
    <link rel="stylesheet" href="Index.css" type="text/css" />
    <h1>Mon premier site internet</h1>
  </head>
  <body>
      <section id="section-type_articles">
      <article class="article-type_1">
        Praesent nec lobortis nunc. Duis placerat ante eget augue placerat
        elementum. Morbi est purus, euismod ac nunc a, tempor placerat diam. In
        scelerisque ipsum vitae metus sagittis euismod. Integer a quam vel urna
        tincidunt consectetur. Pellentesque id risus diam. Etiam bibendum cursus
        arcu, a ullamcorper enim tincidunt et. Mauris blandit facilisis rutrum.
        Nunc sed sagittis odio. Vestibulum sed nulla tempus, sodales turpis sed,
        placerat quam. Vestibulum gravida velit sed nibh maximus semper. Nulla
        ac vestibulum erat. Sed tortor enim, pulvinar vitae interdum at,
        eleifend imperdiet libero. Nulla gravida dui eu leo viverra tempor.
        Fusce in facilisis nisi. Quisque eu condimentum neque, eget finibus
        mauris.
      </article>
      <article class="article-type_2">
        Praesent nec lobortis nunc. Duis placerat ante eget augue placerat
        elementum. Morbi est purus, euismod ac nunc a, tempor placerat diam. In
        scelerisque ipsum vitae metus sagittis euismod. Integer a quam vel urna
        tincidunt consectetur. Pellentesque id risus diam. Etiam bibendum cursus
        arcu, a ullamcorper enim tincidunt et. Mauris blandit facilisis rutrum.
        Nunc sed sagittis odio. Vestibulum sed nulla tempus, sodales turpis sed,
        placerat quam. Vestibulum gravida velit sed nibh maximus semper. Nulla
        ac vestibulum erat. Sed tortor enim, pulvinar vitae interdum at,
        eleifend imperdiet libero. Nulla gravida dui eu leo viverra tempor.
        Fusce in facilisis nisi. Quisque eu condimentum neque, eget finibus
        mauris.
      </article>
      <article class="article-type_3">
        Sed posuere nisl eget justo venenatis, a blandit erat pharetra. Donec
        volutpat tellus eu risus malesuada, at interdum nunc varius. Nunc
        ultrices tortor quis mauris pharetra ullamcorper. Vivamus sed arcu ut ex
        faucibus porttitor. Duis felis nisi, laoreet ac lobortis ac, vehicula a
        felis. Quisque volutpat leo a fringilla vulputate. Vestibulum venenatis
        mollis dapibus. Vestibulum sagittis rhoncus libero non luctus.
      </article>
      <article class="article-type_4">
        Aenean tortor odio, sagittis in consectetur sit amet, pulvinar nec
        justo. Cras a feugiat lectus. Donec eu diam eget mi ornare bibendum sed
        a mauris. Fusce commodo mattis auctor. Duis tellus odio, commodo vitae
        dignissim a, facilisis at libero. Mauris ex nibh, varius at risus eu,
        lacinia scelerisque nibh. Curabitur egestas aliquam ligula, ut tempus
        massa. Sed mattis lacus in risus pulvinar, nec dictum arcu sollicitudin.
        Fusce vel felis turpis.
      </article>
      <article class="article-type_5">
        Quisque sollicitudin leo eu sem congue convallis. Nulla feugiat dictum
        orci in feugiat. Nam quis congue lectus. Orci varius natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Integer ac
        velit nec mauris vestibulum accumsan a sed est. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Nam condimentum eros nisi, eget
        auctor ipsum tristique ut. Vivamus eget tincidunt felis, et varius
        massa. Fusce varius massa id urna vulputate, at varius arcu facilisis.
        Integer mollis ex felis, ut vulputate nisi fringilla et. Pellentesque
        eget egestas ante. Ut eget risus aliquam, dignissim elit at, faucibus
        dolor. Mauris laoreet est augue, nec ullamcorper orci bibendum ut. Duis
        rutrum lectus sed augue eleifend, quis viverra ante porttitor. Proin at
        nibh nec mi iaculis imperdiet. Cras blandit tellus sit amet magna
        maximus, eget ultricies lacus commodo.
      </article>
      <article class="article-type_6">
        Fusce malesuada consequat massa. Maecenas eget consequat ligula, nec
        aliquam diam. Vestibulum nibh nisi, tincidunt id tempor at, aliquet quis
        tellus. In hac habitasse platea dictumst. Ut tempus sit amet felis a
        hendrerit. Mauris dignissim non ante sed porttitor. Praesent non dapibus
        neque, eget ullamcorper purus. Vivamus convallis velit eget lorem
        finibus feugiat. Sed augue arcu, vehicula a posuere at, imperdiet id
        dui. Praesent commodo commodo urna, at rhoncus metus condimentum sit
        amet. Donec ultricies risus quis orci interdum ullamcorper faucibus quis
        tortor.
      </article>
    </section>
  </body>
  <body id="body_left_content">
    <p class="p_marge-content">voici ma page</p>
  </body>
</html>
<code>



fichier css :
<code css>
h1 {
  text-align: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: lightcyan;
}
body {
  border-style: solid;
  line-height: 200%;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 65%;
  margin-left: calc(100% / 3);
}
.article-type_1 {
  background-color: lightgray;
}
.article-type_2 {
  background-color: lightpink;
}
.article-type_3 {
  background-color: lightsalmon;
}
.article-type_4 {
  background-color: lightgoldenrodyellow;
}
.article-type_5 {
  background-color: lightgreen;
}
.article-type_6 {
  background-color: lightskyblue;
}
#section-type_articles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
article {
  display: unset;
  text-align: center;
  flex-basis: 30%;
}
#body_left_content {
}
.p_marge-content {
  display: flex;
}



Configuration: Windows / Chrome 93.0.4577.63
A voir également:

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié le 15 sept. 2021 à 12:35
Bonjour,

Un document html ne doit avoir qu'une et une seule balise body.

Si tu veux afficher le contenu avec deux colonnes, l'utilisation d'une marge n'est pas la bonne solution. Une meilleure solution est d'utiliser flexbox comme tu as pu le faire pour les articles : https://jsfiddle.net/Lqgojpvh/

Bonne journée,
0
Réponse 2 / 2
Insecure_IRL Messages postés 2 Date d'inscription mardi 14 septembre 2021 Statut Membre Dernière intervention 15 septembre 2021
15 sept. 2021 à 17:50
je vais faire ça merci beaucoup
0

Discussions similaires

Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
Comment taper l'arobase sur un pc hp ?
kadem -
Tatopoulosse -

5 réponses
Comment faire le signe au carré ² sur iPhone ?
Chloe0007 -
Jaks- -

5 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses