Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2306[/thread]

CSS: div, float, clear: Probleme mit IE

Leser: 1


<< >> 4 Einträge, 1 Seite
Alex
 2006-07-20 22:38
#24848 #24848
User since
2003-12-04
285 Artikel
BenutzerIn
[default_avatar]
Hallo Zusammen,

Bin gerade dabei ein Template zu erstellen. Eigentlich ein ganz einfaches 3-Spalten-Ding.

Das Problem: Stellt Euch mal so drei Spalten vor. In der mittleren der Content. Dieser mittlere div hat einen Rahmen (im Beispiel unten der Schwarze). Der linke div soll nun etwas über dem linken Rand des Contentrahmens überlappen. Der rechte div soll recht neben dem Contentrahmen stehen. Soweit so gut. Nun ist aber wichtig, dass der mittlere div (also auch der Rahmen) immer die minimale Höhe der drei div's hat. D. h. egal ob links, mitte oder rechts den meisten Inhalt hat soll der Rahmen immer auf gleicher/unterster Höhe abschließen.

Hier mal mein Versuch. Im FF sieht es so aus wie es soll. Der IE dreht total am Rad.
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<HTML>
<HEAD>
<TITLE>Template</TITLE>

</HEAD>

<BODY>

<!--openBORDER-->
<div style=" position:relative;right:80px;width:645px;margin: 0% auto;border:2px solid �text-align:left;background-image:url(hg_main.jpg);background-repeat:no-repeat;background-position: 0% 100%;">

<!--openPUSHER-->
<div style="margin: 0% -200px 0% -40px;border:2px solid #ff0000;">

<!--openLEFT-->
<div style="float:left;margin:0px 0px;width:170px;border:2px solid #00cc00;">
<p>Leftinhalt</p>
<div style="clear:both;"></div>
</div>
<!--endLEFT-->

<!--openCONTENT-->
<div style="float:left;margin:0px 0px 0px 20px;width:55%;border:2px solid #ffff00;">
<p>Contentinhalt</p>

<div style="clear:both;"></div>
</div>
<!--endCONTENT-->

<!--openRight-->
<div style="float:right;margin:0px 0px 0px 20px;width:170px;border:2px solid #0000ff;">
<p>Rightinhalt</p>

<div style="clear:both;"></div>
</div>
<!--endRIGHT-->

<div style="clear:both;"></div>
</div>
<!--endPUSHER-->

</div>
<!--endBORDER-->

</BODY>
</HTML>

Habe mal allen div's einen farbigen Rahmen gegeben, damit es auch zu sehen ist. Der schwarze ist der spätere Rahmen. Grün das Menü links. Blau das Menü rechts. Rot benutze ich als Pusher um den schwarzen Rahmen eben immer nach unten drücken zu können, egal welche Seite am längsten ist.

Habe ich mich verständlich ausgedrückt?

Wie bekomme ich das nun auch für den IE hin?

Hat jemand eine schönere, sinnvollere, funktionierendere Schreibweise für mich?

Vielen Dank für Eure Hilfe!

Alex
<center>Schönen Gruß, Alex
Mit dem Computer geht alles viel schneller - es dauert nur ein bißchen länger!</center>
pktm
 2006-07-21 01:08
#24849 #24849
User since
2003-08-07
2921 Artikel
BenutzerIn
[Homepage]
user image
Meine klassische Lösung dazu sind 1px hohe Grafiken, die ich mit CSS nach meinen Belgieben strecke / dehne. Ansonsten würd eich nich versuchen, die min-height - Eigenschaft auch auf alle Eltern-Elemente des aktuellen Elements anzuwenden. Das gibt zwar einen unheimlichen, undurchsichtigen, von CSS gerade zu vermeide gewollte Code, aber es funktioniert zumindest bei Schriftformatierungen.
http://www.intergastro-service.de (mein erstes CMS :) )
nepos
 2006-07-21 12:27
#24850 #24850
User since
2005-08-17
1420 Artikel
BenutzerIn
[Homepage] [default_avatar]
Und generell ist leider grade der IE in Bezug auf CSS der Browser, der da mit am wenigsten kann und auch noch paar nette Bugs in petto hat :(
Alex
 2006-07-22 07:21
#24851 #24851
User since
2003-12-04
285 Artikel
BenutzerIn
[default_avatar]
Habe es hinbekommen. Würde mich über Eure Kommentare oder Verbesserungsvorschläge sehr freuen! Vielen Dank! Alex
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML>
<HEAD>
<TITLE>Template</TITLE>

</HEAD>

<BODY>

<!--openBORDER-->
<div style="position:relative;right:80px;width:645px;margin: 0px auto;border:2px solid �background-image:url(hg_main.jpg);background-repeat:no-repeat;background-position: 0% 100%;">

<!--openPUSHER-->
<div style="width:830px;margin: 0px -185px 0px 0px;border:2px solid #ff0000;">

<!--openLEFT-->
<div style="position:relative;right:35px;float:left;width:170px;border:2px solid #00cc00;">
<p>Leftinhalt</p>
</div>
<!--endLEFT-->

<!--openCONTENT-->
<div style="position:relative;left:0px;float:left;width:465px;border:2px solid #ffff00;">
<p>Contentinhalt</p>
</div>
<!--endCONTENT-->

<!--openRight-->
<div style="position:relative;left:15px;float:left;width:170px;border:2px solid #0000ff;">
<p>Rightinhalt</p>
</div>
<!--endRIGHT-->

<div style="clear:both;"></div>
</div>
<!--endPUSHER-->

</div>
<!--endBORDER-->

</BODY>
</HTML>
<center>Schönen Gruß, Alex
Mit dem Computer geht alles viel schneller - es dauert nur ein bißchen länger!</center>
<< >> 4 Einträge, 1 Seite



View all threads created 2006-07-20 22:38.