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 :

Bordure sur une image background


Sujet :

CSS

  1. #1
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut Bordure sur une image background
    Salut,

    Je vais péter une durite !
    Le problème se situe sur IE PC.
    J'ai un <hr /> avec un style CSS, j'ai placé une image et j'ai une vilaine bordure que je n'arrive pas à enlever, j'ai essayé border:0; et border:none; seul et ensemble mais rien n'y fait.

    Le problème par exemple, sur cette page, il s'agit du petit dégradé bleu avant les commentaires :
    http://www.dimension-internet.com/bl...e-image-en-css

    Le code CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    hr {
    	background: white url(hr.jpg) no-repeat center;
    	height: 17px;
    	border: none;
    	margin-top: 40px;
    }

    A vos claviers !

    EDIT : Il semble ne pas exister de solution propre, comme l'indique cet article en anglais ->http://www.sovavsiti.cz/css/hr.html

    Mais peut-être qu'avec un coup de baguette magique vous allez me trouver une solution

  2. #2
    Membre expérimenté
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Par défaut
    J'utiliserais
    .hr { border: 0pt none ; background: white url('hr.jpg') no-repeat scroll center; height: 17px; margin-top: 40px; }
    avec
    <div class="hr"></div>
    Les marges sont à revoir mais c'est crossbrowser compatible.

  3. #3
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut
    Décidemment...
    Je VEUX un <hr />, je n'utilise pas les <hr /> pour le design mais bien pour faire une séparation structurelle.

    Et pour le moment j'ai fait ceci :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div class="hr"><hr /></div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    div.hr {
        background: url(hr.jpg) no-repeat center;
        height: 17px;
        margin-top: 40px;
    }
    div.hr hr { border:1px solid white; }

    Mais je souhaiterais une solution plus propre avec juste la balise <hr />

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Hello,

    J'avais trouvé le truc à une époque, je ne sais plus comment.

    Il s'avère que tu peux mettre la propriété color à un élément hr et la bordure disparait ..

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    hr {
       background: white url(hr.jpg) no-repeat center;
       height: 17px;
       border: none;
       margin-top: 40px;
       color: #fff;
    }

  5. #5
    Membre expérimenté
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Par défaut
    Le problème, c'est qu'ici ça ne marche pas.
    Je comprends l'intérêt d'une écriture "sémantique", mais hr signifie horizontal rule, pas séparation structurelle du moins comme je le comprends.
    S'il faut une séparation pour les navigateurs texte ou autres, alors
    hr { visibility:hidden;}
    .hr { border: 0pt none ; background: white url('hr.jpg') no-repeat scroll center; height: 17px; margin-top: 40px; }
    avec
    <div class="hr"><hr /></div>
    devrait convenir.

  6. #6
    Membre Expert
    Avatar de kaiser59
    Homme Profil pro
    Inscrit en
    Novembre 2005
    Messages
    1 264
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 1 264
    Par défaut
    Salut,

    j'aimerais bien t'aider mais il est où ton problème ? parce que avec FireFox je voie rien qui cloche par contre avec IE 6 j'ai un trait vertical blanc sur la droite entre ton div#page et ton arrière-plan c'est ça ton problème ?

Discussions similaires

  1. Ecriture d'un titre sur la bordure d'une image, possible ?
    Par userparis dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 13/02/2013, 18h26
  2. bordure sur une image
    Par java250r dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 04/04/2012, 05h26
  3. Bordure sur une Image
    Par Olivier.Ramon dans le forum Débuter avec Java
    Réponses: 1
    Dernier message: 28/03/2012, 17h06
  4. Mettre une bordure sur une image lors d'un click
    Par absot dans le forum jQuery
    Réponses: 3
    Dernier message: 29/02/2012, 18h41
  5. enlever la bordure d'une image sur laquelle il y a un lien
    Par grinder59 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 06/09/2006, 07h31

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