Guten Tag,
da ich aus Privatgründen jetzt bereits einen Monat kein Internet hatte, ist mein Thema zum Problem bereits im Archiv gelandet, so entschuldige ich mich für dieses "Doppelposting".
Problem: Wie kann ich die Höhe des Bildes beispiel.png auf 15% des Divs #UnterDiv setzten? Egal ob ich die Höhe auf 10% o.ä. ändere, die Größe bleibt bei 100%.
Der Ausgangscode sieht im Moment so aus:
CSS Code:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#wrapper {
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: blue;
}
#MainDiv {
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: red;
}
#UnterDiv {
text-align: center;
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: lime;
}
.imglink {
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: black;
}
.image {
height: 15%;
}
Der HTML Code (Nein, das ist kein sinnloser Div-Müll, da die Divs ausschließlich zum Gruppieren mehrerer Elemente vorhanden sind, hier ist nur das Grundgerüst):
<body>
<div id="wrapper">
<div id="MainDiv">
<div id="UnterDiv">
<a href="beispiel.html" class="imglink">
<img src="beispiel.png" alt="Beispiel" class="image" />
</a>
</div>
</div>
</div>
</body>
Das letzte Statement zum Problem wurde von Beat geschrieben und lautete:
Also sind Sie inline Elemente, die so gross werden, wie die intrinische Grösse des Inhaltes.
Ja, genau das ist mein Problem. Im Beispiel ist zwar der Wrapper exakt 100%, der #MainDiv allerdings nicht mehr! Der UnterDiv dann natürlich auch nicht usw. Wie ist dies lösbar?
Schau dir an, wie hoch dein Wrapper ist.
Derzeit orientiert er sich am Platzbedarf des Inhalts.
Bei mir nicht nachvollziehbar. Der Wrapper deckt die Seite im Moment komplett ab.
Grüße, CL
ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(