Layer Grundgerüst

[WhiteVelvet]

Ich hab hier grad folgendes kleines Problemchen: Eigentlich habe ich Websites immer über Frames erstellt, aber ich habe vor einem Jahr meine Website mit Layern gemacht (und nun wieder alles vergessen). Das waren aber nur 3 Layer und jetzt nach einem Jahr möchte ich etwas mit 5 Layern machen und verstehe die Struktur nicht mehr. Denn Layer 2/3 waren damals in Layer 1 eingeschachtelt. Muss das so sein? So solls nun aussehen:

111
234
555

Irgendwie sehe ich da keinen Sinn, Layer 1 übergeordnet zu machen, oder sollte ich von einem Layer 0 ausgehen, der alle 5 kapselt? Im Moment sind alle Layer oben links an der 1 ausgerichtet, aber wie sage ich denen, dass sie da sein sollen, wo sie hinsollen? Hat jemand ein Minimalbeispiel für mich? Vielen Dank!

[Hardwaretoaster]

Ich versteh nciht so ganz, was du meinst, zeig halt mal als Bsp. das, was du schon hast.

Ansonsten: Die Positionierung machst du mit CSS, zu Layern ...ich finde gearde keienn schönen Link, guck mal z.B. bei selfhtml...

[WhiteVelvet]

Die HTML-Datei: gelöscht
Die CSS-Datei: gelöscht

Die 5 Layer sollen wie folgt angeordnet sein:

Top (blau)
Left (rot) Middle (gelb) Right (grün)
Bottom (orange)

Im Moment ist nur der blaue Frame korrekt an der Stelle, der rote soll unten dran anschliessen, gelb und grün ebenfalls. Orange soll unten den Abschluss bilden.

[Sephiroth]

top (blau) - normales div
left, middle und right - divs die links floaten (float:left)
br - hebt float auf (clear:both)
bottom - normales div

p.s.
keine tabelle nötig

[DanMan]

top (blau) - normales div
left, middle und right - divs die links floaten (float:left)
br - hebt float auf (clear:both)
bottom - normales div

p.s.
keine tabelle nötig
Warum nicht gleich dem "bottom" clear:left verpassen? Dann kann er sich den <br> sparen.

Tabelle raus, und das hier ins CSS:
body {
background-color: #999999;
margin: 0px;
}

#layer1 {
background:#0f0;
width: 800px;
}

#layer2 {
background:#00f;
height: 254px;
}

#layer3 {
background:#ff0;
width: 386px;
height: 354px;
float: left;
}

#layer4 {
background:#f00;
width: 294px;
height: 354px;
float: left;
}

#layer5 {
background:#f90;
width: 800px;
height: 22px;
clear:left
}

[WhiteVelvet]

Vielen Dank soweit! Die Tabelle brauche ich doch, um das ganze Ding zentriert zu bekommen oder? Mit Tabelle ist im Moment aber alles linksbündig, ohne Tabelle zudem am oberen Rand ausgerichtet. Ich will ja W3C konform sein, sonst würde ich ja einfach ein Center in die Tabelle einfügen, aber das gibts ja nicht mehr ;)

[WhiteVelvet]

Sind hier so wenige CSS-Experten? :D Ist doch ne ganze leichte Frage: Wie bekomme ich den ganzen Brocken nun zentriert? Hab da jetzt schon ne ganze Weile rumgespielt aber es klappt nicht.

Ich hab übrigens noch einen Layer0 eingefügt, der alles bündelt. Ist der nötig?

[rizzotherat]

Sind hier so wenige CSS-Experten? :D Ist doch ne ganze leichte Frage: Wie bekomme ich den ganzen Brocken nun zentriert?

ergänze folgendes im css beim body-tag:
min-width: 900px;
max-width: 900px;
margin-left: auto;
margin-right: auto;

damit es auch der IE6 kapiert zusätzlich noch:
text-align: center;

dann musst du aber bei dem ersten nachfolgenden layer ein
text-align: left;
hinzufügen, weil der IE6 fälschlicherweise diese eigenschaft an unterelemente vererbt.


Ich hab übrigens noch einen Layer0 eingefügt, der alles bündelt. Ist der nötig?

brauchst du dann nicht mehr

[rizzotherat]

und schmeiss die tabelle wech! wir haben 2007, nicht 1999 ;-)

[WhiteVelvet]

Wenn ich die Tabelle wegwerfe, ist das Ding nicht mehr vertikal-zentriert ;D Ok, das wird irgendwie auch mit CSS gehen, aber wie? Ich such mal, aber vielleicht ist hier jemand schneller ;) vertical-align: middle tuts jedenfalls nicht...

EDIT: Ok, habs, vielen Dank Euch allen für die Tipps :)

[WhiteVelvet]

Noch eine Verständnisfrage zu Layern: Sind die nun ein Ersatz für Frames oder für Tables? Bei Frames war der Vorteil, dass ich beim Navigieren nicht die ganze Seite neuladen muss, sondern nur den einen Frame. Bei Tables muss ich ja alles nachladen, auch Menüs etc. Und bei Layern? Wie kann ich aus dem Menü eine Datei in einen anderen Layer laden?

[Sephiroth]

Tables haben auch weiterhin ihre Daseinsberechtigung, nur nicht für die Struktur der Webseite. Die Webseite mit Frames zu gestallten ist imo benutzerunfreundlich, da Links auf eine einzelne Seite dann meist die Startseite anzeigen oder nur auf die Frame-Seite zielen und dann fehlen die restlichen teile der Webseite (Navigation usw.).
Damit man das Menü nicht in jeder Seite pflegen muss, wird bevorzugt PHP und die Include-Funktion verwendet. Alternativ Server Side Includes, was aber recht selten bei den Hostern zu finden ist. Dazu siehe auch http://www.forum-3dcenter.org/vbulletin/showthread.php?t=363513

[rizzotherat]

Noch eine Verständnisfrage zu Layern: Sind die nun ein Ersatz für Frames oder für Tables? Bei Frames war der Vorteil, dass ich beim Navigieren nicht die ganze Seite neuladen muss, sondern nur den einen Frame. Bei Tables muss ich ja alles nachladen, auch Menüs etc. Und bei Layern? Wie kann ich aus dem Menü eine Datei in einen anderen Layer laden?

Frames haben auch eine ganze Menge Nachteile. Merh zum Thema bei Selfhtml: http://de.selfhtml.org/html/frames/layouts.htm

Wenn es Dir darum geht, nur einzelne Bereiche Deiner Website nachzuladen, kannst Du das mit AJAX sehr schön realisieren. Mit AJAX-Techniken kann man feine 'application-like' Websites produzieren. Allerdings handelt man sich andere Nachteile ein (Barrierefreiheit, setzt aktiviertes JS voraus, Navigation). Es gibt ne Menge AJAX-Frameworks, mit denen Du arbeiten kannst. Schau einfach mal in der Wikipedia unter AJAX nach.

[WhiteVelvet]

Danke für die Aufklärung, aber eigentlich möchte ich nur wissen, wie ich mit dem Button "Home" die Home-Seite in meinen Layer3 nachlade :wink: Sowas wie target="layer3" klappt nicht.

[rizzotherat]

Danke für die Aufklärung, aber eigentlich möchte ich nur wissen, wie ich mit dem Button "Home" die Home-Seite in meinen Layer3 nachlade :wink: Sowas wie target="layer3" klappt nicht.

Einzelne Bereiche nachladen/verändern ist nur mit HTML/CSS nicht möglich. Probiers mit AJAX.

Nebenbei: So dramatisch ist es nicht, dass die gesamte Seite neugeladen wird bei Klick auf 'Home'. Es kommt alles aus dem Browsercache und der Benutzer merkt die Verzögerung nur, wenn der Server, wo Dein Web liegt langsam reagiert.

[WhiteVelvet]

Hmmm hab ich befürchtet, das war eben der große Vorteil von Frames, das Navigieren ist irgendwie flüssiger gewesen. Jetzt blitzt kurz die ganze Seite auf weil sie sich neulädt. Naja... wenn man mal W3C-konform sein will ;)

EDIT: Ach mensch, ich nehm alles zurück... da blitzt ja gar nichts... sieht aus als wenn man Frames hätte... okok, vielleicht lags damals an den Browsern oder der langsameren Internetverbindung ;) Da hab ich das zuletzt ohne Frames probiert :D