Espace entre ma liste <li>

Résolu/Fermé
amalthee - 5 oct. 2011 à 22:12
 amalthee - 6 oct. 2011 à 07:40
Bonjour, je suis en train de créer un site css, et dans une de mes pages j'ai créé une liste, mais je trouve que c'est un peu lourd et je préfèrerai créer un espace entre les différents éléments pour aérer un peu. Quelques solutions simples. J'ai essayé le   en le mettant comme ceci : derrière "Bob ou Bobby" pour qu'il y ait un espace entre cette ligne et la suivante sans résultat. Quelques petite suggestions ? Merci d'avance.

<title>monhistoire</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body id='id_monhistoire'>
<center><h3>MON HISTOIRE</h3></center><br />
</body>
<table>
<tr><td width=25%><img src="bobherbe.jpg" alt="bobherbe" width="380" height="452"/></td><td width= 45% valign="top"><h4><ul>
<li>Nom : Bob ou Bobby</li>  
<li>Ancien nom : Ghost à cause de la lettre G</li>
<li>Ancienne demeure : Mussidan près de Bergerac</li>
<li>Nouvelle demeure : Le Salvadou à St Vincent de Cosse situé entre Beynac et St Cyprien dans le Périgord</li>
<li>Description : Coton de Tuléar blanc avec du beige aux oreilles
<li>Caractère : l'oeil brillant, bonne santé, jovial, remuant, faisant conneries sur conneries. Gaté
<li>6ème chien dans cette maison après Oopi le setter, Clam le Briard, Vicking le Terre-Neuve, Caviar le Labrador et Eliott le Westie.
</li>
</ul> </td></tr>
<td><img src="bobcarotte.jpg" alt ="bobcarotte" width="380" height="307"/></td><td>cellule4</td></tr>
<td><img src="bob4mois.jpg" alt="bob4mois" width="380" height="444" /></td><td>cellule6</td></tr>
</table>

</html>



A voir également:

4 réponses

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
5 oct. 2011 à 22:48
salut

il suffit de donner une class a <ul> et de mettre un margin-bottom au <li> de cette <ul> seulement !

pour être plus clair un exemple avec de la couleur pour bien voir ;-))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <style type="text/css">
    /*<![CDATA[*/
    div.c1 {
      text-align: center;
    }

    .liste li {
      margin-bottom: 30px;
      background-color: #F03;
    }
    /*]]>*/
    </style>
  </head>
  <body id='id_monhistoire'>
    <div class="c1">
      <h3>
        MON HISTOIRE
      </h3>
    </div>
    <br />
    <table>
      <tr>
        <td width="25%">
          <img src="bobherbe.jpg" alt="bobherbe" width="380" height="452" />
        </td>
        <td width="45%" valign="top">
          <ul class="liste">
            <li>Nom : Bob ou Bobby
            </li>
            <li>Ancien nom : Ghost à cause de la lettre G
            </li>
            <li>Ancienne demeure : Mussidan près de Bergerac
            </li>
            <li>Nouvelle demeure : Le Salvadou à St Vincent de Cosse situé entre Beynac et St Cyprien dans le
            Périgord
            </li>
            <li>Description : Coton de Tuléar blanc avec du beige aux oreilles
            </li>
            <li>Caractère : l'oeil brillant, bonne santé, jovial, remuant, faisant conneries sur conneries. Gaté
            </li>
            <li>6ème chien dans cette maison après Oopi le setter, Clam le Briard, Vicking le Terre-Neuve, Caviar le
            Labrador et Eliott le Westie.
            </li>
          </ul>
        </td>
      </tr>
      <tr>
        <td>
          <img src="bobcarotte.jpg" alt="bobcarotte" width="380" height="307" />
        </td>
        <td>
          cellule4
        </td>
      </tr>
      <tr>
        <td>
          <img src="bob4mois.jpg" alt="bob4mois" width="380" height="444" />
        </td>
        <td>
          cellule6
        </td>
      </tr>
    </table>
  </body>
</html>
0
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
5 oct. 2011 à 23:35
Sinon pour faire plus propre, tu as la propiété
text-indent
en css.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
5 oct. 2011 à 23:41
C'est plus pour faire un alinéa, pas s'il veut un espace au dessus ou en dessous.
0
Merci pour vos réponses. Je vais essayer, puis je vous dis le résultat des courses.
0
Resalut, j'ai fait un copié/collé ton exemple pour mettre sur une autre feuille html et c'est exactement ça ce que je veux faire. Merci. Je vais faire en sorte de combiner avec ce que j'ai commencé dans ma page et ça devrait fonctionner. Merci beaucoup
0