Mettre les Images à l'Intérieur d'un Élément de BOUTON (HTML & CSS)

J'ai un simple bouton (comme illustré ci-dessous) sur lequel j'ai besoin d'afficher deux photos, l'une de chaque côté du texte du bouton. Im battent pour créer le CSS qui va travailler à la fois Firefox et Internet Explorer! (le bouton images sont à venir à partir d'un JQuery UI peau fichier)

CSS

button div{
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_d19405_256x240.png);      
}

button div.leftImage{
    background-position: -96px -112px;
    float: left;
}

button div.rightImage{
    background-position: -64px -16px;
    float: right;
}

HTML

<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>

Aperçu

Firefox

le texte d'alt http://i44.tinypic.com/auh7v7.jpg

Internet Explorer 8

le texte d'alt http://i39.tinypic.com/16234g1.jpg

Vos classes dans le code html sont différentes pour les CSS...
décrire le réel problème un peu .. ce qui se passe différemment entre les navigateurs ?
Je dis juste que l'exemple ne fait pas de sens. Vous avez créé "leftimage" et "rightimage" classes dans votre CSS, mais vous êtes à l'aide de "leftpic" et "rightpic" dans votre code html.
Toutes mes excuses, div class noms corrigé
Version(s) de IE?

OriginalL'auteur Jimbo | 2010-04-11

  1. 16

    Ici est de savoir comment le faire

    La Théorie

    Les éléments de bloc (comme DIV), bien qu'affichée dans l'ordre de la création, se positionnent adjacente à l'élément précédent ou, en cas de court de l'espace, sur la ligne suivante. Parce que nous ne voulons pas donner le bouton de largeur (nous voulons le bouton pour être automatiquement ajustée en fonction du contenu du bouton) les éléments de bloc a continué à apparaître sur la ligne suivante (voir IE8 image dans la question ci-dessus). À l'aide de white-space:nowrap forces des éléments en ligne (comme la DURÉE et de l'EM) pour être affiché sur la même ligne, mais il est ignoré par les éléments de bloc, donc la solution ci-dessous.

    CSS

    button{
    margin: 0px;
    padding: 0px;
    font-family:Lucida Sans MS, Tahoma;
    font-size: 12px;
    color: #000; 
    white-space:nowrap;
    width:auto;
    overflow:visible;
    height:28px;
}

button em{
    vertical-align:middle;
    margin:0 2px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_3d3d3d_256x240.png);      
}

button em.leftImage{
    background-position: -96px -112px;
}

button em.rightImage{
    background-position: -64px -16px;
}

    HTML

    <button><em class="leftImage"></em>Button<em class='rightImage'></em></button>

    Le Résultat

    Internet Explorer 6, 7, 8 et Firefox 1.5, 2, 3

    le texte d'alt http://i40.tinypic.com/14d0l86.jpg

    Cela devrait être mis à jour afin de ne pas utiliser le <em> élément de manière incorrecte.

    OriginalL'auteur Jimbo

  2. 2

    Je voudrais utiliser les travées pas les divs pour l'image des conteneurs, puisque vous semblez vous voulez que les images apparaissent en ligne. En utilisant les divs flottants est tout simplement trop complexe.

    En fait, vous pourriez probablement simplifier encore plus les choses par l'application d'une image de fond pour le bouton lui-même, et une pour le bouton-texte durée, et en supprimant les deux autres conteneurs au total.

    Une autre alternative est d'ajouter simplement les images comme les balises img.

    J'ai essayé d'utiliser les éléments SPAN pour les images, mais (intelligemment) Firefox cache tout d'un coup! Très étrange, j'ai l'amour à la haine CSS :'(
    Vous aurez besoin de leur donner quelques comntent (comme un &nbsp;) et/ou de spécifier une absolue largeur/hauteur pour maintenir ouvert. Les éléments vides effondrement.
    Les éléments SPAN avec une largeur et une hauteur de 16px (le même que le DIV utilisé) et avec des &nbsp; encore ne sont pas affichées dans Firefox. J'ai fini par utiliser EM éléments (voir ci-dessous). Les balises IMG ne peuvent pas utiliser le JQuery peau de fichier d'image comme nécessaire pour ces boutons donc je n'ai pas encore essayer de les utiliser, même si je suis sûr que ils souhaitent travailler.

    OriginalL'auteur graphicdivine

  3. 0

    essayez de réinitialiser le bouton css.

    button{
border:none;
background:none;
padding:0;
margin:0;
}

    Et ajouter un espace à l'intérieur d'un DIV vide voir si cela fonctionne.

    <button><div class="leftPic">&nbsp;</div><span>Button Text</span><div class="rightPic">&nbsp;</div></button>

    OriginalL'auteur keithics

  4. 0

    Je pense que vous pouvez retirer le bouton de la balise et de l'utilisation d'une balise div à la place.Pour d'autres de l'action du bouton d'utiliser javascript onlick() la fonction et l'utilisation des css pour changer de curseur sur le vol stationnaire(pour la faire ressembler à un bouton).Pour mon projet j'ai utilisé une approche similaire.Cela peut vous aider 🙂

    onlick lol slurp

    OriginalL'auteur Srikanth Muttavarapu

  5. 0

    Je sais que c'est déjà résolu, mais je voulais juste ajouter qu'un moyen facile à mettre plus de 1 image dans un bouton est la création de 1 .png avec les dimensions du bouton que vous souhaitez créer et les éléments dans un fichier.

    OriginalL'auteur kalaxt