[Résolu] Comment réduire les interlignes en css ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] Comment réduire les interlignes en css ?

aragorns

Comment réduire les interlignes en css ?
J'aimerai que quand il y a un retour chariot automatique causé par une trop grande longueur de mon lien de menu, mes interlignes soient paramètrables
Pour l'instant, la distance entre les interlignes de retour chariots sont les mêmes que celles des <li>

Voici un extrès de mon code :

<div id="conteneur_menu">
<div id="gauche">
<div class="menu">
<li><a href="http://www.site.com">Accueil</a></li>
<li><a href="http://www.site.com">Pour qui est-ce ?</a></li>
<li><a href="http://www.site.com">Prise de conscience</a></li>

</div></div></div>

Mes CSS :

.menu {
list-style-type: none;
padding: 15px;
margin-left: 7px;
margin-right: 5px;
margin-top: 50px;
margin-bottom: 20px;

font-family: Times, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 180%;
text-align: center;
}

Merci

Message édité par aragorns le 01-09-2005 à 11:03:28

---------------
Membre d'honneur du CLUB DOROTHEE (abonné à Dorothée magazine depuis 1978). Directeur honnoraire de l'association "Sauvez Bernard Minet" (plus connue sous le nom de Bernard's Mined Club).

Publicité

gatsusat

pourquoi ça : <div id="conteneur_menu">
<div id="gauche">
<div class="menu">
<li><a href="http://www.site.com">Accueil</a></li>
<li><a href="http://www.site.com">Pour qui est-ce ?</a></li>
<li><a href="http://www.site.com">Prise de conscience</a></li>

</div></div></div>

alors que
<ul class="menu">
<li><a href="http://www.site.com">Accueil</a></li>
<li><a href="http://www.site.com">Pour qui est-ce ?</a></li>
<li><a href="http://www.site.com">Prise de conscience</a></li>

</ul>

ca suffit largement

et puis on ne met pas des LI tous seuls sans UL
et pour ton interligne, voit ça avec lineheight

aragorns

Merci pour ta réponse
Le lineheight est malheureusement valable pour toutes les lignes de mon menu
Moi je voudrais réduire l'interligne entre "Prise de" et "conscience"

gatsusat

tu vires ton line-height, et met un display : block; sur le A
et un height sur le A

aragorns

<li><a href="http://www.site.com">Prise de conscience</a></li>
<div> </div> //sur FF je suis obligé de mettre ça sinon les 2 lignes se touchent presques
<li><a href="http://www.site.com">Blablablablablabla</a></li>

a {
text-decoration: none;
display : block;
height: 20px;
}

En effet, avec ton conseil cela marche plutôt bien sous FF par contre sous IE ça ne donne pas un bon résultat :pt1cable:

Mais le height agit sur toutes les lignes du menu quand même

Merci beaucoup de ton aide Gatsusat
:jap:

Message édité par aragorns le 29-08-2005 à 23:50:05

gatsusat

ben tu évite le height
et tu joues avec le padding-top et le padding-bottom pour regler les marges intereieures de chacunes de tes boites

aragorns

a {
text-decoration: none;
display : block;
padding-top: 3px;
padding-bottom: 3px;
}

Nickel sous FF mais très très espacé sous IE

Message édité par aragorns le 29-08-2005 à 23:53:21

gatsusat

ben les margin à 0

aragorns

gatsusat a écrit :

ben les margin à 0

J'ai essayé ça :

a {
text-decoration: none;
display : block;
padding-top: 3px;
padding-bottom: 3px;
margin-top: 0;
margin-bottom: 0;
margin: 0;
}

Mais cela n'a aucun effet sur IE :whistle:

Message édité par aragorns le 30-08-2005 à 10:07:51

aragorns

J'ai bidouillé un peu mais il y a toujours une grande différence entre FF et IE :cry:
Je suis vraiment bloqué là-dessus :??:

.menu {
margin-left: 7px;
margin-right: 5px;
margin-top: 60px;
margin-bottom: 20px;
padding-top: 13px;
padding-bottom: 13px;
font-family: Times, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 10px;
text-align: center;
}

Extrès du code :

<body>

<div id="conteneur">
<div id="bandeau">
</div>

<div id="gauche">
<ul class="menu_cote menu_cote_gauche_special">
<li><a href="http://www.site.com">Accueil</a></li>
<li><a href="http://www.site.com">Pour qui est-ce ?</a></li>
<li><a style="display : block;" href="http://www.site.com.com">Prise de conscience</a></li>
</ul>
</div>

<div id="centre">
TEXTE
</div>
</div>
</body>

Message édité par aragorns le 31-08-2005 à 20:02:41

Publicité

aragorns

Ayé, j'ai trouvé :love: :pt1cable:

Après moulte bidouillage, j'ai améliorer mon code
IE à un réglage par défaut du line-height
Il faut donc modifier ce réglage par défaut, je l'ai mis à 0
Maintenant IE et FF restituent bien la même chose

J'espère que cela servira à quelqu'un de débutant
Si vous avez des critiques à apporter, je suis ouvert à vos conseils :hello:

.menu {
margin-left: 3px;
margin-right: 5px;
margin-top: 55px;
font-family: Times, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

.menu_cote li {
margin-bottom: 10px; /* espace entre les lignes du menu */
line-height: 0px; /* il faut changer les réglages par défaut de IE */
}

.menu_cote li {
margin-bottom: 10px; /* espace entre les lignes du menu */
line-height: 0px;
}

.menu_cote a {
text-decoration: none;
font-weight: bold;
font-style: none;
line-height: 15px; /* espace entre les interlignes (retour chariot automatique)*/
}

A remarquer que je dois jouer entre : margin-bottom de "menu_cote li" et line-height "menu_cote a" pour arriver à faire un réglage satisfaisant.
En effet, le line-height de "menu_cote a" n'agit pas seulement sur les interlignes mais aussi sur les saut de lignes, il suffit donc de corriger en réduisant un peu la valeur du margin-bottom de "menu_cote li"

Encore merci pour tes conseils Gatsusat :jap:
:hello:

Message édité par aragorns le 01-09-2005 à 11:02:55

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu] Comment réduire les interlignes en css ?

Sujets relatifs
[RESOLU] Sessions - Quand variable vide	[RESOLU]XML-Actionscript le retour
[RESOLU]Problème clips dynamiques et assignation...	Reduire
[Résolu]Batch et raccourci clavier	[.net][c++] concat une textbox et une string[resolu] merci haazheel
[Resolu] structure C++ vers structure C	css et modèle font pas bon ménage... [Résolu]
[Java JMF] <résolu> Un player qui passe à null tout seul...	[Résolu][VBA] Form_Load ne se lance pas au chargement
Plus de sujets relatifs à : [Résolu] Comment réduire les interlignes en css ?

Page générée en 0.064 secondes