IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Problème pour reformater le border par défaut des balises <a>


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de Gizmil
    Profil pro
    Inscrit en
    Août 2007
    Messages
    163
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : Belgique

    Informations forums :
    Inscription : Août 2007
    Messages : 163
    Par défaut Problème pour reformater le border par défaut des balises <a>
    Hello !

    Voilà, j'essaye simplement de placer un border sur des balises <a></a> contenant une <img> mais le résultat n'y est pas ! J'écris mon css de manière à ce que seul le bord droit de mes balises <a> apparaissent. Le truc, c'est qu'au lieu de ça, j'ai des bords sur chaque côté et ils sont mauves ! Je sais que les balises <a> prennent un border mauve par défaut mais comment le modifier ? On dirait que c'est impossible ?

    Du coup, j'essaye de mettre un border plutôt sur l'image contenue dans mes balises <a> mais ça ne marche pas vraiment mieux.

    Mon script actuel :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     
    <div class="en-tete" id="en-tete_travaux"></div>
    <div id="bloc_icones">
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_01" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_allee.gif" alt="Allée" /></a>
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_02" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_aplats.gif" alt="Aplats" /></a>
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_03" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_arriere.gif" alt="Arrière" /></a>
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_04" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_avantg.gif" alt="Avant" /></a>
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_05" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_bords.gif" alt="Bords" /></a>
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_06" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_confusion.gif" alt="Confusion" /></a>
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_07" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_division.gif" alt="Division" /></a>
    	<a href="body.php?a=8&contenu=works_s2_03&work=work_08" alt=""><img src="works_pages/images/section_02/foret/grands_formats/icone_filant.gif" alt="Filant" /></a>
    </div>
    <div id="bloc_images">
    	<img src="
    	<?php
    		switch ($_GET["work"]) {
    			case "work_01" : echo("works_pages/images/section_02/foret/grands_formats/allee.jpg");break;
    			case "work_02" : echo("works_pages/images/section_02/foret/grands_formats/aplats.jpg");break;
    			case "work_03" : echo("works_pages/images/section_02/foret/grands_formats/arriere.jpg");break;
    			case "work_04" : echo("works_pages/images/section_02/foret/grands_formats/avantg.jpg");break;
    			case "work_05" : echo("works_pages/images/section_02/foret/grands_formats/bords.jpg");break;
    			case "work_06" : echo("works_pages/images/section_02/foret/grands_formats/confusion.jpg");break;
    			case "work_07" : echo("works_pages/images/section_02/foret/grands_formats/division.jpg");break;
    			case "work_08" : echo("works_pages/images/section_02/foret/grands_formats/filant.jpg");break;
    		}
    	?>
    	" alt="" />
    </div>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     
    #bloc_icones {
    	margin:10px 10px 0 0;
    }
    #bloc_icones a {
    	float:left;
    	display:block;
    	height:40px;
    	width:40px;
    	border:0;
    }
    #bloc_icones img {
    	border-style:solid;
    	border-color:#f1ede4;
    	border-left:0;
    	border-right:3px;
    	border-top:0;
    	border-bottom:0;
    }
    #bloc_images {
    	clear:both;
    	height:430px;
    	margin-top:34px;
    }
    Et la page concernée (donc, là, les bords des icônes ne sont pas en mauve) :

    http://www.lne-art.be/body.php?a=8&c...3&work=work_07

    Merci d'avance pour votre aide !!

  2. #2
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Bonjour,

    Citation Envoyé par Gizmil Voir le message
    Je sais que les balises <a> prennent un border mauve par défaut mais comment le modifier ? On dirait que c'est impossible ?
    Le border mauve de 2px environ, s'applique par défaut sur les images contenues dans l'élément A.

    Il suffit de surclasser le style par défaut :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    a img { border:0 }

  3. #3
    Membre confirmé Avatar de Gizmil
    Profil pro
    Inscrit en
    Août 2007
    Messages
    163
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : Belgique

    Informations forums :
    Inscription : Août 2007
    Messages : 163
    Par défaut
    Citation Envoyé par Macmillenium Voir le message
    Il suffit de surclasser le style par défaut :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    a img { border:0 }
    Merci pour cette réponse mais je ne comprend pas bien...

    Là, tu appliques un border:0 à <img> ! Ca ne va pas éliminer le border sur <a>, ça, si ?

    EDIT : Ah, ok! C'est l'élément dans <a> qui prend le border, en fait ? Ca voudrait dire qu'il n'est pas possible d'appliquer un border à <a>, même s'il est en display:block ?

  4. #4
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Citation Envoyé par Gizmil Voir le message
    EDIT : Ah, ok! C'est l'élément dans <a> qui prend le border, en fait ?
    Citation Envoyé par Macmillenium Voir le message
    Le border mauve de 2px environ, s'applique par défaut sur les images contenues dans l'élément A.
    Citation Envoyé par Gizmil Voir le message
    Ca voudrait dire qu'il n'est pas possible d'appliquer un border à <a>, même s'il est en display:block ?
    Il faudrait déjà enlever les bordures par défaut sur les images (cf mon code) et appliquer ensuite le border sur A.
    Donc il n y a aucun problème :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    #bloc_icones img {
    	border-color:#f1ede4;
    	border-width:0 3px 0 0;
    	border-style:solid
    }

    ou

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    #bloc_icones img {
    	border:0;
    	border-right:3px solid #f1ede4;
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 26/12/2006, 12h49
  2. Problème pour créer une illumination par dôme de lumière
    Par m-matthieu dans le forum Développement 2D, 3D et Jeux
    Réponses: 1
    Dernier message: 09/11/2006, 13h54
  3. Réponses: 1
    Dernier message: 07/08/2006, 12h04
  4. Problème de format de date par défaut
    Par anitshka dans le forum Langage
    Réponses: 4
    Dernier message: 31/07/2006, 12h22
  5. Focus par défaut des alert() , confirm() et prompt()
    Par NoT dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 20/03/2006, 11h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo