• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Div: float (überlappen)

Status
Für weitere Antworten geschlossen.
A

Addl

Neues Mitglied
Hallo alle zusammen,
Ich habe ein Problem mit dem "div"-Tag. Ich möchte vier Zellen einfach als Quadrat haben, und die fünfte Zelle auf diese vier Zentrieren und überlappen lassen, aber der Text soll nicht von den vier Zellen in die fünfte hineinragen (Siehe Bildanhang).

Habe vielleicht 100 Ansätze ausprobiert, und poste mal hier einen stark vereinfachten, der mir am besten vorkam.

Ich bin für jede Hilfe dankbar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>5-Feld Style</title>
</head>
<body>

<div style="border:#009900 2px solid; float:left; height:100px; width:200px; background-color:#0099FF; margin:50px -300px -50px 100px;">
<font color="#0000CC">Feld5<br />Dieser Text soll sich unter keinen umständen mit anderem Text überschneiden. Er soll auch nicht über den Rand hinaus gehen.</font></div>

<div class="text" style="border:#009900 2px solid; float:left; height:100px; width:200px;">
Feld1<br /><br /><br />Dieser Text soll links von Feld5 stehen.<br />
</div>

<div style="border:#009900 2px solid; float:left; height:100px; width:200px;">
Feld2<br /><br /><br />Dieser Text soll rechts von Feld5 stehen.</div>

<div style="clear:both; height:0px; width:0px;"></div>

<div style="border:#009900 2px solid; float:left; height:100px; width:200px; margin-left:4px;">
Feld3<br />Dieser Text soll liks von Feld5 stehen.</div>

<div style="border:#009900 2px solid; float:left; height:100px; width:200px;">
Feld4<br />Dieser Text soll rechts von Feld5 stehen.</div>

</body>
</html>
 

Anhänge

  • bsp.gif
    bsp.gif
    9,7 KB · Aufrufe: 16
Wenn ich dich richtig verstanden habe, dann meinst du soetwas:

Aber leider habe ich da immer noch das Problem, dass der txt der vier boxen hinter dem 5. verschwindet. Oder habe ich etwas falsch gemacht?

Vielen Dank für die Geduld.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>5-Feld Style</title>
</head>
<body leftmargin="0" topmargin="0" bottommargin="0" rightmargin="0" marginheight="0" marginwidth="0">

<div style="border:#009900 2px solid; height:100px; width:200px; background-color:#0099FF; position:absolute; left:100px; top:50px; z-index:5;">
<font color="#0000CC">Feld5<br />Dieser Text soll sich unter keinen umständen mit anderem Text überschneiden. Er soll auch nicht über den Rand hinaus gehen.</font></div>

<div style="border:#009900 2px solid; height:100px; width:200px; z-index:4; position:absolute;">
Feld1<br /><br /><br />Dieser Text soll links von Feld5 stehen.<br />
</div>

<div style="border:#009900 2px solid; height:100px; width:200px; z-index:3; position:absolute; left:206px;">
Feld2<br /><br /><br />Dieser Text soll rechts von Feld5 stehen.</div>

<div style="border:#009900 2px solid; height:100px; width:200px; z-index:2; position:absolute; top:106px;">
Feld3<br />Dieser Text soll liks von Feld5 stehen.</div>

<div style="border:#009900 2px solid; height:100px; width:200px; z-index:1; position:absolute; left:206px; top:106px;">
Feld4<br />Dieser Text soll rechts von Feld5 stehen.</div>

</body>
</html>
 
dann probier doch mal in jedes der vier äußeren boxen noch eine kleine box zu machen, die jeweils eine ecke der mittleren box darstellt und dann die mittlere drübert. (s. Anhang)
anders wüsst ich net das des geht
Gruß Ky
 

Anhänge

  • mgl1.JPG
    mgl1.JPG
    38,4 KB · Aufrufe: 9
Wie Koslowski bereits angedeutet hat.

Um die vier Boxen ein weiteres div ziehen und mit position:relative versehen.
Die mittlere Box schreibst du als letzes in die große Box und positionierst sie mit position : absolut von der oberen, linken Ecke der großen Box.
Die mittlere Box schwebt so über den anderen.
z-index brauchst du bei dieser Reihenfolge allerdings nicht.

Die Bildchenidee von ky_fr34k find ich gut.
 
Zuletzt bearbeitet:
wenn du dann mal ne lösung hast, dann poste die bitte!
würde mich auch intressieren wie du es dann gemachts hast :)
Gruß KY
 
Ich habe mich damit zufrieden gegeben (siehe unten), was im Moment nur ein Testlayout ist. Natürlich kann man den Fixen Inhalt auch über Das Mittelfeld legen, aber ich habe halt das gemacht, wasfür meine Zwecke am besten ist.

Viele Dank noch einmal an alle für die nette Hilfe.


(Wird im IE6 nicht richtig angezeigt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>

<div style="width:100%;">
<div style="background-color:#CC0000; width:50%; height:100%; float:left;">
Feld1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="background-color:#990000; width:100%; height:100px; min-height:100px;"><div style="width:175px; height:100px; max-width:175px; max-height:100px; overflow:visible; float:right;"></div>Fixer Inhalt 1
</div></div>
<div style="background-color:#990000; width:50%; height:100%; float:right;">
Feld2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="background-color:#CC0000; width:100%; height:100px; min-height:100px;"><div style="width:175px; height:100px; max-width:175px; max-height:100px; float:left;"><div style="background-color:#0066CC; margin:0px 0px 0px -175px; width:350px; height:300px; position:relative; top:0px; right:0px; bottom:-200px; left:0px; z-index:2;">
Mittelfeld
</div></div>
Fixer Inhalt2
</div></div>
<div style="clear:both; height:0px; width:100%;"></div>
<div style="background-color:#006600; width:50%; float:left;"><div style="width:175px; height:200px; float:right;"></div>
Feld3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="background-color:#009900; width:50%; float:right;"><div style="width:175px; height:200px; float:left;"></div>
Feld4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben