Aller au contenu

comment régler l'interligne avec précision

mejr

Par mejr
dans (X)HTML et CSS

 Partager

Sujets conseillés

mejr

mejr

Posté
Posté

J'aimerai résoudre un problème,

quand je veu régler la hauteur du background et la hauteur d'un texte devant ce background je rencontre baucoup de dificultées pour que la hauteur sur ie et mozilla soit les memes...

J'utilise <p style=" line-height: " mais c'est la cata..

y a t'il une autre possibilitée?

Sebastien

Sebastien

Posté
Posté

Les tenors du CSS me corrigeront le cas échéant, mais je crois qu'il est illusoire de vouloir caler au pixel près un background et des lignes de textes : Un background a une taille fixe en pixel, tandis que la valeur en pixel de l'interligne varie en fonction de la résolution, des polices installées par l'utilisateur et de leur taille...

mejr

mejr

Posté
  • Auteur
Posté

okay enfait ce que jaimerai parvenir à faire, c'est ceci: menu.JPG

une liste de boutons, mais que je puisse changer le texte facilement (dans le code html et pas dans un programe de dessin :wacko: )

xou

xou

Posté
Posté

recherche la différence entre les modeles de boites standards et les modeles de boites microsoft (par exemple sur openweb.eu.org) et tu comprendras ton problème.

Maintenant comme le souligne Seb, dans bien des cas, il est difficile de caler au pixel près... pour tous les navigateurs, il faut savoir adapter le meilleur compromis.

captain_torche

captain_torche

Posté
Posté

Surtout que vu comment c'est géré, je choisirais une toute autre approche :

Une liste non-ordonnée (UL), avec chaque élément (LI) 'looké' avec une image de fond adéquate.

Reste plus qu'à mettre le lien, et à le looker également (:hover) pour qu'il change de couleur au passage de la souris, et le tour est joué !

mejr

mejr

Posté
  • Auteur
Posté
Une liste non-ordonnée (UL), avec chaque élément (LI) 'looké' avec une image de fond adéquate.

J'ai pas tous suivi la...

Sebastien

Sebastien

Posté
Posté

Un menu est finalement une liste de liens. Hors HTML prévoit des balises spécifiques pour les listes, notamment <ul> pour les listes non ordonnées (listes à puces). Chaque élément de la liste est marqué par une balise <li> (list item, ou élément de liste)

Ce qui donne en HTML :

<ul>

<li>Premier lien</li>

<li>Deuxième lien</li>

<li>Troisième lien</li>

</ul>

mejr

mejr

Posté
  • Auteur
Posté

:ohmy: OoOoooOh ça je ne connais absolument pas :)

okay je voi un peu, mais pour aprofondir le sujet, auriez vous un lien ou autre vers de la documentation?

mejr

mejr

Posté
  • Auteur
Posté

aaaaah je pense que je suis sur la bonne voie,

j'ai trouvé ceci:

<head>

<style type="text/css">li {

font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;

font-size: 100%;

color: black;

display: list-item;

list-style-image: url(puce.png);

}</style>

</head>

<body>

<ul>

<li>lien 1</li>

<li>lien 2</li>

<li>lien 3</li>

</ul>

c'est comme cela que tu voulai dire captain_torche?

mejr

mejr

Posté
  • Auteur
Posté

li {

background: url(men1.JPG) no-repeat;

width: 139px;

height: 45px;

display: block;

}

c juste? ou il faut que je rajoute autre chose?

Mais tous les bouton auront la meme image de fond alors? J'ai +- 10 images qui se resemble mais ont des légères différences pour éviter que se soit trop répétitif. (mais si on ne sais pas tampi)

mejr

mejr

Posté
  • Auteur
Posté

Voila je viens d'acoucher mon code mais une question subsiste, comment centrer le text en hauteur?

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE> New Document </TITLE><style>
body{margin: 0px; padding: 0}
ul  {margin: 0px; padding: 0}
a:link { color: #BBBC8E; text-decoration: none;}
a:visited { color: #BBBC8E; text-decoration: none; }
a:hover { color: #DD6900; text-decoration: none; }
li.menu01
{background: url(frame/men1.JPG) no-repeat;
 width: 139px;
 height: 45px;
 display: block;
 text-align: center;
 margin: 0px;
 font: bold 14px Fixdsys;}
</style></HEAD><BODY bgcolor=black>
<ul >
<li  class="menu01"><a href="#" id="current">Total annihilation</a></li>
<li class="menu01"><a href="#">menu</a></li>
<li class="menu01"><a href="#">aquarium</a></li>
<li class="menu01" ><a href="#">photo</a></li>
<li class="menu01"><a href="#">message</a></li>
</ul></BODY></HTML>

slender

slender

Posté
Posté
comment centrer le text en hauteur?

avec des paddings top ou bottom dans le CSS des <li> tout simplement.

slender

mejr

mejr

Posté
  • Auteur
Posté (modifié)

li.menu01

{background: url(frame/men1.JPG) no-repeat;

width: 139px;

height: 45px;

display: block;

text-align: center;

margin: 0px;

font: bold 14px Fixdsys;

padding-top: 10}

dernier%20petit%20prob.JPG

:mellow:

Si quelqun à la solution pour suprimer l'espace sur mozilla (et la fine ligne sur ie aussi) qu'il se manifeste :wacko:

Modifié par majr
slender

slender

Posté
Posté

bonsoir,

Tu peux lire avec bénéfice les deux articles suivants de Pompage. Peut-être que le second lien te permettra de résoudre définitivement ton problème. Il faut être assez rigoureux pour le mettre en oeuvre (calcul des coordonnées graphiques) mais si tu es assez systématique ça devrait aller. :whistling:

Voilà les liens:

sur les listes

sur l'utilisation des sprites

slender

mejr

mejr

Posté
  • Auteur
Posté

Je ne suis pas parvenu à utiliser les sprits pour faire mon menu :( , ce n'est pas simple de l'adapter. J'ai chipoter un peu au code mais pas moyen de faire quelque chose de convenable. Je pense que je vai laisser tomber... :(

Merci quand meme d'avoir tenter de m'aider, vous ete tres sympatique sur ce forum ;)

Dudu

Dudu

Posté
Posté
padding-top: 10}
padding-top: 10px ;)

Ou "em", ou "pt" ou "pc" ou "%" ou ce que tu veux comme unité, mais il faut écrire les unités en CSS.

Certains navigateurs vont faire semblant de n'avoir rien vu et corriger l'erreur, d'autres vont simplement ignorer la ligne tout bêtement. Et ça peut causer des différences d'affichage entre plusieurs navigateurs.

Je n'ai pas vraiment le temps de pouvoir tester ton code, mais pense aussi à supprimer les marges par défaut des navigateurs avec un petit 

* {padding: 0; margin: 0;}

tout en haut de la feuille de style.

Car sans aucune indication de marges, les navigateurs vont prendre celles qu'ils ont par défaut en interne.. et ils n'ont pas tous les mêmes valeurs par défaut pour les marges ;)

Peut-être cela résoudra-t-il ton problème d'espace et de fine ligne :unsure:

PS: ne laisse pas tomber ! Un apprentissage est toujours fastidieux mais ensuite plein de portes s'ouvrent..

mejr

mejr

Posté
  • Auteur
Posté (modifié)

la fine ligne j'ai trouvé d'ou venai l'erreur :)

li.menu01

{background: url(frame/men1.JPG) no-repeat;

width: 139px;

height: 45px; <=== c'est fau :P

display: block;

text-align: center;

margin: 0px;

font: bold 14px Fixdsys;}

Enfait la taille de l'image varie et est plus petite que 45px ( +-40px), ce qui se traduit par un espace parasite

Modifié par majr

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...