Habe mir schon zig tutorials angeschaut aber irgendwie begreife ich es nicht ganz
wie bekomme ich es hin das, wenn ich auf einen der links klicke, das div nicht ganz nach oben springt sondern sich (wie gewollt) am anderen div ausrichtet!
Soll genau heißen, die seite ist größer und der Div container ist mittig auf der seite, jetzt soll das ganze konstruckt nicht nach oben springen!
Ich hoffe ich konnte mich einigermaßen klar ausdrücken, bin da schon die ganze nacht dran am rumprobieren!
PHP-Code:
<div class="container w3-row">
<div class="w3-col s3">
<table class="w3-table w3-bordered w3-theme">
<tr>
<th>Pflanze</th>
<th>zu finden in</th>
</tr>
<tr>
<td>Beulengrass</td>
<td><a href="#d1">Uldum</a></td>
</tr>
<tr>
<td></td>
<td><a href="#d2">Sturmwind</a></td>
</tr>
<tr>
<td></td>
<td><a href="#d3">Eisenschmiede</a></td>
</tr>
<tr>
<td></td>
<td><a href="#d4">Darnassus</a></td>
</tr>
</table>
</div>
<div class="w3-col s9">
<div id="d1" class="detailseigen">
<h3>Details zum 1. Eintrag</h3>
</div>
<div id="d2" class="detailseigen">
<img class="imgeigen" src="http://gwow.eu/1/WoWScrnShot_041617_023520.jpg" alt="Bild Uldum">
</div>
<div id="d3" class="detailseigen">
<h3>Details zum 3. Eintrag</h3>
</div>
<div id="d4" class="detailseigen">
<h3>Details zum 4. Eintrag</h3>
</div>
</div>
</div>
PHP-Code:
.detailseigen {
position: relative;
left: 1px;
top: 1px;
padding: 1em 1em .2em;
width: 450px;
max-height: 100%;
/* overflow: auto; */
display: none;
}
.detailseigen:target {
display: block;
}
.imgeigen {
width: 100%;
height: auto;
}
Soll genau heißen, die seite ist größer und der Div container ist mittig auf der seite, jetzt soll das ganze konstruckt nicht nach oben springen!
Ich hoffe ich konnte mich einigermaßen klar ausdrücken, bin da schon die ganze nacht dran am rumprobieren!
Kommentar