LinkBack URL
About LinkBacks
ZitierenHi J,
ich weiß nicht ob du das ganze irgendwie einfach lösen kannst (also, dass du nicht soviel Divs erstellen musst), aber so geht das auf jeden Fall:
div.bild {height: 85px;}
<div class="bild"><img.....></div>
Hallo,
ich habe das Problem, das ich in ein div ein Bild eingefügt habe und nebenstehend Text umfließen lasse.
der nächste div-bereich liegt jetzt aber unter dem Bild bzw. das Bild lappt über diesen Bereich über. In einem Beitrag Beitrag hier im forum habe ich gelesen, das man das mit display:block lösen kann, bei funktioniert dies nicht.
Ich hoffe, daß ihr mit helfen könnt.
Anbei der Quelltext:
HTML-Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="../../../../css_formate/css_formate.css"> <style type="text/css"> <!-- div.header { display:block; margin-top:10px; padding:2px; border-style:solid; border-width:1px 0px 1px 0px; border-color:#CCCCCC; background:#FF0000; color:#FFFFFF; font-weight:bold; font-size:11px; } div.body { padding:2px; display:block; } --> </style> <title>vorstand</title> </head> <body> <h5>Vorstand der Feuerwehr Wilster</h5> <p>Der Vorstand besteht aus den Führungskräften der Feuerwehr und kümmert sich sowohl um spezielle Fachgebiete der Feuerwehr, als auch um die Leitung, Ausbildung und Gestaltung der Feuerwehr. Vorstandsmitlgieder werden in ihr Amt für 6 Jahre gewählt. Im folgenden wollen wir die Mitglieder des Vorstandes kurz vorstellen.</p> <div class="header">Wehrführer</div> <div class="body"><img src="../../kontakt/images/wf_klein.jpg" style="width:64px; height:85px; float:left; margin-right:4px;" alt="Foto Wehrführer">Björn Kröger<br>seit: 2002<br>Beruf: Energieelektroniker mit Meisterbrief</div> <div class="header">stellvertretender Wehrführer</div> <div class="body">Ralf Theede<br>seit: 2003<br>Beruf: Berufsfeuerwehrmann</div> <div class="header">Gruppenführer Gruppe 1</div> <div class="body">Frank Rademann<br>seit: ?<br>Beruf: Industriemeister</div> <div class="header">Gruppenführer Gruppe 2</div> <div class="body">Roger Wiggers<br>seit: 1999<br>Beruf: Rettungsassistent</div> <div class="header">Gruppenführer Gruppe 3</div> <div class="body">Knut Lohmann<br>seit: 2004<br>Berug: Energieelektroniker</div> <div class="header">Gruppenführer Gruppe 4</div> <div class="body">Jürgen Schröder<br>seit: 2004<br>Beruf: Kassierer Sparkasse</div> <div class="header">Kassenwart</div> <div class="body">Sabine Maaß<br>seit: 2002<br>Beruf: Industriekauffrau</div> <div class="header">Schriftwart</div> <div class="body">Andreas Richeling<br>seit: ?<br>Beruf: selbständiger Kaufmann</div> <div class="header">Gerätewart</div> <div class="body">Dieter Treptow<br>seit: ?<br>Beruf: Kfz-Mechaniker</div> <div class="header">Jugendwart</div> <div class="body"><img src="../../kontakt/images/jw_klein.jpg" style="width:64px; height:85px; float:left; margin-right:4px;" alt="Foto Jugendwart">Jan Auhage<br>seit: 2002<br>Beruf: Mechatroniker</div> </body> </html>
Hi J,
ich weiß nicht ob du das ganze irgendwie einfach lösen kannst (also, dass du nicht soviel Divs erstellen musst), aber so geht das auf jeden Fall:
div.bild {height: 85px;}
<div class="bild"><img.....></div>
moinsen,
ein <br clear="left"> hinter deinem text sollte dir helfen.
Hallo!
Ich kanns mir leider noch nicht so richtig vorstellen, wie es aussehen soll.. Du hast nicht zufällig schon was davon online zum ansehen?
Was mir aber außer der Reihe auffällt, ich würde als Klassennamen nicht ein bereits belegtes Attribut nehmen (body).
So wie ich mir das denke, was du meinst, würde ich folgendes noch machen:
- position:relative;
- in deinen nachfolgenden header-divs musst du dann den float auch wieder aufheben ( clear:left; )
Dann sollte es gehenCode:[...] <!-- div.header { position:relative;display:block; margin-top:10px; padding:2px; border-style:solid; border-width:1px 0px 1px 0px; border-color:#CCCCCC; background:#FF0000; color:#FFFFFF; font-weight:bold; font-size:11px; } div.body { position:relative;padding:2px; display:block; } --> </style> <title>vorstand</title> </head> <body> <h5>Vorstand der Feuerwehr Wilster</h5> <p>Der Vorstand besteht aus den Führungskräften der Feuerwehr und kümmert sich sowohl um spezielle Fachgebiete der Feuerwehr, als auch um die Leitung, Ausbildung und Gestaltung der Feuerwehr. Vorstandsmitlgieder werden in ihr Amt für 6 Jahre gewählt. Im folgenden wollen wir die Mitglieder des Vorstandes kurz vorstellen.</p> <div class="header">Wehrführer</div> <div class="body"><img src="../../kontakt/images/wf_klein.jpg" style="width:64px; height:85px; float:left; margin-right:4px;" alt="Foto Wehrführer">Björn Kröger<br>seit: 2002<br>Beruf: Energieelektroniker mit Meisterbrief</div> <div class="header" style="clear:left;">stellvertretender Wehrführer</div> [...]
Gruss
Quellcode in ein Editor kopieren, als HTm Datei speichern ansehenZitat von Budman
Grundsätzlich richtig, leider zeigt Firefox aber keine Platzhalter für's Bild an.... Deshalb hängt das da etwas von der Optik.Quellcode in ein Editor kopieren, als HTm Datei speichern ansehen
Vielen Dank für die Hilfe, hat alles geklappt.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
