• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Bild und Text im Div

A

Automat_12

Neues Mitglied
Hallo zusammen,

ich habe einen großen div container, dort packe ich meinen Text rein und auch Bilder etc.
Jetz habe ich aber folgenden Fall. Ich mochte neben meinem Text auf der rechten Seite ein Bild haben. Ab besten so, dass das Bild den Text nicht überdeckt. Gleichzeitig ist das Problem, wenn ich die Seite verkleiner, bleibt das Bild nicht wirklich im übergeordneten div.

Wie kann man dieses Problem lösen?
Hat Jemand eine Idee?
 
Werbung:
Hi,
also eine richtige "online" Seite habe ich nicht. Ich habe einfach Testweise mal ein bisschen mit HTML und CSS gearbeitet...

HTML: 
<html>
<head>
<style>
#div001{
            float: left;
            width: 70%;
            padding: 10px;
            height: 100%;
            background-color: blue;
            margin-left: 20px;
}

#bild001 {
height: 200px;
width: 100px;
margin-left: 147px;
}
</style>
</head>
<body>
<div id="div001">
sdafdbvfdvfdv<br>
grzthzjhtzjtjtjztjutjuj<br>

<div id="bild">
<img src="pic.png" alt="pic" id="bild001">
</div>

<div>
</body>
</html>

Grundsätzlich schiebt sich dann auch das bild immer über den text, wenn man das Browserfenster verkleinert.
 
Zuletzt bearbeitet:
Werbung:
Automat_12 schrieb:
Wie kann man dieses Problem lösen?
Hat Jemand eine Idee?
Zum Vergrößern anklicken....
Vor Jahren hätte ich noch ganz pragmatisch empfohlen, für #div001 mittels min-width eine Mindestbreite festzulegen, die garantiert, dass es nicht vollends im Browserfenster zusammengestaucht werden kann, und seine Inhalte sich dann logischerweise überlagern. Unterschreitet die Fensterbreite dieses Maß, blendet der Browser den horizontalen Scrollbalken ein.

Aber wir sind ja mittlerweile in 2017 angekommen - also pack' die float-Eigenschaft in die Mottenkiste, und mach' Dich direkt mit zeitgemäßen (CSS)Techniken vertraut.

Dazu gehört u.a. das CSS3 Flexbox-Modell, das besagte Eigenschaft abgelöst hat, und u.a. auch für responsives Webdesign ausgelegt ist, um die Seite auch auf den kleinen mobilen Geräte ansprechend zu präsentieren, was Deiner erwähnten Problematik beim Skalieren des Browserfensters gleichkommt.

So werden dann mit Hilfe der CSS Media Queries für die unterschiedlichen Monitor-/Displaygrößen sog. "Breakpoints" definiert, die festlegen, wie sich die beiden Elemente zu verhalten haben. Auf dem Smartphone würden sie dann aus Platzmangel untereinander ausgerichtet werden, usw. ....

Studienmaterial (incl. Live-Demos) gibt's hierzu genügend zur Auswahl im Netz.

Hier eine gemischte Liste an deutsch- u. englischsprachigen Quellen:
CSS Media Queries:
Moderation: Thema wird von HTML nach CSS verschoben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben