Beiträge von sura

Hallo allerseits,
ich habe vor, einige Bilder in die jeweiligen Akkordions zu platzieren.Die Akkordeons sollen sich jeweils ausfahren, dabei nicht über die anderen verlaufen(was sie im Moment noch tuen) und insgesamt groß genug sein damit man alle Bilder in senkrechter Reihenfolge sehen kann.
Hab mir dieses Akkordeon von wo anders geholt und verstehe es deshalb noch nicht allzu gut.

<div id="bereich6">
<div class="akkordeon">
<a href="#accord1">Zeichnungen</a>
<p id="accord1"><div id="monster"><img src="Bilder/monster.jpg"></div></p>
</div>
</div>

<div id="bereich7">
<div class="akkordeon">
<a href="#accord2">Photoshop</a>
<p id="accord2">Dieser Text ist normalerweise unsichtbar, ...</p>
</div>
</div>

<div id="bereich8">
<div class="akkordeon">
<a href="#accord3">Sonstiges</a>
<p id="accord3">Die Überschrift ist ein Link, der den ihm folgenden Absatz verweist.
Über das Pseudoelement :target wird beim Anspringen eines Absatzes ...
</p>
</div>
</div>

----------------------------
.akkordeon {
width: 100%;
background: rgb(234, 239, 255);
}

.akkordeon > a {
background: rgba(255,255,255,0.50);
color: black;
display: block;
padding: 2%;
text-decoration: none;
font-family: 'Oldenburg', cursive;
font-size:30px;
}

.akkordeon p {

overflow: hidden;
transition: max-height 1s;
padding: 0 0.2em;
margin: 0;
}
.akkordeon p {
max-height: 0;
transition: max-height 1s;
}

.akkordeon p:target {
max-height: 7em;
transition-delay: 0s;
}

#monster{
width:10px;
height:10px;
}

Ich hab mir von einer Seite ein Akkordeon Grundgerüst geholt, auch schon etwas abgeändert und es funktioniert an sich.
Das einzige was nicht klappt ist, dass das Bild (auge.jpg) nicht eingefügt und somit auch nicht angezeigt wird.
Ich bezeichne mich noch als Anfänger und weiß nicht was das Problem hier ist.
Hilfe?Bitte?

<div id="bereich6">
<div class="akkordeon">
<a href="#accord1">Zeichnungen</a>
<p id="accord1"><img href="Bilder/auge.jpg"/>Text</p>
</div>
</div>

<div id="bereich7">
<div class="akkordeon">
<a href="#accord2">Photoshop</a>
<p id="accord2">Dieser Text ist normalerweise unsichtbar, ...</p>
</div>
</div>

<div id="bereich8">
<div class="akkordeon">
<a href="#accord3">Sonstiges</a>
<p id="accord3">Die Überschrift ist ein Link, der den ihm folgenden Absatz verweist.
Über das Pseudoelement :target wird beim Anspringen eines Absatzes ...
</p>
</div>
</div>

und css:

.akkordeon {
width: 100%;
background: rgb(234, 239, 255);
}

.akkordeon > a {
background: rgba(255,255,255,0.50);
color: black;
display: block;
padding: 2%;
text-decoration: none;
font-family: 'Oldenburg', cursive;
font-size:30px;
}

.akkordeon p {
max-height: 100%;
overflow: hidden;
transition: max-height 1s;
padding: 0 0.2em;
margin: 0;
}
.akkordeon p {
max-height: 0;
transition: max-height 1s;
}

.akkordeon p:target {
max-height: 7em;
transition-delay: 0s;
}

#bereich6{
background-color:black;
position:absolute;
top:30%;
left:0%;
width:40%;
height:7%;
}

#bereich7{
background-color:black;
position:absolute;
top:50%;
right:0%;
width:40%;
}

#bereich8{
background-color:black;
position:absolute;
top:70%;
left:0%;
width:40%;
}