[css] float-Problem

Dieses Thema im Forum "Web-Design" wurde erstellt von Manjo, 03.03.2007.

  1. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Mitglied seit:
    25.07.2005
    Hallo!

    Folgendes Problem: Auf der Seite soll links eine Spalte für ein Menü vorgesehen werden -> mit float:left; nach links geschoben. Daneben der Content -> mit margin-left:menübreite; so angelegt, dass er die Menüspalte auch unterhalb des Menüs frei bleibt. Innerhalb des Contents soll ein Element (hier die "1") vom Text (hier: "hier kommt ein Text") umflossen werden. Der anschließende Text (hier: "und dieser Text darunter") soll erst unterhalb der "1" beginnen.

    Die Anweisung min-height funzt ja bekanntlich nicht im ie6 :(

    Die Datei screen-ff.jpg zeigt, wie es aussehen soll mit gesetztem min-height, screen-ie.jpg wie es leider im ie aussieht.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Unbenanntes Dokument</title>
    </head>
    
    <body>
    <div style="float:left; width:100px;">
    	<ol>
    		<li>item</li>
    		<li>item</li>
    		<li>item</li>
    		<li>item</li>
    		<li>item</li>
    		<li>item</li>
    	</ol>
    </div>
    <div style="margin-left:100px;">
    	<div style="float:left; width:40px; font-size:40px;">1</div>
    	<div style="margin-left:40px;border-left:1px solid blue;">hier kommt ein Text</div>
    	<div style="border-top:1px solid blue;">und dieser Text darunter</div>
    </div>
    </body>
    </html>
    
    clear:both ist ungeeignet, da der nachfolgende Text dann erst unterhalb vom Menü beginnt.

    Wie geht es?

    Grüßle
    Manjo
     

    Anhänge:

  2. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.952
    Zustimmungen:
    242
    Mitglied seit:
    25.07.2004
    Mit mehr Semantik geht es ;)

    Ich würde es mit einem DIV machen, dass die 1 und den ersten Text umschliesst. Die 1 kannst Du via Paragraph als Blockelement links ausrichten/floaten, den darauf folgenden oberen Text tust Du in ebenfalls in einen Paragraphen.

    Dann dass DIV schliessen und einen erneuten Paragraphen beginnen.

    Weil Text solle ja Text sein und kein DIV ;)

    2nd
     
  3. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Mitglied seit:
    25.07.2005
    Code:
    <div style="margin-left:100px;">
      <div>
        <p style="float:left; width:40px; font-size:40px;">1</p>
        <p style="margin-left:40px;border-left:1px solid blue;">hier kommt ein Text</p>
      </div>
      <p style="border-top:1px solid blue;">und dieser Text darunter</p>
    </div>
    ok, nur so funzt es leider nicht. :(

    Ich habe noch einen Trick gefunden mit verschachtelten float-Elementen, dabei muss jedoch explizit eine Breite >50% angegeben werden. Da dies hier aber nicht möglich ist....

    Ja richtigt. Doch im Original ist die "1" eine Grafik und innerhalb der div-Tags gibt es p-Tags für den Text.

    Trotzdem Danke für die Gedanken!
     
  4. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.952
    Zustimmungen:
    242
    Mitglied seit:
    25.07.2004
    Bei mir funktioniert es mit folgendem geänderten Markup/CSS. Man verzeihe mir die knalligen Farben ;)

    Getestet in Safari, IE6 und IE7. Einfach das SPAN-Element durch ein IMG tauschen, die Klasse kann bleiben. Den unteren Abstand kannst Du per margin-bottom nach Belieben einstellen, sollte mindestens die Höhe des Bildes minus die Höhe einer Zeile Text haben. Im Prinzip ist das ein Work-Around für das min-height Problem des IE. Wenn mehr Text im Header kommt, fliesst es automatisch unter dem Bild weiter.

    Ist es so, wie Du es Dir wünschtest?

    2nd

    P.S.: Ich werde nie verstehen, wie man im vBulletin vernünftig Markup oder Code einfügen kann....

    Nachtrag: Ich habe noch folgende 2 Hacks gefunden, die die min-height Eigenschaft für den IE auf Umwegen möglich machen:

    http://www.css-blog.com/2003/10/23/min-height-auch-fur-den-ie

    http://www.css-technik.de/details/309/5/CSS-Browser-Bugs.htm

    Ich bin mir sicher, dass Du jetzt genug Zündstoff hast, um Dein Problem gründlich zu beseitigen :)
     
    Zuletzt bearbeitet: 03.03.2007
  5. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Mitglied seit:
    25.07.2005
    Ok, das Problem ist im Prinzip immer noch nicht vernünftig gelöst. :-( Es verfolgt mich scheinbar! Denn jetzt ist es so, dass die Höhe des gefloateten Elements nicht überall gleich ist. Das Ganze sieht nun in etwa so aus:
    Code:
     <body>
    
    <div class="menu">
    <ol>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    </ol>
    </div>
    
    <div class="content">
    <ul>
    <li><span class="img">1</span>element 1</li>
    <li><span class="img">2</span>element 2</li>
    <li><span class="img">3</span>element 3</li>
    </ul>
    </div>
    
    </body>
    Der Text bei den einzelnen Elementen kann lang aber auch kurz sein, so dass er vor dem Ende des gefloateten Bildes endet.

    Wer hat eine Lösung?
     
Die Seite wird geladen...