Bild auf border?

Maik20

Erfahrenes Mitglied
Hallo,

ich habe folgende CSS Definition für ein div:

Code:
.box {
color: #333;
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 1em;
	border: 1em solid #e3e1cc;
	background-color: #f1f0e1;
	text-align: left;
	z-index:1001;
	overflow: auto;	
}

Es wird dem Grunde nach eine Box mit einem breiten Rahmen dargestellt. Jetzt möchte ich gerne - oben rechts - auf den Rahmen ein Image (X) platzieren.

Allerdings weiß ich nicht wie ich ein Bild auf dem Rahmen platziere. Schreibe ich es mit in das div und richte es rechts am Rand aus ist es ja nicht auf dem Rahmen sondern drin.

Jemand eine Idee?
 
Hi,

außergewöhnliche Konstruktionen erfordern manchmal außergewöhnliche Baumaßnahmen ;-)
HTML:
<div class="box">
     <div class="img">[X]</div>
     <div class="content">content</div>
</div>
CSS:
.box {
        color: #333;
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 1em;
        background: #e3e1cc;
        text-align: left;
        z-index: 1001;
}
.img {
        position: absolute;
        right: 0;
        top: 0;
}
.content {
        background: #f1f0e1;
        height: 100%;
        overflow: auto;
}


mfg Maik
 
Ich hätte es jetzt so gemacht:


HTML:
<style type="text/css">
.box   {
background-color: #f1f0e1;
text-align: left;
padding: 1em;
border: solid 1em #e3e1cc;
position: absolute;
z-index: 1;
top: 200px;
left: 200px;
width: 50%;
height: 50%;
visibility: visible }

.bild {
position:absolute;
top:-15px;
right:-15px;
width:20px;
height:20px;
z-index:2;
background-color:#dd2; }
</style>

HTML:
<DIV class="box">
     <IMG class="bild" SRC="img/bild.jpg" WIDTH="20" HEIGHT="20" BORDER="0">
</DIV>
 
Prinzipiell hätte ich aus dem Stand heraus auch die Element-Positionierung mit negativen Werten vorgeschlagen, blos schau dir mal das Resultat in Verbindung mit der Vorgabe overflow:auto für .box an, die du in deinem Regelblock nicht übernommen hast ;)

mfg Maik
 
Zurück