[CSS] Mettre une bordure sur un lien en display:block

Marsh Posté le 10-08-2009 à 11:42:05

J'ai fait une barre d'onglet, avec un style différent sur les boutons selon si c'est celui actif.
Et ô désespoir, les bordures n'apparaissent pas.

Pourtant, tout le style bien appliqué au bouton, firebug reconnait bien la classe, et les bordures figurent bien dans la liste de style.
La barre webdeveloper ne m'indique pas d'erreur css.

Mais pour les navigateurs (tous), ya rien, les bordures n'apparaissent pas, alors que tous les autres attributs sont pris en compte !

Ma classe est déclarée ainsi :

.menu_onglet_down
{
display:block;
float:left;
font-size:14px;
background-color:#BDBEB5;
color:#4E4E4E;
border-right:solid #000000 1px;
border-bottom:solid #000000 1px;
padding:5px;
}

Mon code :

Si je remplace les <a> par des <div>, les bordures apparaissent.

On ne peux pas mettre une bordure à un lien en display:block ? Depuis quand ? [:kurt haribo]

Merci :hello:

EDIT : Ah et tiens, une question subsidiaire, pas du tout en rapport : pourquoi liste > div pour un menu ?

Message cité 1 fois
Message édité par Pascal le nain le 11-08-2009 à 10:25:57

Reply

Marsh Posté le 10-08-2009 à 11:42:05

Reply

Marsh Posté le 11-08-2009 à 10:23:06

Pascal le nain a écrit :

Mon code :

Si c'est bien ton code, c'est pas trop étonnant que ça ne marche pas.
Tu utilises un éditeur de texte à coloration syntaxique ? Si non, tu devrais :ange:

Encore un conseil, utilise les balises [ code=php] ou au moins le bouton "code" pour afficher du code, c'est mieux que [ fixed].
Là, tu devrais voir tout de suite ce qui cloche...

Code :

<a href="lolilol.html class="menu_onglet_down">Lien</a>

Pascal le nain a écrit :

EDIT : Ah et tiens, une question subsidiaire, pas du tout en rapport : pourquoi liste > div pour un menu ?

Parce que
Le DIV, c'est pour du DIVers.
Un menu, c'est une liste d'éléments (les liens) qui forment un tout (le menu). Du coup, il est logique (web sémantique) de mettre le menu dans une liste.
Le DIV ne permet pas en lui-même de comprendre que le menu est un bloc logique.

Reply

Marsh Posté le 11-08-2009 à 10:28:05

Nan, l'erreur n'est pas là. J'ai oublié le guillemet en changeant les nom des fichiers pour le mettre sur le forum, mais le code original est correct
J'utilise notepad++, donc ca se voit tout de suite en cas d'erreurs connes.

Une autre suggestion ?

Et merci pour l'explication :hello:

EDIT : Et j'utilise tout le temps les balises "fixed" parce que quand on copie/colle un code qui vient d'une balise "code" pour le tester, on copie/colle aussi les numéros de ligne, et faut les enlever 1 par 1.

Message cité 1 fois
Message édité par Pascal le nain le 11-08-2009 à 10:33:56

Reply

Marsh Posté le 11-08-2009 à 10:43:09

Pascal le nain a écrit :

Nan, l'erreur n'est pas là. J'ai oublié le guillemet en changeant les nom des fichiers pour le mettre sur le forum, mais le code original est correct
J'utilise notepad++, donc ca se voit tout de suite en cas d'erreurs connes.

Une autre suggestion ?

Et merci pour l'explication :hello:

EDIT : Et j'utilise tout le temps les balises "fixed" parce que quand on copie/colle un code qui vient d'une balise "code" pour le tester, on copie/colle aussi les numéros de ligne, et faut les enlever 1 par 1.

Le problème doit venir du reste du code, alors. J'ai fait une page avec juste les liens, et j'ai bien les bordures...

Code :

<!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</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style type="text/css">
.menu_onglet_down
{
 display:block;
 float:left;
 font-size:14px;
 background-color:#BDBEB5;
 color:#4E4E4E;
 border-right:solid #000000 1px;
 border-bottom:solid #000000 1px;
 padding:5px;
}
    //-->
</style>
</head>
<body>
 
<div class="contenu">
<a href="lolilol.html" class="menu_onglet_down">Lien</a>
<a href="lolilol.html" class="menu_onglet_down">Lien</a>
<a href="lolilol.html" class="menu_onglet_down">Lien</a>
</div>
</body>
</html>