Bilder überlappen Überschriften.

[Wishu]

Ich erstelle ja gerade nen neues design. gerade bin ich bei der frendesseite angekommen und musste was blödes feststellen.
Ich habe das bild mit einem img_left div eingebunden, damit es sich links hält und nich über dem text ist.
doch leider überlappt es dadurch h2 und h3... was könnte ich falsch gemacht haben?
hier mal nen screen: http://www.wishu.de/forum/nichgut.jpg

hier der code, für meine h2:

#content h2 {
padding: 5px 5px 5px 5px;
font-size: 11px;
margin-bottom: 0px;
margin-top: 0px;
color: #EDEDED;
background-color:#222222;
border-top:1px #71706E solid;
border-bottom: 1px #010000 solid;
}

für mein img_left

div.img_left{
float: left; 
margin: 0px 4px 2px 0px;
}

und so hab ichs eingebunden:

<h2>Nat</h2>
         <h3>Wishus Hauptweibchen</h3>
         <div class="contenttext">
         <div class="img_left"><img src="bilder_friends/nat.jpg" alt="Nat" /></div>
Meine Frau halt. Sie ist plüschig, 
Man kann sich Super mit ihr unterhalten. Sie kann unter anderem auch 
super zeichnen. schaut doch einfach mal unter Bilder nach.
         </div>

         <h2>Kara</h2>
         <h3>Wishus 2. Weibchen</h3>

[Peter0308]

AW: Bilder überlappen Überschriften.

Hi,

um den normalen Textfluss nach dem Content deines "Hauptweibchen" wieder herzustellen musst du ein clear:left; vor <h2>Kara</h2> einfügen.

Peter

[Wishu]

AW: Bilder überlappen Überschriften.

wo genau muss ich des denn einfügen?
egal was ich probiere, es kommt erstmal nen riesenabstand nach oben hin

[Peter0308]

AW: Bilder überlappen Überschriften.

Hi,

mach dir im css eine Klasse, z. B. so:

.textfluss {
clear:left;
}

Dann fügst du in deinem Quelltext ein leeres div ein:

<h2>Nat</h2>
         <h3>Wishus Hauptweibchen</h3>
         <div class="contenttext">
         <div class="img_left"><img src="bilder_friends/nat.jpg" alt="Nat" /></div>
Meine Frau halt. Sie ist plüschig, 
Man kann sich Super mit ihr unterhalten. Sie kann unter anderem auch 
super zeichnen. schaut doch einfach mal unter Bilder nach.
         </div>
         <div class="textfluss"></div>

         <h2>Kara</h2>
         <h3>Wishus 2. Weibchen</h3>

Würde auch mit einem <span> funktionieren, dann hast du eine Leerzeile weniger.

Peter

Edit:
Wieder entfernt ... hab falsch geguckt ...

[Wishu]

AW: Bilder überlappen Überschriften.

jetzt taucht diese wunderhübsche lücke unten auf... sollte ich es vielleicht einfach mit divs machen? ist es mit h überhaupt semantisch korrekt?

[Peter0308]

AW: Bilder überlappen Überschriften.

Hi,

das mit dem <h> passt schon, vorausgesetzt du hast <h1> schon vorher verwendet, ansonsten wäre es semantisch nicht in Ordnung.
Ersetz mal:

<div class="Textfluss"></div>

mit

<span class="textfluss"></span>

Wenn das nichts hilft, poste mal den gesamten Code oder stell ihn online und gib einen Link.

Peter

[Wishu]

AW: Bilder überlappen Überschriften.

des löst gar nix aus... hm... ich lade es gerade hoch.....
so fertig, hier der link: KLICK
also wenns anders nicht geht würd ichs auch mit divs machen, hatte nur gedacht es geht mit h

EDIT: mir is gerade im IE (6) aufgefallen, dass h2 nicht richtig funktioniert wenn es direkt nach h1 kommt... kann man sich bei news zum beispiel angucken,woran liegt das?

[Peter0308]

AW: Bilder überlappen Überschriften.

Hi,

das Problem ist, das bei einem clear:left auch die float-Anweisung des linken Menüs zurückgesetzt wird. Deshalb wird mit dem nachfolgendem Text erst unter der Navigation weitergemacht.

Da hab ich im Moment noch keine Lösung für .... muss ich mir noch ein paar Gedanken drüber machen.

Peter

[Wishu]

AW: Bilder überlappen Überschriften.

ok wäre nett. danke schonmal für die hilfe.


Edit (autom. Beitragszusammenführung):

hab mir jetzt erstmal so ausgeholfen, dass ich nen min-height gesetzt habe. die bilder sind eh großteils gleichhoch... nur wie mache ich es, dass es vertikal in der mitte is. v-align oder vertical-align funzt irgendwie nich.


Edit (autom. Beitragszusammenführung):

ähm kanns sein, dass der ie6 min-height nich mag? da siehts nämlich noch immer genauso beschissen aus... ich hab kein bock des mit tabellen zu machen... hm...


Edit (autom. Beitragszusammenführung):

so habs jetzt mit tabellen gemacht, wolltsch zwar nich, aber ich will fertsch werden, kann ichspäter immer noch ändern. ich lads aber nich neu hoch.