28173 sujets

CSS et mise en forme, CSS3

Ul dans p

Bonjour,

Voilà un truc tout con dont je viens de me rendre compte : mettre une liste dans un paragraphe c'est impossible ..
voilà mon style :

      p {background: #DDD;}
      ul {background: #F00;}
      p ul {margin-top: 0;background: #600;}

et voilà mon code 
<!-- pour tester --><p>Ang ating pinakamalas na habagat ng himala ay binago ng iyong kasama. Ang pinakabusilak na tinik ng reyna ay itinaksil ng kanyang mga pinakamatipuno na lupa. Para saatin, ang aking pangalan ng kapatid ay itinakda ng bunso. Ngayon pa man, ang pinakamaliwanag na liwanag ng pangamba ay ipinalabas ng iyong pamahalaan.</p>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <!-- ..et voilà une liste dans un paragraphe -->
  <p>Ang ating pinakamalas na habagat ng himala ay binago ng iyong kasama. Ang pinakabusilak na tinik ng reyna ay itinaksil ng kanyang mga pinakamatipuno na lupa. Para saatin, ang aking pangalan ng kapatid ay itinakda ng bunso. Ngayon pa man, ang pinakamaliwanag na liwanag ng pangamba ay ipinalabas ng iyong pamahalaan.
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ul>
  </p>

... le premier paragraphe : ok.
... la première liste : ok , c'est deux là c'etait pour tester.
mais si je veux rattacher une liste à un paragraphe, je pensais mettre ma liste dans mon paragraphe, pour ensuite reduire un peu le margin-top histoire que ma liste ne soit pas trop loin de mon paragraphe :et là ca marche pas.

Pourquoi donc ?

Merci d'avance !
Merci, ... j'm'y attendais dans le sens où effectivmeent le background du paragraphe s'arreteau dessus de la liste qui est pourtant dans le paragraphe dans le code..

Ce que je voulais faire donc c'etait rapprocher certaines listes du paragraphe qui est juste au dessus.
Par exemple si mon texte ressemble à ca:
"Et voici une liste de trucs:
- le premier.
- le second.
- le dernier."

Je devrais assigner une class à ma liste ou vous avez une autre astuce ?
nope .. comme dit sebastien un p ne peut pas contenir d'éléments blocs... du coup 
p ul {background: red;}
p>ul{background:red;}
ne marchent pas ... même si j'assigne la class .myP au paragraphe :
.myP ul{background: red;}
ne marche pas non plus.

Pour l'instant je fais :
<div class="p_li">
    <p>Ang ating pinakamalas na habagat ng himala ay binago ng iyong kasama. Ang pinakabusilak na tinik ng reyna ay itinaksil ng kanyang mga pinakamatipuno na lupa. Para saatin, ang aking pangalan ng kapatid ay itinakda ng bunso. Ngayon pa man, ang pinakamaliwanag na liwanag ng pangamba ay ipinalabas ng iyong pamahalaan.</p>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ul>
  </div>
que je style comme ceci :
.p_li p { margin-bottom: 5px;}
      .p_li ul { margin-top: 5px;background: #600;}

Modifié par dhjapan (22 Jun 2006 - 13:33)
Merci encore de vous pencher sur mon problème Smiley smile
Pour ta méthode nORKy, ca marche mais pas complètement ; en fait le margin-bottom du paragraphe s'applique quand même au dessus de la liste... et si je veux coller ma liste à mon paragraphe je dois utiliser un margin négatif de toutes façons.. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  
  <head>
    <title>
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css" media="all">
      p {background: #DDD;}
      ul {background: #F00;}
      p+ul {margin-top: -10px;background: #600;}
    </style>    
  </head>
  
  <body>
  <p>Ang ating pinakamalas na habagat ng himala ay binago ng iyong kasama. Ang pinakabusilak na tinik ng reyna ay itinaksil ng kanyang mga pinakamatipuno na lupa. Para saatin, ang aking pangalan ng kapatid ay itinakda ng bunso. Ngayon pa man, ang pinakamaliwanag na liwanag ng pangamba ay ipinalabas ng iyong pamahalaan.
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ul>
  </p>
  
  </body>

</html>
biensur p+ul matche UNIQUEMENT ul et donc, si p a une marge, forcement, tu la verras
dommage qu'on ne puisse pas matcher dans l'autre sens.. (un p qui est suivi par un ul)

Faut que tu changes alors des marges par défaut de p
Sujet clos
Aller à