Hey, ich bräuchte mal wieder einen kleinen Denkanstoß von euch Habe heute eine kleine Änderung beauftragt bekommen und stehe etwas auf dem Schlauch. Habe hier 3 Div-Container. Ein mal ein Video, ein mal Text (kommt aus ner DB) und eine Google-Maps-Karte. Momentan ist der Aufbau wie folgt:
Der Dazugehörige Quellcode ist (im Kurzen) wie folgt:
[src=html4strict]<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body {
padding-top: 25px;
padding-bottom: 25px;
font-family: Verdana, Geneva, sans-serif;
background-color: #CCC;
}
h3 {
margin: 0px;
padding: 0px;
font-weight: bold;
}
#wrapper {
height: auto;
width: 75%;
margin-right: auto;
margin-left: auto;
padding: 15px;
background-color: #FFF;
min-width: 690px;
}
#player {
width: 49%;
min-width: 400px;
height: 320px;
float: left;
display: block;
margin-right: 2%;
margin-bottom: 2%;
background-color: #E7FEF9;
}
#daten {
width: 49%;
min-width: 400px;
float: left;
height: 320px;
padding-top: 5px;
margin-bottom: 2%;
background-color: #E7FEF9;
}
#map {
width: 49%;
min-width: 400px;
height: 320px;
float: left;
background-color: #E7FEF9;
}
h2 {
font-size: 115%;
font-weight: bold;
}
.desc {
margin-top: 25px;
margin-bottom: 25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="player"> Video </div>
<div id="daten"> Text </div>
<div id="map" style="width: 49%; height: 320px"> Google Karte (Maps Api) </div>
<br style="clear:both">
</div>
</body>
</html>[/src]
Wenn ich die Seite jetzt verkleinere floaten die Elemente ja bei min-width von 400px unter einander. Das Problem ist nun das der Inhalt der Text-Box hinter den Inhalt der Video-Box rutscht. Habe hier am Ende mal ein <br style="clear:both"> eingefügt, hat nichts geholfen. Außerdem bleibt der Wrapper mit seiner 75% Breite ja auch erhalten.
Hat jemand eine Fixe Idee wie ich das elegant lösen könnte? Also das der Text nicht hinter die Video-Box rutscht und sich ggf. der Wapper auch noch auf die neue Breite von 400px (+ die paar Pixel Rahmen) anpasst? Irgendwie komme ich gerade nicht drauf
Gruß godlike
Bzw. Nachtrag: Die Idee war das beim schmalen Viewport von Smartphones die DIV-Boxen untereinander angeordnet werden und 100% des neuen Viewports einnehmen. Die Vorgehensweise ist insofern vielleicht sogar dämlich. Könnte ich das mit speziellen CSS-Styles besser lösen?
Der Dazugehörige Quellcode ist (im Kurzen) wie folgt:
[src=html4strict]<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body {
padding-top: 25px;
padding-bottom: 25px;
font-family: Verdana, Geneva, sans-serif;
background-color: #CCC;
}
h3 {
margin: 0px;
padding: 0px;
font-weight: bold;
}
#wrapper {
height: auto;
width: 75%;
margin-right: auto;
margin-left: auto;
padding: 15px;
background-color: #FFF;
min-width: 690px;
}
#player {
width: 49%;
min-width: 400px;
height: 320px;
float: left;
display: block;
margin-right: 2%;
margin-bottom: 2%;
background-color: #E7FEF9;
}
#daten {
width: 49%;
min-width: 400px;
float: left;
height: 320px;
padding-top: 5px;
margin-bottom: 2%;
background-color: #E7FEF9;
}
#map {
width: 49%;
min-width: 400px;
height: 320px;
float: left;
background-color: #E7FEF9;
}
h2 {
font-size: 115%;
font-weight: bold;
}
.desc {
margin-top: 25px;
margin-bottom: 25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="player"> Video </div>
<div id="daten"> Text </div>
<div id="map" style="width: 49%; height: 320px"> Google Karte (Maps Api) </div>
<br style="clear:both">
</div>
</body>
</html>[/src]
Wenn ich die Seite jetzt verkleinere floaten die Elemente ja bei min-width von 400px unter einander. Das Problem ist nun das der Inhalt der Text-Box hinter den Inhalt der Video-Box rutscht. Habe hier am Ende mal ein <br style="clear:both"> eingefügt, hat nichts geholfen. Außerdem bleibt der Wrapper mit seiner 75% Breite ja auch erhalten.
Hat jemand eine Fixe Idee wie ich das elegant lösen könnte? Also das der Text nicht hinter die Video-Box rutscht und sich ggf. der Wapper auch noch auf die neue Breite von 400px (+ die paar Pixel Rahmen) anpasst? Irgendwie komme ich gerade nicht drauf
Gruß godlike
Bzw. Nachtrag: Die Idee war das beim schmalen Viewport von Smartphones die DIV-Boxen untereinander angeordnet werden und 100% des neuen Viewports einnehmen. Die Vorgehensweise ist insofern vielleicht sogar dämlich. Könnte ich das mit speziellen CSS-Styles besser lösen?