<div> positionierung via "CSS" und "XHTML"

[Peter]

Hallo.
Also ich komm mal gleich zur Sache.
Ich habe mir eine Seite gebastelt mit "XHTML" und "CSS", und jetzt will ich einen Footer einfügen.
Der will aber nicht wie ich will.
Der hockt einfach über "div1" und will partout nicht dadrunter.
Also "div2" (footer) soll unter "div1" (box).
Die Box ist dynamisch (oder wie man das nennt), d.h. wenn inhalt dazu kommt, dann verlängert der "div1" sich automatisch.
Ich versuche jetzt, dass das "div2" immer unter "div1" bleibt, also egal wie lang "div1" jetzt ist, "div2" sich automatisch immer unter "div1" setzt (vielleicht ja irgendwie so, dass sich "div2" am unteren Rand von "div1" orientiert.).

Hier mal ein online Beispiel (Der code steht vollständig im Quelltext):
http://worldofgfx.wo.funpic.de/index.html

Ich hoffe ihr könnt mir helfen :)

[Beat]

Hier mal ein online Beispiel (Der code steht vollständig im Quelltext):
http://worldofgfx.wo.funpic.de/index.html

Ich hoffe ihr könnt mir helfen :)

Dein footer wird nie auf die Ausmassen deines content reagieren, weil du den content absolut positioniert hast.

mfg Beat

[Peter]

Dein footer wird nie auf die Ausmassen deines content reagieren, weil du den content absolut positioniert hast.

Der footer wird doch mit der ID "#footer1" "gesteuert".
Wenn ich im content "position: absolute;" auf "position: relative;", wird die seite nur falsch angezeigt, "div2" ist dann aber immernoch nicht unter "div1".
Ich habe auch mal probiert, was passiert, wenn man das weglässt, aber da wurden einfach nur sämtliche positionierungen ignoriert und "div2" war immernoch nicht unter "div1".

Sorry ich stell mich gerade vielleicht etwas dumm an, aber es ist ja auch schon spät =).

[Gunther]

Hi!

»» Dein footer wird nie auf die Ausmassen deines content reagieren, weil du den content absolut positioniert hast.

Ich habe auch mal probiert, was passiert, wenn man das weglässt, aber da wurden einfach nur sämtliche positionierungen ignoriert und "div2" war immernoch nicht unter "div1".

Sorry ich stell mich gerade vielleicht etwas dumm an, aber es ist ja auch schon spät =).

Es scheint mir weniger eine Frage der Uhrzeit zu sein, als vielmehr ein massives Defizit im Verständnis von CSS - insbesondere der Eigenschaft position!

Du solltest dir bitte erstmal diese Kapitel zu Gemüte führen und verstehen. Es gibt dazu im übrigen auch mehr als genug Beispiele & Tutorials im Netz.

Danach solltest du den Aufbau deiner Seite überdenken und neu gestalten.

Ich bin sicher, dass sich dein Problem dann auch erübrigt/ erledigt hat.

Gruß Gunther

[Peter]

Es scheint mir weniger eine Frage der Uhrzeit zu sein, als vielmehr ein massives Defizit im Verständnis von CSS - insbesondere der Eigenschaft position!

Das mit "position" könnte stimmen, aber ich hab kein CSS Defizit!

Danach solltest du den Aufbau deiner Seite überdenken und neu gestalten.

Was stimmt denn mit dem Aufbau meiner Seite nicht?
Hast du Beispiele, was daran falsch, bzw. falsch umgesetzt ist?

[Gunther]

Hallo Peter!

»» Es scheint mir weniger eine Frage der Uhrzeit zu sein, als vielmehr ein massives Defizit im Verständnis von CSS - insbesondere der Eigenschaft position!

Das mit "position" könnte stimmen, aber ich hab kein CSS Defizit!

»» Danach solltest du den Aufbau deiner Seite überdenken und neu gestalten.

Was stimmt denn mit dem Aufbau meiner Seite nicht?
Hast du Beispiele, was daran falsch, bzw. falsch umgesetzt ist?

Du positionierst (fast) alle deine Elemente auf der Seite absolut.
Damit machst du aber einen der wesentlichsten Vorteile des Seitenaufbaus kaputt, nämlich dass sich Elemente "ganz von alleine", entsprechend ihrem jeweiligen Inhalt, aneinander ausrichten!

Siehe: http://www.google.de/search?q=CSS+Elementfluss

Durch die absolute Positionierung werden diese Elemente nämlich gerade genau aus diesem "Fluss" herausgenommen/ herausgelöst. Wenn solche Elemente keine fest definierte Breite und Höhe haben, was man i.d.R. ja wiederum auch nicht haben möchte, dann ist es nicht mehr möglich, dass sich nachfolgende Elemente an ihnen orientieren (im Bezug auf ihre Platzierung)! Das ist aber genau das, was du haben/ erreichen möchtest.

Also lautet der "einfache" Rat zu deiner Frage/ deinem Problem: Verwende keine absolute Positionierung!

Wie es auch anders geht, findest du bspw. unter: Siehe: http://www.google.de/search?q=CSS+Layouts (und darauf achten, dass sie ohne absolute Positionierung arbeiten)

BTW: Firebug ist "must have" Addon für den Firefox (und sehr nützlich bei solchen Aufgaben ...)!

Gruß Gunther

[Peter]

Hallo

Du positionierst (fast) alle deine Elemente auf der Seite absolut.
Damit machst du aber einen der wesentlichsten Vorteile des Seitenaufbaus kaputt, nämlich dass sich Elemente "ganz von alleine", entsprechend ihrem jeweiligen Inhalt, aneinander ausrichten!

Siehe: http://www.google.de/search?q=CSS+Elementfluss

Ich hab da sone nette Seite gefunden: http://www.johannesellenberg.de/positioning/ , und ich glaube so langsma verstehe ich denn sinn von "relative".
Noch nicht ganz, werd ihn mir wohl noch ein paar mal durchlesen müssen.

Durch die absolute Positionierung werden diese Elemente nämlich gerade genau aus diesem "Fluss" herausgenommen/ herausgelöst. Wenn solche Elemente keine fest definierte Breite und Höhe haben, was man i.d.R. ja wiederum auch nicht haben möchte, dann ist es nicht mehr möglich, dass sich nachfolgende Elemente an ihnen orientieren (im Bezug auf ihre Platzierung)! Das ist aber genau das, was du haben/ erreichen möchtest.

Naja bis jezt wurde ja (fast) alles richtig angezeigt, also hätte ich nicht gedacht, dass das so eine große rolle spielt.

Also lautet der "einfache" Rat zu deiner Frage/ deinem Problem: Verwende keine absolute Positionierung!

Garkeine Absolute Positionierung?
Wofür wird das denn dann verwendet, wenn nicht für Homepages?

Und wäre es besser, wenn ich ein großes <div> um die anderen <div> Elemente mache?

Wie es auch anders geht, findest du bspw. unter: Siehe: http://www.google.de/search?q=CSS+Layouts (und darauf achten, dass sie ohne absolute Positionierung arbeiten)

Werde mich mal umschauen.

BTW: Firebug ist "must have" Addon für den Firefox (und sehr nützlich bei solchen Aufgaben ...)!

Das läuft nur mit der neusten Firefox Version, die noch garnicht raus ist oder?
Ich schau es mir trotzdem mal an. =)

[ChrisB]

Hi,

Ich hab da sone nette Seite gefunden: http://www.johannesellenberg.de/positioning/ , und ich glaube so langsma verstehe ich denn sinn von "relative".
Noch nicht ganz, werd ihn mir wohl noch ein paar mal durchlesen müssen.

So viel also zum Thema "kein CSS-Defizit".

Also lautet der "einfache" Rat zu deiner Frage/ deinem Problem: Verwende keine absolute Positionierung!

Garkeine Absolute Positionierung?
Wofür wird das denn dann verwendet, wenn nicht für Homepages?

Die verwendet man, wenn man ihre Auswirkungen komplett verstanden hat & einschätzen kann, in Situationen wo sie angebracht ist und wo man die "Umgebung" gut genug unter Kontrolle hat, dass sich keine negativen Seiteneffekte ergeben.

BTW: Firebug ist "must have" Addon für den Firefox (und sehr nützlich bei solchen Aufgaben ...)!

Das läuft nur mit der neusten Firefox Version, die noch garnicht raus ist oder?

"Alle Versionen anzeigen"

MfG ChrisB

[Gunther]

Hi,

"Alle Versionen anzeigen"

Danke für die Korrektur.
Das kommt davon, wenn man seine angegebenen Links vorher nicht genau überprüft. Wußte bis eben auch noch nicht, dass es bereits eine "Entwickler-Version" für den FF 3.5 gibt.

Gruß Gunther

[Peter]

Hallo.

So viel also zum Thema "kein CSS-Defizit".

Kein CSS Defizit, aber ein "position: ;" Defizit, und selbst wenn, nur weil ich kein CSS Profi bin, braucht ihr mir nicht helfen, oder mich dauernd dadrauf hinweisen, dass ich keiner bin?

»» Garkeine Absolute Positionierung?
»» Wofür wird das denn dann verwendet, wenn nicht für Homepages?

Die verwendet man, wenn man ihre Auswirkungen komplett verstanden hat & einschätzen kann, in Situationen wo sie angebracht ist und wo man die "Umgebung" gut genug unter Kontrolle hat, dass sich keine negativen Seiteneffekte ergeben.

Das heißt, dass ich "absolute" in meinen Buttons, bzw. in meiner Navi weiter verwenden kann?
Ein negativer Seiteneffekt ergibt das eigentlich nicht (naja, ich muss den footer wieder einbauen, nachdem ich auf "relative" geändert habe).

Und noch eine frage:

#content {  
...  
top : -145px;  
...  
}

Ich musste -xxx verwenden, um das richtig zu positionieren.
Das sieht jetzt aber zeihmlich unschön aus.
Gibts ne möglichkeit, wie man das anders realisieren kann?
Ich glaub "z-index" oder?

[Gunther]

Hallo!

»» So viel also zum Thema "kein CSS-Defizit".
Kein CSS Defizit, aber ein "position: ;" Defizit, und selbst wenn, nur weil ich kein CSS Profi bin, braucht ihr mir nicht helfen, oder mich dauernd dadrauf hinweisen, dass ich keiner bin?

Darum geht es nicht (auch wenn es dir so vorkommen/ erscheinen mag).
Sondern es geht vielmehr darum, dass du/ man nicht einen einzelnen Punkt (eine einzelne CSS Eigenschaft) herauspicken kannst.
Viele der CSS Eigenschaften wirken im "Zusammenspiel", bzw. beeinflussen sich gegenseitig/ haben Auswirkungen auf andere Eigenschaften.

Deshalb ist es (imho) unerlässlich, sich mit CSS als Ganzem erstmal soweit zu beschäftigen (und es zu verstehen), dass man diese Zusammenhänge und die "Funktionsweise" jeder Eigenschaft kennt.

»» »» Garkeine Absolute Positionierung?
»» »» Wofür wird das denn dann verwendet, wenn nicht für Homepages?
»»
»» Die verwendet man, wenn man ihre Auswirkungen komplett verstanden hat & einschätzen kann, in Situationen wo sie angebracht ist und wo man die "Umgebung" gut genug unter Kontrolle hat, dass sich keine negativen Seiteneffekte ergeben.

Das heißt, dass ich "absolute" in meinen Buttons, bzw. in meiner Navi weiter verwenden kann?

Diese Frage alleine schon wieder lässt eben erkennen, dass dir die grundlegenden Varianten der Positionierung (noch) nicht vertraut sind.

Einfach formuliert könnte man sagen:"Verwende absolute Positionierung nur da, wo es anders nicht geht!" Oder andersherum:"Wann immer man ohne absolute Positionierung auskommt, sollte man auch darauf verzichten!".

Und noch eine frage:
Ich musste -xxx verwenden, um das richtig zu positionieren.
Das sieht jetzt aber zeihmlich unschön aus.
Gibts ne möglichkeit, wie man das anders realisieren kann?
Ich glaub "z-index" oder?

Glauben hilft wenig - Wissen umso mehr.

Schau' dir doch erstmal mehrere Beispiele für "Standard-Layouts" an. Analysiere wie sie aufgebaut sind. Lese und verstehe das Kapitel CSS, oder als Minimum die Sache mit der Positionierung.

Setze die hier im Forum erhaltenen (und wirklich gut gemeinten) Tipps & Ratschläge in die Tat um.

Gruß Gunther

[Peter]

Hallo.

Hab den "content" und "box" bereich ja schon in relative gesetzt, hab aber noch ein paar probleme damit.
Ich werde mir morgen mehr dazu angucken, weil es schon spät ist.
Gute Nacht, wir lesen uns!

[Peter]

Hallo.

Hab das jetzt in "relative" umgeändern usw..
Läuft echt super, und das mit dem "footer" hat auch geklappt!
Danke!

Da ist die Seite:
< http://worldofgfx.wo.funpic.de/index.html>

Könnt ihr euch den Quelltext nochmal anschauen, und mir sagen, was ich verbessern/ändern soll?

[molily]

Könnt ihr euch den Quelltext nochmal anschauen, und mir sagen, was ich verbessern/ändern soll?

Einiges ließe sich verbessern.

Mit position:relative verschiebst du ein Element relativ zu seiner normalen Position im Elementfluss. Es liegt dann woanders, aber alle folgenden Elemente werden so gelayoutet, als läge es im normalen Fluss.

So trickst du also mit positiver und negativer relativer Verschiebung herum, bis es scheinbar pixelgenau hinhaut. Das klappt nur solange, wie die angenommene Höhe der Boxen in jedem Browser auf jedem System stimmt (gut, dafür setzt du halt nahezu überall feste Höhen). Und es ist natürlich überhaupt nicht anpassbar. Änderst du irgendwo eine Höhe bzw. einen Inhalt, musst du alle Maße neu setzen.

Es mag für dich einfach scheinen, mit position:absolute und relative alle Elemente wie wild auf dem Bildschirm zu platzieren - aber es ist letztlich  alles andere als flexibel.

position:relative ist kein Werkzeug für alles. Setze dich mit dem CSS-Boxmodell auseinander. Wenn du einfach nur Abstände willst, nimm margin bzw. padding, aber nicht position:relative. Wenn du einmal in dem Modus bist und den Elementfluss einerseits benutzt und ihn andererseits ständig umgehst, wird es ultraschwierig, irgendwann eine Box an die richtige Stelle zu setzen - weil du von der Position im normalen Fluss ausgehen musst, aber keinen solchen siehst, weil alle Elemente verschoben wurden.

Die Navigationsleisten sind derzeit noch eine div-span-Suppe. HTML bietet dafür die Elemente ol und ul, die sich hervorragend umformatieren lassen.

Übrigens solltest du versuchen, rein grafische, inhaltslose Layoutteile nicht mit leeren div-Elementen mit Hintergrundgrafiken umzusetzen. Nach Möglichkeit sollte man solche Element einsparen. Gut, bei dem Halbkreis ist es derzeit schwierig, auf ein zusätzliches div-Element zu verzichten - bzw. man könnte es höchstens als Container um alle anderen herum setzen, was das Element nur verschieben würde.

Mathias

[Peter]

So trickst du also mit positiver und negativer relativer Verschiebung herum, bis es scheinbar pixelgenau hinhaut. Das klappt nur solange, wie die angenommene Höhe der Boxen in jedem Browser auf jedem System stimmt (gut, dafür setzt du halt nahezu überall feste Höhen). Und es ist natürlich überhaupt nicht anpassbar. Änderst du irgendwo eine Höhe bzw. einen Inhalt, musst du alle Maße neu setzen.

Ich habe es schon getestet, und es passt sich automatsich an wenn ich bei "box" oder "content" die Höhe ändere.
Ich weiß nur nicht wie es in anderen Browsern/Systemen aussieht.
Werd ich wohl mal weiter rumprobieren.

Es mag für dich einfach scheinen, mit position:absolute und relative alle Elemente wie wild auf dem Bildschirm zu platzieren - aber es ist letztlich  alles andere als flexibel.

Aber stört das denn, solang es richtig angezeigt wird?
Ist meine erste <div> Homepage (damlas hatte ich die mit Tabellen gemacht).
Gab es nicht irgendwo mal eine Seite, die automatisch Screenshots von der eingegebenen Seite gemacht hat, in unterschiedlichen Browsern?

Die Navigationsleisten sind derzeit noch eine div-span-Suppe. HTML bietet dafür die Elemente ol und ul, die sich hervorragend umformatieren lassen.

Ich schau mal, was ich machen kann.

Übrigens solltest du versuchen, rein grafische, inhaltslose Layoutteile nicht mit leeren div-Elementen mit Hintergrundgrafiken umzusetzen. Nach Möglichkeit sollte man solche Element einsparen. Gut, bei dem Halbkreis ist es derzeit schwierig, auf ein zusätzliches div-Element zu verzichten - bzw. man könnte es höchstens als Container um alle anderen herum setzen, was das Element nur verschieben würde.

Wo ist denn noch ein leeres <div>-Element, oder meinst du "contentbg" usw.?
Ich wusste nicht, wie ich das sonst lösen sollte, weil man kann ja keine 2 Hinteergründe in ein <div> setzen.

[Peter]

Hallo.
Kann mir einer den Code umschreiben?
Klingt jetzt vielleicht dumm, aber ich versteh nicht, wie man die anders positionieren soll. =)

[molily]

Klingt jetzt vielleicht dumm, aber ich versteh nicht, wie man die anders positionieren soll. =)

»Schau' dir doch erstmal <http://de.selfhtml.org/css/layouts/index.htm@title=mehrere Beispiele> für "Standard-Layouts" an. Analysiere wie sie aufgebaut sind.«

»Wie gesagt solltest du dich langfristig mit float und Clearing auseinandersetzen, damit sind die Möglichkeiten größer.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout«

Mathias

[Peter]

Hallo.

So nachdem ihr mich gezwungen habt, meinen Code zu überarbeiten, hab ich alle "-px;"-Werte entfernt, sowie ein paar andere Sachen geändert. *gg*
Richtig angezeigt wird es, aber wobei ich scheitere ist, beim "relativieren" des "Link1-3"-Bereichs.
Wenn ich bei den ID's "button1-3" "position:relative;" eingebe, werden sämtliche Breiten- und Höhenangabe ignoriert.

Bitte nochmal überprüfen, ob es so gut, bzw. akzeptabel ist.
Und hat vielleicht jemand eine schönere Lösung für "box","boxbg", "content" und "contentbg"?

http://worldofgfx.wo.funpic.de/index.html

PS: Wenn ihr das Fenster minimiert und so klein macht, dass es Scrollbalken gibt und dann nach rechts scrollt, dann hört der obere Balken einfach auf.
Ist das bei höheren Auflösungen auch so?
Hat jemand eine Lösung?

Danke für eure Hilfe!
MfG!

[Beat]

Garkeine Absolute Positionierung?
Wofür wird das denn dann verwendet, wenn nicht für Homepages?

Absolute Positionierung wird von jenen irrtümlich verwendet, welche in Photoshop einen background basteln, und dann gezwungen sind, dass Elemente, egal auf welchem Bildschirm, immer an der gleichen Stelle bezogen auf den background erscheinen.

Absolute Positionierung macht sinn für Dinge die ich aus dem Fluss nehmen will

• weil sie nicht dauerhaft angezeigt werden sollen
• weil sie ein anderes Element überlagern sollen
• weil sie fixiert am Bildschirm stehen sollen

mfg Beat

[molily]

Wenn du alles absolut positionierst und damit alle Elemente aus ihrem Fluss (d.h. die normale Untereinander-Darstellung), kannst du wie gesagt nicht festlegen, dass ein Element unter einem anderen liegt. Es sei denn, du trickst ganz krass herum.

Was ginge wäre, dass du den Footer mit top: 10px; bottom: 10px o.ä. positionierst, sodass er immer unten auf der Seite angezeigt wird. Unter dem Content muss natürlich entsprechend Raum frei bleiben (den kannst du mit einem bottom-Wert für den Content reservieren).

position:relative wird dir da nicht weiterhelfen, vergiss das am besten.

Wie gesagt solltest du dich langfristig mit float und Clearing auseinandersetzen, damit sind die Möglichkeiten größer.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

Mathias