Hallo,
ich hatte eine Website mit folgender Struktur:
<section id="main">
<article>
<h2>Überschrift hier</h2>
<img src="" alt="" />
<p>Text hier</p>
</article>
</section>Dazu der css Code:
#main {
display: block;
width: 96%;
max-width: 980px;
margin: 1.25em auto;
padding: 0em;
}
#main article {
display: inline-block;
width: 65.3%;
background: #FFF;
vertical-align: top;
margin: 0em;
padding: 0em;
text-align: center;
border-radius: 4px;
}Jetzt habe ich mich entschlossen, die Website mit Hilfe von Javascript zu füllen, also Container zu erstellen, in denen der Text ausgetauscht wird.
Die Struktur sieht jetzt so aus:
<section id="main">
<article>
<div id="headBox"></div>
<div id="homeImage"><img src="" alt="" /></div>
<div id="textBox"></div>
</article>
</section>Der neue css Code dazu:
#homeImage img {
max-width: 600px;
box-shadow: 0px 0px 10px -5px #4C4948;
border-radius: 5px;
}
#headBox {
display: block;
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 1.563em;
line-height: 1.0em;
font-weight: 100;
margin: 0em;
padding: 0.9em;
text-align: left;
color: #2F2D2C;
}
#textBox {
display: block;
font-family: 'Helvetica', 'Arial', sans-serif;
line-height: 1.25em;
font-weight: 100;
min-height: 200px;
margin: 0em;
padding: 1.38em;
text-align: justify;
color: #2F2D2C;
}Das Design wurde mit Hilfe von viewport und media screen für mobile gerate optimiert.
Leider rutscht der Text beim verkleinern der Breite immer mal nach unten und bleibt nicht direkt unter dem Bild, wie das in meiner ursprünglichen Version super geklappt hat. Ich habe schon versucht, den Text-Container oben zu positionieren, aber auch mit float habe ich es nicht hinbekommen.
Hier der Link zu meiner Seite und dem vollständigen Quellcode: http://00101010.de
Irgendeine Idee, was ich verändern kann, damit der Text oben bleibt?
Danke
Martin
