Dreispaltiges Layout

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich versuche mich an einem Webseiten-Layout. Dazu möchte prinzipiell ein dreispaltiges Layout verwenden. Ob man die ganze Geschichte wirklich über Spalten löst oder ob es Besseres gibt, möchte ich gerne von euch wissen.

Bei den Beispielen, die ich bisher ausfindig gemacht habe, wird immer auf den linken Bereich aufgebaut. z.B.

#links{
float: left;
width: 12em;
}

#mitte{
margin-left: 12em;
width: 20em;
}

#rechts{
margin-left: 32em;
width: 15em;
}

Manchmal wird auch bei #rechts noch float: right; angegeben.

Im Unterschied zu dem beschriebenen Beispiel möchte ich aber den mittleren Bereich fokusieren. Heißt, der mittlere Bereich soll eine feste Größe erhalten, z.B. 400px, der sich auch nie verändert, egal wie groß das Browserfenster tatsächlich ist.

Der linke und rechte Bereich sollen auf die verbleibende Größe aufgeteilt werden bzw. nicht angezeigt werden, wenn das Browserfenster kleiner ist als der fest angegebene Bereich oder gleich groß.

Nochmal kurz:
Linker Bereich flexibel - mittlerer Bereich unveränderlich - recht Bereich flexibel

Kann mir jemand nen Tip geben, wie ich das erreiche?

Vielen Dank dafür bereits im Voraus!

VG

Holger

#2

Moin!

ganze Geschichte wirklich über Spalten löst oder ob es
Besseres gibt, möchte ich gerne von euch wissen.

Kommt darauf an, was man unter „Spalten“ versteht. Im Sinne von Tabellen wäre es falsch, aber wenn Du drei Bereiche festlegst, die nebeneinander stehen, dann sind das ja auch Spalten.

Bei den Beispielen, die ich bisher ausfindig gemacht habe,
wird immer auf den linken Bereich aufgebaut. z.B.

Eigentlich wird hier auf dem float aufgebaut. Ein Bereich links (float:left), ein Bereich rechts (float:right) und das verbleibende Block-Element liegt dann zwangsläufig in der Mitte, der Inhalt dessen zwischen den beiden anderen Elementen.

Hierzu als Lektüre: Irgendwas über das Box-Model, damit Du weißt, was Block-Elemente sind und wie die sich verhalten.

#links{

Schlechte Idee.
Benenne die Bereiche mit semantischer Aussage, also was sie bedeuten, gib ihnen niemals Namen, die sich aufs Layout beziehen. Wenn Du das mal von links auf rechts ändern willst, hast Du den Salat.

Manchmal wird auch bei #rechts noch float: right; angegeben.

Macht Sinn.

Heißt, der mittlere Bereich
soll eine feste Größe erhalten

Wenn Du schon den beiden anderen Bereichen eine feste Größe gibst, warum dann auch dem mittleren? Dann kommst Du ja wieder in die Situation eines fixen Layouts, ohne dass Du die Größe des Viewports Deiner Nutzer kennst.

z.B. 400px, der sich auch nie
verändert, egal wie groß das Browserfenster tatsächlich ist.

Was bedeuten würde, dass Du horizontale Scrollbalken durchaus gut findest.

Der linke und rechte Bereich sollen auf die verbleibende Größe
aufgeteilt werden

Das wird dann aber ein Problem, weil Du damit eine prozentuale Größe angeben willst, dem zentralen Bereich aber eine Größe in Pixeln. Mit verschiedenen Einheiten rechnen kann man nicht. 100% - 400px / 2 geht nicht als Breitenangabe.

Andersrum wäre es besser und IMHO sinnvoller. Feste Breiten für die Seiten und wenn Du dem zentralen Bereich dann keine Größe gibst, nimmt er immer 100%, also faktisch den Rest des Viewports ein.

bzw. nicht angezeigt werden, wenn das
Browserfenster kleiner ist als der fest angegebene Bereich
oder gleich groß.

Jetzt wirds haarig. Wozu sind dann die beiden Spalten an den Seiten überhaupt da? Die können ja nichts wichtiges enthalten, wenn Du von vornherein in Kauf nimmst, dass sie nicht mehr angezeigt werden.

Kann mir jemand nen Tip geben, wie ich das erreiche?

Prompt fallen mir da nur negative Positionierungen ein, aber ich würde gerne nach den Sinn des Ganzen fragen.

Grüße,
-Efchen

#3

Hallo Efchen,

erst einmal vielen vielen Dank für die ausführliche Antwort.

Du hast völlig richtig erkannt, in den äußeren Bereichen steht nix wichtiges - und ich präzisiere - da steht gar nix.

Die äußeren Bereiche, so sie denn gebraucht werden, dienen lediglich dazu, den mittleren Bereich seitenzentriert darzustellen. Aber wie gesagt, ich lasse mich da gerne belehren, wenn es etwas besseres gibt - immer her damit.

Es geht darum, dass ein Navigationsmenü inklusive der zugehörigen Anzeigen (die sind unmittelbar unterhalb der Menüleiste angebracht) im horizontalen Zentrum der Seite zu halten.

Zum Thema horizontale Scrollbalken: ein Fan davon bin ich nun nicht gerade. Eine Menüleiste, die auf Grund eines zu kleinen Browserfensters nur noch in teilen waagerecht angezeigt wird und sich dann mehr oder weniger unkontrolliert über den Bildschirm verteilt, finde ich noch schlimmer.

Da die Seite ein offizieller Internetauftritt werden soll und keine private Spielerei ist, muss ich auf solche Geschichten schon Acht geben.

VG

Holger

#4

Du hast völlig richtig erkannt, in den äußeren Bereichen steht
nix wichtiges - und ich präzisiere - da steht gar nix.

Dann haben sie keine Existenzberechtigung.

Die äußeren Bereiche, so sie denn gebraucht werden, dienen
lediglich dazu, den mittleren Bereich seitenzentriert
darzustellen.

Das ist aber Unfug. Du erstellst mit HTML bestimmte Bereiche, um dann Layout zu machen. HTML ist aber nicht für das Layout zuständig, sondern CSS.

Wenn Du etwas horizontal zentriert darstellen willst, warum zentrierst Du es dann nicht einfach?

Für Block-Elemente gilt „margin:0 auto“.

Aber wie gesagt, ich lasse mich da gerne
belehren, wenn es etwas besseres gibt - immer her damit.

Naja, wenn ich zentrieren will, dann suche ich doch nach einer Möglichkeit zum Zentrieren :smile:
und nicht nach Lösungen, die zusätzliche, sinnfreie Elemente einbauen und nach Lösungen, Elemente auf eine bestimmte Breite zu bringen…

Es geht darum, dass ein Navigationsmenü inklusive der
zugehörigen Anzeigen (die sind unmittelbar unterhalb der
Menüleiste angebracht) im horizontalen Zentrum der Seite zu
halten.

Das nennt sich „zentrieren“.

Zum Thema horizontale Scrollbalken: ein Fan davon bin ich nun
nicht gerade. Eine Menüleiste, die auf Grund eines zu kleinen
Browserfensters nur noch in teilen waagerecht angezeigt wird
und sich dann mehr oder weniger unkontrolliert über den
Bildschirm verteilt, finde ich noch schlimmer.

Die ist aber einfacher und bequemer zu bedienen, als mit Scrollbalken. Vor allem, wenn Du keine Maus hast. Probiers mal aus.

Da die Seite ein offizieller Internetauftritt werden soll und
keine private Spielerei ist, muss ich auf solche Geschichten
schon Acht geben.

Eben. Also keine Scrollbalken und Rücksicht auch auf Leute ohne Maus und mit kleinen Viewports.

Schönes Wochenende,
-Efchen

P.S.: Wenn Du schreibst, das muss ein gelungener Auftritt werden, aber versuchst, Layout mit HTML zu machen - weißt Du dann überhaupt, wozu HTML da ist? Trennst Du Inhalt und Layout strikt? Du nutzt HTML nur für die Semantik des Inhalts? Falls nicht, und Du nach Lektüre der Einführung, die in FAQ:1161 verlinkt ist, noch Fragen hast, dann rühr Dich!

#5

Hi Efchen,

nix für ungut, aber wer sagt denn was von HTML-Layout?
Die Beispiele im ersten Beitrag sind doch schon in CSS-Syntax verfasst…

Ich habe wahrscheinlich zu wenige Details preis gegeben…
Völlig ohne Lösungsansatz beschrieben, möchte ich folgendes erreichen

Am Seitenkopf ist ein Balken ohne Rand nach oben, links oder rechts.
Zentriert darin ein linksbündiger Text und ein rechtsbündiger Text.

Unter diesem Kopfbalken soll wiederum zentriert - exakte Maße wie der obige, zentrierte Bereich, das Menü entstehen.

NIX - linker Text #LEER# rechter Text - NIX
NIX - …Menüleiste… - NIX
NIX - …weitere Seite… - NIX

VG

Holger

1 Like
#6

Moin!

nix für ungut, aber wer sagt denn was von HTML-Layout?

Na, ich glaub, das war ich, oder?

Die Beispiele im ersten Beitrag sind doch schon in CSS-Syntax
verfasst…

CSS ist immer in CSS-Syntax. Wenn Du aber zwei Elemente in HTML anlegst, um diese dazu zu benutzen, einen dritten zu zentrieren, dann benutzt Du diese HTML-Elemente ja rein fürs Layout. Sie zeichnen keinerlei Inhalt aus.

Ich habe wahrscheinlich zu wenige Details preis gegeben…

Das ist gut möglich :smile:

Unter diesem Kopfbalken soll wiederum zentriert - exakte Maße
wie der obige, zentrierte Bereich, das Menü entstehen.

NIX - linker Text #LEER# rechter Text - NIX
NIX - …Menüleiste… - NIX
NIX - …weitere Seite… - NIX

Naja, da sehe ich nirgendwo die Notwendigkeit von inhaltsleeren Blöcken links und rechts.

Nachdem ich ja schon geschrieben habe, wie man Block-Elemente horizontal zentriert, muss ich nachfragen: Was ist die Frage? Was möchtest Du nun genau wissen? Woran scheiterst Du? Wenn Du schon was hast, wo ist der Link zur Seite?

Denn den kompletten Code sollst ja Du schreiben, nicht ich :smile:

Liebe Grüße,
-Efchen

#7

Hi!

Keiner erwartet, dass du mir Quelltext vorbetest…

Wenn ich einen größeren Bereich in zwei Kleinere aufteile - der Balken am oberen Bildrand - dann stehen die inner Elemente (Links und Rechts) nicht nebeneinander sondern untereinander. Daran ändert auch margin: 0 auto; nix. Mit Float: Left; komme ich da genauso weit.

Solange der Kopfbalken nicht vernüftig steht, brauche ich nicht weiter zu machen, weil der Rest der Seite ganz genau so ausgerichtet ist.

Die Seite ist noch nicht online, da noch nix da steht.

VG

Holger

#8

Wenn ich einen größeren Bereich in zwei Kleinere aufteile -

Ich nehme an, Du verwendest dazu Block-Elemente?

der Balken am oberen Bildrand - dann stehen die inner Elemente
(Links und Rechts) nicht nebeneinander sondern untereinander.

Ja, das ist das normale Verhalten von Block-Elementen. Um ein Block-Element nach links, das andere nach rechts zu bekommen, gibt man ihnen float:left bzw. right mit. Die gefloateten Elemente müssen im HTML-Code vor dem mittleren, ungefloateten Element kommen.

Daran ändert auch margin: 0 auto; nix.

Nein, das zentriert ja auch nur einzelne Block-Elemente. Und sehen tut man daran ja auch nur etwas, wenn das Block-Element eine fixe Größe ungleich 100% bekommt, denn 100% breite Elemente sind natürlich immer zentriert.

Mit Float: Left; komme
ich da genauso weit.

Das kann ich mir nur schwer vorstellen.

Die Seite ist noch nicht online, da noch nix da steht.

Wenn da nix steht, wirst Du es selbst auch nur schwer ausprobieren können. In jedem Falle solltest Du an diesem Zustand was ändern, dann muss ich nicht Rätselraten. Denn irgendwas musst Du wohl falsch machen.

Text
Text
Text
 

#Bereich1 {
 display:block;
 float:left;
}
#Bereich2 {
 display:block;
 float:right;
}

Das sollte doch Deinen Anforderungen genügen, oder (Code ungetestet)?

#9

Ja, der Quelltext macht tatsächlich was er soll :smile:

display: block; taucht hier zum ersten Mal auf.

Egal, es tut ja jetzt :smile:

Vielen Dank für deine Geduld!

VG

Holger

#10

display: block; taucht hier zum ersten Mal auf.

Jein. Schon vorher habe ich von Block-Elementen gesprochen.
Du solltest Dich also mal in das Box-Model einlesen, wenn Du das als Grundlage nicht beherrschst, kriegst Du nichts auf die Reihe, weil Du ja gar nicht verstehst, wie sich die verschiedenen Elemente verhalten bzw. was richtiges und was falsches Verhalten ist. Ohne dieses Verständnis gehts nicht.

Egal, es tut ja jetzt :smile:

Schlechte Einstellung. Darauf kann man nur antworten „Bis zur nächsten genauso gearteten Frage“.

Ist aber als Ermutigung gedacht, Dich mal des Themas anzunehmen.

Vielen Dank für deine Geduld!

Gerne, wenn Du was draus lernst; ärgerlich wenn Du nicht an den Grundlagen interessiert wärest und Dich auf Foren wie dieses verließest.

Liebe Grüße,
-Efchen

#11

Bereits in der Eingangsfrage stand:

_Ob man die ganze Geschichte wirklich über Spalten löst oder ob es Besseres gibt, möchte ich gerne von euch wissen _

Heißt, die Frage war, löst man die Problemstellung so oder besser auf anderem Wege. Es gibt also wahrlich keinen Grund mir bei jedem Satz vorführen zu wollen, wie dämlich ich bin.

Heißt auch, dein Quelltext hätte auch als Antwort auf meinen ersten Beitrag stehen können.

Eines noch: Mit Sätzen a là

Gerne, wenn Du was draus lernst; ärgerlich wenn Du nicht an den
Grundlagen interessiert wärest und Dich auf Foren wie dieses
verließest.

kann ich nicht.

Damit machst du aus einer simplen Frage nach einem sinnvollen Lösungsweg eine Moralpredigt, wie man sich denn trauen kann, ein Forum mit solch simplen Fragen zu belästigen.

Dem Forumsgedanken wird das nicht gerecht.

VG

Holger

1 Like
#12

Heißt, die Frage war, löst man die Problemstellung so oder
besser auf anderem Wege. Es gibt also wahrlich keinen Grund
mir bei jedem Satz vorführen zu wollen, wie dämlich ich bin.

Ich verstehe nicht…? Wieso dämlich?

Heißt auch, dein Quelltext hätte auch als Antwort auf meinen
ersten Beitrag stehen können.

Hätt, hätt, naja, stand aber nicht.
Da stand noch was von dreispaltigem Layout da, nicht von Textbausteinen, die einmal links- und einmal rechtsbündig stehen sollen.

Eines noch: Mit Sätzen a là

Gerne, wenn Du was draus lernst; ärgerlich wenn Du nicht an
den
Grundlagen interessiert wärest und Dich auf Foren wie dieses
verließest.

kann ich nicht.

Was heißt das? Was kannst Du nicht?

Damit machst du aus einer simplen Frage nach einem sinnvollen
Lösungsweg eine Moralpredigt, wie man sich denn trauen kann,
ein Forum mit solch simplen Fragen zu belästigen.

Echt? Na, das hast Du aber gründlich falsch verstanden. Ich habe damit nur ausdrücken wollen, dass ich bemüht bin, nachhaltige Hilfe zu leisten und es schade, bisweilen auch traurig, finde, wenn jemand nur die Lösung abgreifen, aber daraus nichts für die Zukunft lernen will.
Ist doch blöde, oder? Stell Dir vor, Du versuchst jemandem was zu erklären, und der stellt die selbe Frage drei Stunden später wieder.
Das senkt die Bereitschaft, jemandem zu helfen.

Dem Forumsgedanken wird das nicht gerecht.

Das, was ich da eben geschrieben habe, was ich erhoffe, dass es nicht eintritt, entspricht auch nicht dem Forumgedanken.

Mir reicht doch zu wissen, dass Du Dich mit dem Box Model beschäftigst. Ansonsten verstehe ich Dein Posting überhaupt nicht, es ist plötzlich so abweisend in einem ansonsten doch wohl sehr fruchtbaren Thread!

Grüße,
-Efchen

#13

Okay,

möglicherweise bin ich heute auch etwas überempfindlich. Der ganze Beitrag, insbesondere der Abschluss, klang einigermaßen
herablassend.

Grundsätzlich stimme ich dem Gedanken der Nachhaltigkeit zu. Habe
selber viele Beiträge als Helfer geschrieben und weis wovon du da
sprichst. Gehe aber bitte nicht grundsätzlich davon aus, dass sich
jeder nur schnell eine Lösung erschleichen will und kein Interesse
für das Thema zeigt.

VG

Holger

1 Like
#14

möglicherweise bin ich heute auch etwas überempfindlich. Der
ganze Beitrag, insbesondere der Abschluss, klang einigermaßen
herablassend.

Das kommt möglicherweise daher, weil ich Dir empfohlen habe, das Box Model zu lernen, Du das aber vielleicht bereits kennst. Das ist dann aber ein klassisches Missverständnis, weil ich ja nicht wissen kann, ob Du das schon kennst oder nicht, aber meine Texte nicht mit etlichen "wenn"s und „falls“ usw. formulieren will. Und wenn Du das Box Model kennst, es hier aber nicht anwenden konntest, dann musst Du Dich bei so einer Aussage fast zwangsläufig fühlen, als wollte ich Dir sagen, wie doof Du bist. Aber all das beruht nur auf Missverständnissen, weil Du nichts über mich weißt und ich nichts über Dich. Daher sollte man Beiträge in Foren immer nur mit äußerster Vorsicht genießen und sich immer vor Augen halten, dass in den allerwenigsten Fällen - oder gemäß Netiquette eigentlich niemals - etwas persönlich gemeint ist.

Gehe aber bitte nicht grundsätzlich davon aus, dass
sich jeder nur schnell eine Lösung erschleichen will und kein
Interesse für das Thema zeigt.

Das tue ich nicht. Wenn ich das täte, würde ich niemandem mehr helfen wollen. In Deinem Falle hatte ich nur den Eindruck bekommen, dass Du das Box Model nicht kennst, nicht weißt, was Block- und Inline-Elemente sind und wie die sich verhalten. Daher fand ich es sinnvoll, Dich darauf hinzuweisen, dass Du Dir da ganz viel Basiswissen holen kannst, mit dem solche Probleme wie das in diesem Thread gar nicht erst zu echten Problemen werden.

Weiterhin viel Erfolg und Grüße,
-Efchen

#15

Eigentlich interresiert mich weniger die philosophy …

Was mich interressiert ist immer noch die Aufgabenstellung.

Also es soll irgentwas mittig gehalten werden, und immer zentriert, und es soll egal sein ob die Seiten , wenn der ViewPort zu klein wird, einfach verschwinden.

Das ist einfach :smile:

wenn dir das beispiel zusagt
http://www.legioneuropa.byethost7.com/css/die%20mitt…

ansonsten nochmal drüber reden … und nicht soviel beleidigt sein . Willst du profi sein , braucht es nun auch einmal eine profi rangehensweise und da liegt efchen im vorteil .

warten wir der dinge bis die lösung da ist.

1 Like
#16

Hallo lacta alea est,

danke für das Beispiel, das hilft mir weiter.

Zum Thema ‚beleidigte Leberwurst‘ habe ich mich glaube ausreichend geäußert.

VG

Holger