18041 sujets

Questions générales et questions de débutants

Mise en forme d'une liste...

Salut à tous,

J'ai un petit problème avec la mise en forme d'une liste... Ci-dessous le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {font-family: Arial, Helvetica, sans-serif;}
em {font-style: normal; font-size: 15px; font-weight: bold;}
p {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 12px;}
span {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 11px;}
-->
</style>
</head>
<body>
<ul>
  <li><em>Lorem lipsum </em>
    <p>Nullam egestas, turpis non<br>
    fermentum euismod turpis lorem</p>
    <span>www.lipsum.com</span></li>
</ul>
</body>
</html>


Bref, j'aimerai comprendre pourquoi il y a un espace indésirable entre la dernière ligne du paragraphe et le span... Peut-être que j'utilise pas la bonne méthode !

Bonne après-midi et merci d'avance Smiley biggol
noob59

Edition : chez moi ça apparaît comme ça:
upload/14962-Image1.png
Modifié par noob59 (04 Dec 2007 - 14:39)
Bonjour noob59 (du ch'nord ?)

J'aurai peut-être essayer de modifier les marges internes et externes de la liste plutôt que span (je ne sais d'ailleurs pas si "span" à des marges par défaut ?)
body,td,th {font-family: Arial, Helvetica, sans-serif;}
em {font-style: normal; font-size: 15px; font-weight: bold;}
p {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 12px;}
li {padding: 0 0 0 0; margin: 0 0 0 0; font-size: 11px;}

Me donne :
upload/12813-liste.gif avec un rendu sensiblement identique sous IE et Firefox Smiley cligne
6l20 a écrit :

je ne sais d'ailleurs pas si "span" à des marges par défaut ?

Non, ni span, ni strong, em ou autres images… Smiley cligne


edit: attention toutefois à bien garder en tête que ces "marges par défaut" (qui ne peuvent par ailleurs être que latérales pour un élément "inline") dépendent directement de l'UA. En pratique, il n'y a à ma connaissance aucune différence d'interprétation à ce niveau-là, mais il est toujours bon de garder à l'esprit que ces rendus ne sont pas nécessairement harmonisés.
Modifié par Benjamin D.C. (04 Dec 2007 - 15:49)
6l20 a écrit :
Bonjour noob59 (du ch'nord ?)

Oui du ch'nord Smiley langue

Si je comprends bien, le navigateur par défaut donne une taille de texte à chaque ligne et donc supérieure à 11px, d'où cette différence... c'était un peu con.

Je voulais savoir si ça peut créer des conflits d'avoir un li avec spécifier du 11px alors qu'à l'intérieur j'ai spécifié d'autres tailles de texte pour les éléments.

Benjamin D.C. a écrit :
on, ni span, ni strong, em ou autres images…


Ca veut dire qu'on ne spécifie pas de marges et de padding pour un span ?

Merci beaucoup pour vos réponses rapides et efficaces en tout cas !
:)
noob59 a écrit :

Ca veut dire qu'on ne spécifie pas de marges et de padding pour un span ?

Qui ça "on"? Il n'y en a pas par défaut, mais tu peux tout en fait en spécifier si le besoin s'en fait sentir.
Un peu de lecture Smiley cligne

Avec le très outil de rendu des éléments html conçu par Julien Royer, qui permet d'observer les différences de rendu par défaut... et mieux comprendre certaines divergences d'affichage.

a écrit :
Si je comprends bien, le navigateur par défaut donne...

Il faudra plutôt parler ici des navigateurs, "presque tous" ont leur rendu par défaut ("leur feuille de style propre")

a écrit :
Je voulais savoir si ça peut créer des conflits d'avoir un li avec spécifier du 11px alors qu'à l'intérieur j'ai spécifié d'autres tailles de texte pour les éléments.


Comme le précise Benjamin, rien ne t'empêche de donner du style à ton span et de spécifier la taille du texte spécifique à ce conteneur.
Dans ton exemple, la balise <p> prend bien la taille que tu lui a affectée sans s'occuper des propriétés de la liste Smiley cligne
Pour ne plus avoir cet espace indésirable, il te suffit de deplacer la fermeture de ton paragraphe après l'adresse internet..... Smiley biggrin
avec uniquement la balise span je ne sais pas, mais en faisant un <span class="autre_taille"> et en déclarant un .autre_taille dans le style, ca marche.
Tu auras une taille pour le p et une taille pour le .autre_taille.
Sujet clos
Aller à