Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème sur la taille des liens.

uniquement sous firefox

Sujet résolu
11 mars 2006 à 15:20:26

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 :
Image utilisateur
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...
  • Partager sur Facebook
  • Partager sur Twitter
11 mars 2006 à 16:00:21

Ton code CSS et XHTML nous aidera a t'aider...
  • Partager sur Facebook
  • Partager sur Twitter
11 mars 2006 à 16:34:51

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);
  backgroundrepeat: repeat–y;
}

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

#corps {
  width: 864px;
  paddingleft: 22px;
}

#menu {
  width: 150px;
  height: 425px;
  background–image: url("images/fond_menu.jpg");
  backgroundrepeat: 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");
  backgroundrepeat: 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");
  backgroundrepeat: no–repeat;
}

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

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

img {
  border: 0;
  margin: 0;
 
}

a {
  margin: 0;
  height: 4px;
}
  • Partager sur Facebook
  • Partager sur Twitter
11 mars 2006 à 16:41:29

A la place d'un :
a
{
height: 4px;
}


Met plutot un :

a
{
fontsize: 1.1em;
}
  • Partager sur Facebook
  • Partager sur Twitter
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!
  • Partager sur Facebook
  • Partager sur Twitter

Problème sur la taille des liens.

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown