CSS positionierung von DIVS

aNtraXx

trailer park king

Registered: Apr 2002
Location: Linz
Posts: 6904

08.03.2006 - 16:10

Es geht um folgende Seite:

http://www.uzr.at

Hier ist das Layout im DIV-Design gehalten.

Diese 3 Spalten sind jeweils einzelne DIVS welche von einem Div eingeschlossen sind.

Dieses DIV ist voererst noch relative. Da es aber einen Hintergrund haben sollte muss ich es auf absolute umstellen.

Denn es wird nur mit den Inhalt in die Länge gezogen wenn es "absolute" ist. Bei "relative" tut sich nichts.

Allerdings schließt dann der Footer an die Rootline an da jetzt wieder der Behälter für die 3 Spalten den gesamten Content nicht in die Länge zieht.

Gibts da einen Trick, dass der Behälter der 3 Spalten den Content trotz seines "absolute" Attributs in die Länge zieht?

Habe hier zur Veranschaulichung meines Problems ein HTML File mit dem Layout-Code befüllt:

http://www.uzr.at/typo3/test.html

tia, Bernhard

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

08.03.2006 - 17:41

Du musst nach den 3 DIVs ein sog. clear-DIV einbauen. Dieses erzwingt quasi dem uebergeordnetem DIV (welches die drei beinhaelt) dass es sich ueber alle drei erstreckt:

Code:

<div id="container-for-all-divs">
  <div id="col-1">content</div>
  <div id="col-2">content</div>
  <div id="col-3">content</div>
  <div style="clear: both;"></div>
</div>

Zwecks X-Browser kanns notwendig sein, dass du dem clear-DIV eine height:/line-height: o.ae. geben musst. YMMV.

Hintergrund: ein float DIV wird aus dem "flow" einer Seite ausgenommen. Dadurch "verbraucht" es keinen Platz, darum waechst dass DIV "dahinter" nicht runter. Mit clear kannst du das erzwingen. clear versteht "left, right, none, both". D.h. du kannst, in Bezug auf float: left/right, explizit angeben, wo du den Platz "konsumieren" willst.

HTH

aNtraXx

trailer park king

Registered: Apr 2002
Location: Linz
Posts: 6904

09.03.2006 - 08:12

hmm... also die 3 content divs ziehen den roten Rand eh in die Länge.

Aber es sollte ja so aussehen, dass der gelbe Rand unter dem roten ist und sich der grüne und der blaue Rand dann bis zum gelben hinunterziehen.

Jedoch hilft mir hier das clear-div nicht.

EDIT: AH doch! Ich hab nur vergessen, dass ich das absolute Attribut entferne!

Danke für die schnelle Hilfe, ich wär mit dem Problem schon fast verzweifelt

. Schön langsam check ich diese ganze DIV-Sache

Bearbeitet von aNtraXx am 09.03.2006, 08:15

aNtraXx

trailer park king

Registered: Apr 2002
Location: Linz
Posts: 6904

21.03.2006 - 11:00

SO, jetzt hätte ich aber noch eine Frage.
Wie stelle ich es an, dass alle 3 DIVs immer genauso hoch sind wie das längste von den dreien. Es gibt jedoch keine fixen höhenangaben da sich die Länge nach dem Inhalt richtet.

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

21.03.2006 - 11:12

Ausm Bauch raus wuerd ich sagen dass ist einer der Faelle der mit CSS-only nicht funktioniert. Vermeide ihn einfach

Aber du wirst mit geeigneten Stichworten sicher Hacks/Workarounds mit google finden.

aNtraXx

trailer park king

Registered: Apr 2002
Location: Linz
Posts: 6904

21.03.2006 - 11:16

Naja diese Hacks hängen mir schon zum Hals raus. Die machen einfach nur Probleme.

Sache ist nämlich die, dass ich ein Logo in der linken Spalte immer ganz unten platzieren soll. Das alleine wäre an sich ja kein Problem, jedoch wird in der selben Spalte ganz oben ein Menü angezeigt.

Die einzige Lösung die mir auf die schnelle einfällt wäre die, dass ich ein DIV in die Fußzeile packe (die ist ja eh immer ganz unten) und von dort aus das Logo mit zB "top:-50px" nach oben rücke. Ist halt auch nicht grad sauber.

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

21.03.2006 - 12:11

Jep, mit position relative und wie du das beschrieben hast wuerde es gehen. Wobei der Platz, wo das Logo eigentlich waere, von wo du es mit position relative weggeschoben hast, dann leer bleibt und nicht einfach so "nachbesetzt" werden kann.

aNtraXx

trailer park king

Registered: Apr 2002
Location: Linz
Posts: 6904

21.03.2006 - 12:23

Naja ich hätte es halt mit position:absolue gemacht und dann per z-index über den Rest gelegt. Somit bleibt der Leerraum in der Fußzeile nicht.

Allerdings muss es da doch etwas eleganteres geben :/

dosen

Here to stay

Registered: Feb 2003
Location: Wien
Posts: 5602

21.03.2006 - 13:17

auch wenn divs so modern und gern gesehen sind, mit tabellen hast das in 2minuten gemacht.

aNtraXx

trailer park king

Registered: Apr 2002
Location: Linz
Posts: 6904

21.03.2006 - 14:13

Ich weis

, aber das darf und will ich nicht verwenden

.

aNtraXx trailer park king Registered: Apr 2002 Location: Linz Posts: 6904	08.03.2006 - 16:10 Es geht um folgende Seite: http://www.uzr.at Hier ist das Layout im DIV-Design gehalten. Diese 3 Spalten sind jeweils einzelne DIVS welche von einem Div eingeschlossen sind. Dieses DIV ist voererst noch relative. Da es aber einen Hintergrund haben sollte muss ich es auf absolute umstellen. Denn es wird nur mit den Inhalt in die Länge gezogen wenn es "absolute" ist. Bei "relative" tut sich nichts. Allerdings schließt dann der Footer an die Rootline an da jetzt wieder der Behälter für die 3 Spalten den gesamten Content nicht in die Länge zieht. Gibts da einen Trick, dass der Behälter der 3 Spalten den Content trotz seines "absolute" Attributs in die Länge zieht? Habe hier zur Veranschaulichung meines Problems ein HTML File mit dem Layout-Code befüllt: http://www.uzr.at/typo3/test.html tia, Bernhard
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	08.03.2006 - 17:41 Du musst nach den 3 DIVs ein sog. clear-DIV einbauen. Dieses erzwingt quasi dem uebergeordnetem DIV (welches die drei beinhaelt) dass es sich ueber alle drei erstreckt: Code: `<div id="container-for-all-divs"> <div id="col-1">content</div> <div id="col-2">content</div> <div id="col-3">content</div> <div style="clear: both;"></div> </div>` Zwecks X-Browser kanns notwendig sein, dass du dem clear-DIV eine height:/line-height: o.ae. geben musst. YMMV. Hintergrund: ein float DIV wird aus dem "flow" einer Seite ausgenommen. Dadurch "verbraucht" es keinen Platz, darum waechst dass DIV "dahinter" nicht runter. Mit clear kannst du das erzwingen. clear versteht "left, right, none, both". D.h. du kannst, in Bezug auf float: left/right, explizit angeben, wo du den Platz "konsumieren" willst. HTH
aNtraXx trailer park king Registered: Apr 2002 Location: Linz Posts: 6904	09.03.2006 - 08:12 hmm... also die 3 content divs ziehen den roten Rand eh in die Länge. Aber es sollte ja so aussehen, dass der gelbe Rand unter dem roten ist und sich der grüne und der blaue Rand dann bis zum gelben hinunterziehen. Jedoch hilft mir hier das clear-div nicht. EDIT: AH doch! Ich hab nur vergessen, dass ich das absolute Attribut entferne! Danke für die schnelle Hilfe, ich wär mit dem Problem schon fast verzweifelt . Schön langsam check ich diese ganze DIV-Sache Bearbeitet von aNtraXx am 09.03.2006, 08:15
aNtraXx trailer park king Registered: Apr 2002 Location: Linz Posts: 6904	21.03.2006 - 11:00 SO, jetzt hätte ich aber noch eine Frage. Wie stelle ich es an, dass alle 3 DIVs immer genauso hoch sind wie das längste von den dreien. Es gibt jedoch keine fixen höhenangaben da sich die Länge nach dem Inhalt richtet.
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	21.03.2006 - 11:12 Ausm Bauch raus wuerd ich sagen dass ist einer der Faelle der mit CSS-only nicht funktioniert. Vermeide ihn einfach Aber du wirst mit geeigneten Stichworten sicher Hacks/Workarounds mit google finden.
aNtraXx trailer park king Registered: Apr 2002 Location: Linz Posts: 6904	21.03.2006 - 11:16 Naja diese Hacks hängen mir schon zum Hals raus. Die machen einfach nur Probleme. Sache ist nämlich die, dass ich ein Logo in der linken Spalte immer ganz unten platzieren soll. Das alleine wäre an sich ja kein Problem, jedoch wird in der selben Spalte ganz oben ein Menü angezeigt. Die einzige Lösung die mir auf die schnelle einfällt wäre die, dass ich ein DIV in die Fußzeile packe (die ist ja eh immer ganz unten) und von dort aus das Logo mit zB "top:-50px" nach oben rücke. Ist halt auch nicht grad sauber.
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	21.03.2006 - 12:11 Jep, mit position relative und wie du das beschrieben hast wuerde es gehen. Wobei der Platz, wo das Logo eigentlich waere, von wo du es mit position relative weggeschoben hast, dann leer bleibt und nicht einfach so "nachbesetzt" werden kann.
aNtraXx trailer park king Registered: Apr 2002 Location: Linz Posts: 6904	21.03.2006 - 12:23 Naja ich hätte es halt mit position:absolue gemacht und dann per z-index über den Rest gelegt. Somit bleibt der Leerraum in der Fußzeile nicht. Allerdings muss es da doch etwas eleganteres geben :/
dosen Here to stay Registered: Feb 2003 Location: Wien Posts: 5602	21.03.2006 - 13:17 auch wenn divs so modern und gern gesehen sind, mit tabellen hast das in 2minuten gemacht.
aNtraXx trailer park king Registered: Apr 2002 Location: Linz Posts: 6904	21.03.2006 - 14:13 Ich weis , aber das darf und will ich nicht verwenden .

CSS positionierung von DIVS

Forum Index > Software > Coding Stuff

aNtraXx

Rektal

aNtraXx

aNtraXx

Rektal

aNtraXx

Rektal

aNtraXx

dosen

aNtraXx