47 votes

Budda avatar

HTML+CSS : la largeur 'a' ne fonctionne pas

Demandé el 16 de Janvier, 2011
Quand la question a-t-elle été
49887 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai le code suivant:

Partie CSS :

 <style type="text/css">
    .menu
    {
        width:200px;
    }

    .menu ul
    {
        list-style-image:none;
        list-style-type:none;
    }

    .menu li
    {
        margin:2px;
    }

    .menu A
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }

    .menu A:link
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
</style>

Partie HTML :

Tout fonctionne bien, mais quand j'ajoute l'élément 'DOCTYPE' au début du document HTML :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

la largeur de l'élément 'a' n'est pas prise en compte.

Question 1 : Pourquoi ?

Question 2 : Comment y remédier ?

Merci beaucoup!

Demandé el 16 de Janvier, 2011 par Budda

Réponses

Trop de publicités?

119voto

BalusC avatar
BalusC Points 498232

Question 1 : Pourquoi ?

Parce que ce n'est par défaut pas un élément de bloc .

Question 2 : Comment y remédier ?

Faites-en un élément de bloc en utilisant display: block; , ou un bloc en ligne avec display: inline-block; .

Répondu el 16 de Janvier, 2011 par BalusC (498232 Points )

9voto

Abudayah avatar
Abudayah Points 1535

faire un bloc pour la balise d'ancrage ajouter display:block dans le style

 .menu a
{
    display:block;
    height:25px;
    width:170px;
    background:url(./images/button-51.png);
    padding:2px 5px ;
}

REMARQUE : ne répétez pas tous les éléments de la .menu a:link . Ajoutez simplement des modifications ou de nouveaux styles. REMARQUE : utilisez toujours des minuscules dans le code html et css

Répondu el 16 de Janvier, 2011 par Abudayah (1535 Points )

3voto

shankhan avatar
shankhan Points 3047

ajouter un bloc d'affichage dans un :

 .menu A
    {
        display: block;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
Répondu el 16 de Janvier, 2011 par shankhan (3047 Points )

3voto

schwechel avatar
schwechel Points 193

Cela a fonctionné pour moi, mais comme je voulais que tous mes liens soient sur la même ligne, j'ai utilisé display: inline-block;

Répondu el 16 de Avril, 2013 par schwechel (193 Points )

2voto

Alec avatar
Alec Points 5339

Un lien est un élément en ligne par défaut ; ajoutez display: block; et il utilisera la largeur définie.

Répondu el 16 de Janvier, 2011 par Alec (5339 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X