[css] float-Problem

Diskutiere mit über: [css] float-Problem im Web Page Design Forum

  1. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Registriert 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.902
    Zustimmungen:
    242
    Registriert 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
    Registriert 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.902
    Zustimmungen:
    242
    Registriert 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
    Registriert 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...
Ähnliche Themen - [css] float Problem Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
CSS: "float" und trotzdem zentrieren ? Web Page Design 16.08.2008
CSS: Benannte Zeichen beeinflussen Float-Box Web Page Design 20.08.2007
CSS: Problem mit float Web Page Design 27.12.2005

Diese Seite empfehlen

Benutzerdefinierte Suche