Faire Un Près de l'Image Apparaît Sur le Coin Supérieur Droit D'UNE DIV

Je voulais savoir comment faire pour faire une petite croix (à proximité) de l'image apparaissent en haut à droite à l'intérieur d'un div. En utilisant le CSS et le XHTML. Grâce

Qu'avez-vous essayé jusqu'à présent? N'est DONC pas un "code pour me site." Autant que nous aimons aider, il est préférable si vous pouvez nous donner un a essayé exemple qui a échoué 🙂
lol, je sais, mais je n'ai pas la moindre idée.
Haha! Eh bien, il est un exemple maintenant 🙂
J'ai été comme mettre l'image à l'intérieur d'un div flottant et la droite, avait l'idée de base... :p

InformationsquelleAutor Hirvesh | 2011-02-23

Vous pourriez faire de cette façon: jsfiddle.net/7JEAZ/1317

Extrait de Code:

CSS:

#panel{
    width:100px;
    height:100px;
    background:red;
}
#close{
    display:block;
    float:right;
    width:30px;
    height:29px;
    background:url(https://web.archive.org/web/20110126035650/http://digitalsbykobke.com/images/close.png) no-repeat center center;
}

HTML:

<div id="panel"><a id="close" href="#"></a></div>

c'est tout. Merci pour cette! 🙂

InformationsquelleAutor stecb

En cas son aide, voici un autre exemple avec le bouton fermer dans l'angle supérieur droit de la DIV, le code est un exemple montrant à l'aide de deux tailles différentes divisions et de jQuery pour fermer le div parent de l'image cliquée. Il y a également un lien vers reshow la div.

CSS:

#content{
    border: solid black;   
    width: 70%;
}

#info{
    border: solid red;   
    width: 50%;
}

.close-image{
    display: block;
    float:right;
    position:relative;
    top:-10px;
    right: -10px;
    height: 20px;
}

HTML:

<a href="#" id="toggle-content">Show /Hide content</a>
<br/><br/>
<div id="content">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Content:</u></b><br/>
    This is the info inside the div!
</div>
<br/><br/>
<div id="info">
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" />
    <b><u>Info:</u></b><br/>
    Click the close button to hide this info!
</div>

jQuery:

$(".close-image").click(function() {
    $(this).parent().hide();
});

$("#toggle-content").click(function() {
    $("#content").slideToggle();
});

Un exemple: cliquez ici

ceci est sympa aussi 🙂

InformationsquelleAutor Scoobler

ce simple exemple peut aider. =]

HTML

<div class="thumbnail">
    <img src="http://96pix.com/images/renee-v.jpg" />
    <a href="#" id="close"></a>
</div>

CSS

.thumbnail {
    position: relative;
   width:300px;
   height:300px;
}

.thumbnail img {
    width:100%;
    height:100%;
}

#close {
    display: block;
    position: absolute;
    width:30px;
    height:30px;
    top: 2px;
    right: 2px;
    background: url(http://icons.iconarchive.com/icons/kyo-tux/delikate/512/Close-icon.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Exemple:
http://jsfiddle.net/PPN7Q/26/

InformationsquelleAutor user2282896

Vous devez vous connecter pour publier un commentaire.