css image d'arrière-plan est coupé
J'ai une liste non ordonnée et l'image de fond est coupé lorsque vous essayez de les placer à côté du texte.
J'utilise jquery pour ajouter la classe à la balise d'ancrage pour afficher l'image, et sa fonctionne très bien, le seul problème est que l'image est coupée. J'ai été jouer avec le css, mais n'arrive pas à comprendre comment faire de l'affichage de l'image correctement...il me semble que le < li > est de cacher l'image derrière lui en quelque sorte...puis-je placer l'image en face de la < li > pour qu'il affiche...ou alors j'ai loupé quelque chose d'autre?
Quelqu'un peut m'aider? Merci.
Voici le code HTML:
<ul id="nav>
<li>
<a class="folder_closed">Item 1</a>
<div style="display:none">Content for item 1</div>
</li>
</ul>
Voici le CSS:
ul#nav{
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
#nav > li{
vertical-align: top;
text-align:left;
clear: both;
margin-left:0px;
margin-right:0px;
padding-right:0px;
padding-left:15px;
}
.folder_open{
position:relative;
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
.folder_closed{
position:relative;
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
Pouvez-vous fournir un lien vers un site en ligne afin que nous puissions voir ce qui se passe?
je souhaite...c'est sur localhost et je n'ai pas de développement de la zone qui est en direct.
Essayez de jsbin.com pour des démonstrations en direct.
je souhaite...c'est sur localhost et je n'ai pas de développement de la zone qui est en direct.
Essayez de jsbin.com pour des démonstrations en direct.
OriginalL'auteur Ronedog | 2010-04-16
Vous devez vous connecter pour publier un commentaire.
Cela sonne comme une line-height question---juste pour l'expérimentation, essayez de régler une LI "line-height: 40px;" et de voir si votre image montre complètement...
L'une des choses que je fais dans ce cas j'utilise le positionnement absolu. D'abord pour le configurer, vous devez avoir l'UL et LIs relativement placé:
Puis ajouter un peu de rembourrage sur le côté gauche de la LI:
Dans ce cas, vous êtes à l'aide d'un <A> ancrage w/classe de style. Briser le <A> en deux:
Puis de tourner l'un de la Que dans bloqué affichage:
Comment est-ce?
Eh bien, après d'autres tests je me suis retrouvé avec le même problème. Je viens de remarquer que cette <ul> l'arbre est contenu à l'intérieur d'un <table><tr><td>....Est-il possible que le fait d'être contenue à l'intérieur de la table est à l'origine de ce truc bizarre? Il n'a tout simplement pas de bon sens qu'ils façon dont les choses sont à agir?
Hm, c'est bizarre. Êtes-vous à l'aide d'un doctype Strict? Ou Transitoire? Dans mon expérience, qui fait toute la différence. Une autre chose que vous aurez probablement à faire avec les icônes est de s'assurer que le contenant tous les éléments doivent être en position relative. Cela vaut pour les TD, TR, et la TABLE aussi. J'ai l'habitude de pop ouvrir Firebug et de commencer à modifier les styles en temps réel et d'essayer de faire les choses à exposer correctement. p.s. Désolé je n'ai pas lu jusqu'à aujourd'hui. Je ne me connecte pas sur S. O. tous les jours. 🙂
OriginalL'auteur Amy
Vous devez ajouter
display:block
et certaines dimensions (et peut-être quelques rembourrage pour le faire paraître belle) de votre étiquette pour s'assurer de l'élément sera assez grand pour contenir votre image d'arrière-plan.Vous êtes mieux de transfert de tous le style de votre tag. Ne vous embêtez pas le style de la LI balises à tous (sauf si vous avez besoin de flotteurs).
Si je supprime l'affichage du bloc, puis l'icône est poussé vers le bas correctement...mais bien sûr, le problème d'origine de l'icône se couper.
Si le "FAIT" censé être à côté du dossier?
non, le dossier est censé être à côté de la "RÉALITÉ"...en d'autres mots, la "RÉALITÉ" est poussé à l'endroit où je veux aller, mais le dossier reste jusqu'en haut...plus de débogage m'a aidé à trouver que le dossier est dans le haut de la majeure partie de la <li> et de FAIT est à la base de la majeure partie de la <li>...par l'ombrage du <li> J'ai compris cela...mais pourquoi fait-elle ça? Je pensais que les éléments de bloc juste obtenir poussé vers le bas...c'est seulement le faire dans FF3, ie7 son travail???
Si vous mettez le fond sur l'étiquette (avec le padding à gauche), il devrait toujours être la même ligne que le texte, parce qu'ils sont du MÊME élément. Je ne suis pas sûr de ce que vous êtes en train de faire du mal ici.
OriginalL'auteur Diodeus - James MacFarlane
Il ressemble à ce pourrait être votre fond... si je comprends correctement, à un agrandissement de l'image est en train de disparaître, correct?
Aussi, une bonne pratique, lors de la spécification des images d'arrière-plan, j'ai trouvé, est de définir explicitement la couleur d'arrière-plan transparent.
OriginalL'auteur Armstrongest
ajouter "line-height: ?px;" sur le conteneur de feuille de style
OriginalL'auteur ENSATE