Umsetzung eines Designs

[Memento]

Hallo!

Ich habe mich lange nicht mehr mit HTML/CSS beschäftigt und würde nun gerne folgendes Design für eine Homepage umsetzten (sieht so aus wie ein Monopolyspielfeld):
[url=http://img237.imageshack.us/my.php?image=planhq2.png][img=http://img237.imageshack.us/img237/9629/planhq2.th.png][/url]
http://img237.imageshack.us/my.php?image=planhq2.png

Erklärung/Anforderungen:

• der Hauptrahmen (blau) muss stets quadratisch sein; sollte sich aber nach Möglichkeit an die Breite/Höhe des Browserfensters anpassen (also je nach Auflösung ein kleineres oder größeres Quadrat; sagen wir mal 80% der Browserfensterhöhe als Seitenlänge des Quadrates)
• in die Mitte soll man nach Möglichkeit auch längere Texte setzten können; jedoch soll sich die Größe des Hauptrahmens nicht ändern -> scrollen)
• in die unteren Boxen im Hauptrahmen, sowie in den ganzen Hauptrahmen sollen Bilder, die man u.U. auch verlinken kann

Ich hoffe es kann mir jemand zumindest ein paar Hinweise geben, wie man das am besten machen kann (Ob mit Framestets, div, Tabellen, ...)

Danke!
Memento

[Malcolm Beck´s]

hi,

http://img237.imageshack.us/my.php?image=planhq2.png

• der Hauptrahmen (blau) muss stets quadratisch sein; sollte sich aber nach Möglichkeit an die Breite/Höhe des Browserfensters anpassen (also je nach Auflösung ein kleineres oder größeres Quadrat; sagen wir mal 80% der Browserfensterhöhe als Seitenlänge des Quadrates)

Das geht in richtung 3-spaltiges Layout mit Kopf- und Fußzeile

• in die Mitte soll man nach Möglichkeit auch längere Texte setzten können; jedoch soll sich die Größe des Hauptrahmens nicht ändern -> scrollen)

overflow:scroll;

• in die unteren Boxen im Hauptrahmen, sowie in den ganzen Hauptrahmen sollen Bilder, die man u.U. auch verlinken kann

Das würde auch noch gehen, nur dann hast du ein Problem mit der anpassung an das Browserfenster.
Egal, in welche Richtung du dein Browserfenster verkleinerst, die Bilder rund um den mittleren teil werden dir immer in die Quere kommen (wenn sie eine feste höhe und feste Breite haben).

mfg

[Memento]

Danke erstmal für die Antwort;

Das geht in richtung 3-spaltiges Layout mit Kopf- und Fußzeile

Ja das habe ich mir auch schon angeschaut, aber ich bekomme das mit der Verschachtelung noch nicht so gut hin

• in die unteren Boxen im Hauptrahmen, sowie in den ganzen Hauptrahmen sollen Bilder, die man u.U. auch verlinken kann

Das würde auch noch gehen, nur dann hast du ein Problem mit der anpassung an das Browserfenster.
Egal, in welche Richtung du dein Browserfenster verkleinerst, die Bilder rund um den mittleren teil werden dir immer in die Quere kommen (wenn sie eine feste höhe und feste Breite haben).

Kann man nicht beides mit relativen Angaben machen bzw. würdet ihr mir empfehlen in so einem Fall alles mit absoluten Angaben zu machen (z.B. 600x600 Pixel für den Hauptrahmen)?

Mfg
Memento

[Malcolm Beck´s]

hi,

Ja das habe ich mir auch schon angeschaut, aber ich bekomme das mit der Verschachtelung noch nicht so gut hin

Zeigen. Am besten irgendwo im Netz hochladen, so dass man es sich anschauen kann.

Kann man nicht beides mit relativen Angaben machen bzw. würdet ihr mir empfehlen in so einem Fall alles mit absoluten Angaben zu machen (z.B. 600x600 Pixel für den Hauptrahmen)?

Es geht alles, kommt halt auf dein Ziel an.
Wenn das Design wichtig ist, dann mach es[1], du kannst auch bis zu width:800px;[2] nutzen.
Mit fester Breite und fester Höhe dürfte die umsetzung des Layout keine Probleme darstellen.

mfg
[1] gleich fliegen Steine ;)
[2] das gibt ein Gemetzel ;))

[Memento]

Ok eine letzte Frage noch:

div oder table?

Mfg
Memento

[Multi]

Mahlzeit,

div oder table?

weder, noch.

[Memento]

Mahlzeit,

div oder table?

weder, noch.

Jetzt bin ich verwirrt - ich will keine Frameset-Homepage machen, falls das verstanden wurde.
Welche Möglichkeiten bleiben mir den noch?!

Mfg
Memento

[Kai345]

[latex]Mae  govannen![/latex]

div oder table?

weder, noch.

Jetzt bin ich verwirrt - ich will keine Frameset-Homepage machen, falls das verstanden wurde.
Welche Möglichkeiten bleiben mir den noch?!

Sinnvolle Auszeichnung, semantisch, der Bedeutung angepasst… Benutze Elemente, die den Sinn des jeweiligen Inhaltes/Zwecks wiedergeben, interessiere dich (noch) nicht für die Darstellung (Größe, Ränder etc.) dieser Elemente (damit ist Tablelayout ohnehin draußen). Betrachte das erzeugte Ergebnis ohne CSS. Wenn es auch dann sinnvoll strukturiert ist, gehe daran, die einzelnen Elemente/Gruppen per CSS zu stylen. Benutze überwiegend die Elemente, die schon vorhanden sind, man kann fast alle Elemente mit CSS stylen, umschließende Elemente sind sparsam anzuwenden (also z.B. nur, wenn verschiedene Elemente einen Zusammenhang haben und dies im Layout durch Gruppierung zum Ausdruck gebracht werden soll). Komme mit wenigen dieser Gruppierungs-Elemente aus. Auch body und html-Element kann man mit CSS als umschließende Elemente benuten .. etc etc.

Cü,

Kai

[Multi]

Mahlzeit,

Welche Möglichkeiten bleiben mir den noch?!

Alle Elemente, die HTML zur Verfügung stellt. Das wurde dir ja bereits erläutert.

Grundsätzlich ist ein div nur dann sinnvoll, wenn es kein anderes Element gibt, das du sinnvoll einsetzen kannst, also praktisch das letzte Mittel.

[minicrispie]

Hallo,

Das würde auch noch gehen, nur dann hast du ein Problem mit der anpassung an das Browserfenster.
Egal, in welche Richtung du dein Browserfenster verkleinerst, die Bilder rund um den mittleren teil werden dir immer in die Quere kommen (wenn sie eine feste höhe und feste Breite haben).

es sei denn es sind vektorgrafiken die man in breite und höhe anpassen kann, ohne deren form zu verändern :)
aber das ist sicher nicht die absicht des OP :)

MfG. Christoph Ludwig