nicht angemeldet
Hallo Matthias,
danke dir für die Zusammenfassungen. Anscheinend sind mir durch unregelmäßige Beschäftigung mit dem Thema einige Lösungen abhanden gekommen. Früher habe ich sehr gerne dieses "blinde Tabellen"-Konstrukt verwendet. Wie mir ausgerechnet die eingangs erwähnte Lösung geblieben ist, kann ich auch nicht sagen.
Nun, fünf Minuten vor deiner Antwort habe ich ja den neuen Ansatz gepostet, der sich auch in deinen Verweisen findet. Allerdings habe ich nun Probleme die Inhalte zu platzieren. Ich bin ziemlich sicher, dass ich um absolute Positionierung nicht herumkomme, auch wenn ich schon einem Ansatz mit float nachging, der recht vielversprechend wirkte, den ich aber dennoch verwerfen musste.
Wie man bereits vermuten konnte, soll in den zentrierten Bereich Inhalt hinein, der über dem Bild liegt, was dazu genutzt wurde, das Seitenverhältnis anzupassen. Auf einer Seite beispielsweise sollen in sechs Spalten abwechselnd ein Bild von oben und unten erscheinen. Dazu habe ich etwas vorbereitet, was es schematisch darstellt.
Sobald die Breite ungefähr 1024 Pixel unterschreitet, legen sich die Spalten übereinander, weil sie mittels margin-left mit Prozentangaben positioniert wurden. Hat da jemand einen Rat?
http://dl.redsquare.de/solving/
Den Quellcode poste ich hier auch einmal:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
[code lang=css]
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#centhelp {
height: 50%;
margin-bottom: -22%;
float: left;
}
#centered {
width: 80%;
margin: 0 auto;
clear: left;
border: 1px solid black;
background-color: red;
}
#navi1,#navi2 {
width: 80%;
margin: 0 auto;
clear: left;
border: 1px solid red;
}
#centered,#navi1,#navi2 {
min-width: 816px;
}
.spalte {
position: absolute;
width: 13.33%; /* 80%/6 */
min-width: 136px; /* 1024 - 204,8 (10% links, 10% rechts)/6 = 136,53... */
border: none;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div id="centhelp"></div>
<div id="navi1">navi</div>
<div id="centered">
<!-- für selbstangelegte area map mit mouseover-highlights einer anderen unterseite
<div style="position: absolute; margin-left: 10.25%; margin-top: 20%; border: 1px solid green; width: 5%; height: 5%;"></div>
//-->
<div style="margin-left: 0%;" class="spalte">
<img src="1x2.jpg" />
<div style="position: absolute; margin-left: 5%; width: 90%; border: 1px solid yellow; color: beige;">B i l d b e s c h r e i b u n g</div>
<img src="1x1.jpg" />
</div>
<div style="margin-left: 13.33%;" class="spalte">
<div style="position: absolute; margin-left: 5%; width: 90%; border: 1px solid yellow; color: beige;">B i l d b e s c h r e i b u n g</div>
<img src="1x1.jpg" />
<img src="1x2.jpg" />
</div>
<div style="margin-left: 26.66%;" class="spalte">
<img src="1x2.jpg" />
<img src="1x1.jpg" />
</div>
<div style="margin-left: 39.99%;" class="spalte">
<img src="1x1.jpg" />
<img src="1x2.jpg" />
</div>
<div style="margin-left: 53.32%;" class="spalte">
<img src="1x2.jpg" />
<img src="1x1.jpg" />
</div>
<div style="margin-left: 66.65%;" class="spalte">
<img src="1x1.jpg" />
<img src="1x2.jpg" />
</div>
<img src="2x1.jpg" />
</div>
<div id="navi2">navi</div>
</body>
</html>
[/code]
Matthias Apsel