[Résolu] Problème sur la taille des liens. - uniquement sous firefox par Keeper - page 1

Bonjour à tous!

je poste ici aujourd'hui pour vous exposer un problème : je suis actuellement en train de réaliser la découpe et proggramation d'un webdesign, mais la taille des liens dans le menu me gène.
en effet, le lien "dépasse" de l'image en haut et en bas.

c'est un peu dur a expliquer, aussi j'ai pris un screenshot :

on voit la taille du lien avec les petits pointillés... et comme vous le voyez ca dépasse au dessus.
C'est très génant car si je clique sur le bas du bouton contact, je me retrouve sur la page mentions légales...
il doit y avoir une propriété CSS pour éviter cela, mais laquelle?
merci de votre aide!

p.s : ce problème est apparu uniquement sous firefox...

les voici :

index.html

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
<body>
<div id="global">
   <div id="header"></div>
   <div id="corps">
   <div id="menu">
   <div id="main_menu">
   <a href="#"><img src="images/main_01.jpg" alt="accueil" /></a><br />
<a href="#"><img src="images/main_02.jpg" alt="partenaires" /></a><br />
<a href="#"><img src="images/main_03.jpg" alt="contact" /></a><br />
<a href="#"><img src="images/main_04.jpg" alt="mentions légales" /></a><br />
<a href="#"><img src="images/main_05.jpg" alt="informations" /></a><br />
<a href="#"><img src="images/main_06.jpg" alt="forum" /></a><br />
   </div>
   <div id="nba_menu">
   <div id="nba_haut"></div>
<a href="#"><img src="images/nba_01.jpg" alt="calendrier" /></a><br />
<a href="#"><img src="images/nba_02.jpg" alt="classement" /></a><br />
<a href="#"><img src="images/nba_03.jpg" alt="statistiques" /></a><br />
<a href="#"><img src="images/nba_04.jpg" alt="joueurs" /></a><br />
<a href="#"><img src="images/nba_05.jpg" alt="equipes" /></a><br />
<a href="#"><img src="images/nba_06.jpg" alt="vidéos" /></a><br />
<a href="#"><img src="images/nba_07.jpg" alt="photos" /></a><br />
<a href="#"><img src="images/nba_08.jpg" alt="wallpapers" /></a><br />
<a href="#"><img src="images/nba_09.jpg" alt="historique" /></a><br />
   </div>
   <div id="rap_menu">
   <div id="rap_haut"></div>
<a href="#"><img src="images/rap_01.jpg" alt="news" /></a><br />
<a href="#"><img src="images/rap_02.jpg" alt="biographies" /></a><br />
<a href="#"><img src="images/rap_03.jpg" alt="albums" /></a><br />
<a href="#"><img src="images/rap_04.jpg" alt="audio" /></a><br />
<a href="#"><img src="images/rap_05.jpg" alt="clips" /></a><br />
<a href="#"><img src="images/rap_06.jpg" alt="photos" /></a><br />
<a href="#"><img src="images/rap_07.jpg" alt="wallpaper" /></a><br />
<a href="#"><img src="images/rap_08.jpg" alt="lyrics" /></a><br />
   </div>
</div>
<div id="texte">
   test test test test test test test test!<br />
   test test test test test test test test!<br />
   test test test test test test test test!<br />
   test test test test test test test test!<br />
   test test test test test test test test!<br />
   test test test test test test test test!<br />
   test test test test test test test test!<br />
   test test test test test test test test!<br />
   test test test test test test test test!<br />
</div>
   </div>
</div>
</body>
</html>

style.css

/* Division id */

body {
width: 864px;
margin: auto;
}

#global {
width: 864px;
background–image: url(images/fond.jpg);
background–repeat: repeat–y;
}

#header {
width: 864px;
height: 232px;
background–image: url("images/header.png");
background–repeat: no–repeat;
}

#corps {
width: 864px;
padding–left: 22px;
}

#menu {
width: 150px;
height: 425px;
background–image: url("images/fond_menu.jpg");
background–repeat: repeat–y;
float: left;
line–height: 10px;
}

#main_menu {
width: 150px;
height: 142px;
text–align: center;
}

#nba_haut {
width: 150px;
height: 29px;
background–image: url("images/nba.jpg");
background–repeat: no–repeat;
}

#nba_menu {
width: 150px;
height: 170px;
text–align: center;
}

#rap_menu {
width: 150px;
height: 114px;
text–align: center;
}

#rap_haut {
width: 150px;
height: 29px;
background–image: url("images/rap.jpg");
background–repeat: no–repeat;
}

#texte {
margin–left: 155px;
min–height: 425px;
}

/* ––––––––––––––––––––––––––––– */
/* balises simples */

img {
border: 0;
margin: 0;

}

a {
margin: 0;
height: 4px;
}

Keeper

11 mars 2006 à 15:20:26

Dokken74

11 mars 2006 à 16:00:21

Ton code CSS et XHTML nous aidera a t'aider...

11 mars 2006 à 16:34:51

11 mars 2006 à 16:41:29

A la place d'un :

a
{
height: 4px;
}

Met plutot un :

a
{
font–size: 1.1em;
}

11 mars 2006 à 17:22:17

Merci!
j'ai essayé ca et ca marche. Après il y avait un autre problème : les images étaient trop écartées. Mais j'ai réussi a remettre bien en faisant un line-height.
merci beaucoup!

Problème sur la taille des liens.

uniquement sous firefox

Problème sur la taille des liens.

Supprimer

Modérer

Signaler le message aux modérateurs