[css] float-Problem

Manjo

Aktives Mitglied
Thread Starter
Dabei seit
25.07.2005
Beiträge
906
Reaktionspunkte
24
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

  • screen-ff.jpg
    screen-ff.jpg
    4,6 KB · Aufrufe: 78
  • screen-ie.jpg
    screen-ie.jpg
    4,5 KB · Aufrufe: 70
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
 
Mit mehr Semantik geht es ;)
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....

Weil Text solle ja Text sein und kein DIV ;)
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!
 
Bei mir funktioniert es mit folgendem geänderten Markup/CSS. Man verzeihe mir die knalligen Farben ;)

<style type="text/css">
<!--

* {
margin: 0;
padding: 0;
border: 0;
}

.menu {
float:left;
width:100px;
background-color: red;
}

.content {
margin-left: 100px;
background-color: green;
}

.header {
margin-bottom: 30px;
}

.img {
width: 100px;
display: block;
float: left;
border-right:10px solid blue;
background-color:#FFFF00;
}

.text {
border-top:1px solid blue;
}

-->
</style>


</head>

<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">
<p class="header"><span class="img">1</span>Headertext</p>

<p class="text">Haupttext</p>
</div>

</body>

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:
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?
 
Zurück
Oben Unten