Img + p float auf mobil überlappen lassen

mediamat

Erfahrenes Mitglied
Hallo
Ich will folgendes Endergebnis erzeugen:
1. Bild links, rechts fließt Text rum
2. Auf mobil ändert sich ab gewisser Bildschirm-Enge das Verhalten, dann fließt der Text über das Bild drüber das Bild funktioniert dann also wie ein Hintergrundbild.

Geht das? Mit einem Bild um das Text floatet...?
Code:
<div><img></img><p></p></div>
Bislang hab ich was probiert da ist das Bild Background-image eines Div und Text steht in einem 50% Container. Aber das ist Mist da klappt zwar später das überlagern aber vorher floatet es nicht ums Bild sondern ist einfach eine lange 50% Text-Spalte
Code:
<div bg-image>
 <div 50%>leer</div>
 <div 50%>
   <p></p>
 </div>
</div>

Finde das grad voll schwer. Oder hab ich da n Denkfehler?

PS:Und gut browserkompatibel soll es sein...allzu abgefahrene CSS Hacks will ich nicht verwenden.
 
2. Auf mobil ändert sich ab gewisser Bildschirm-Enge das Verhalten, dann fließt der Text über das Bild drüber das Bild funktioniert dann also wie ein Hintergrundbild.

Geht das? Mit einem Bild um das Text floatet...?
Code:
<div><img></img><p></p></div>
Das wäre machbar, indem ab einer gewissen Viewportbreite der Text (hier <p></p>) durch eine absolute Positionierung aus dem normalen Textfluß genommen wird.

Die Abfrage der Viewportbreite erfolgt per Media Queries.

Damit sich die absoluten Startpositionen left:0 und top:0 für den Textbereich aber nicht auf <body> (= Normalfall), sondern auf die Boxenränder von .wrapper beziehen, wird dieses Element relativ positioniert.
HTML:
<!DOCTYPE html>
<html>
  <head>
    <!-- Dieses <meta>-Element sorgt dafür, dass sich die Seite den unterschiedlichen Bildschirmbreiten (Desktop-PC, Laptop, Smartphone, Tablet) anpasst -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ...
  </head>
  <body>
    <div class="wrapper">
      <img src="..." alt="..." />
      <p>...</p>
    </div>
  </body>
</html>
CSS:
.wrapper {
  position:relative;
}
.wrapper img {
  float:left;
  margin-right:10px;
}
.wrapper p {
  margin:0;
}
/* ***
  - Media Queries -
  Die für dieses Beispiel gewählte Maximalbreite ist ein gängiger Wert bei diversen Smartphones.
  Falls sie bei Dir nicht zutrifft, wäre sie entsprechend zu differenzieren.
  Gründe:
  1. Smartphones u. Tablets unterscheiden sich grundsätzlich in ihrer Displaygröße.
  2. Größtenteils existieren von einem Modell (zB iPhone) mehrere Versionen mit unterschiedlichen Auflösungen.
  3. Das gerätetypische Hoch- u. Querformat.
  Für das Handling siehe meine Linkempfehlungen am Ende des Beitrags.
*** */
@media screen and (max-width:360px) {
  .wrapper p {
    position:absolute;
    left:0;
    top:0;
    z-index:2;
  }
}
Bzgl. der Media Queries für mobile Geräte drei empfehlenswerte Links, sofern Dir das noch nicht bekannt ist:
  1. Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren
  2. Media Queries for Standard Devices
  3. Media Queries for Common Device Breakpoints
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Vielen Dank für die Codebeispiele!
Ich probier das mal...MediaQueries hab ich teilweise schonmal bisschen mit zutun gehabt.
 
Zurück