CSS-basiertes Layout

[tlorenzo]

Guten Morgen!

Ich möchte eine neue Website erstellen und bin aktuell am experimetieren mit CSS-basierten Layouts. Dazu habe ich bereits die Beispiele auf selfhtml.org angeschaut und mir dabei einige Inspirationen geholt. Ich selbst besitze schulische Kenntnisse über HTML. Leider hat man zu dieser Zeit Layouts teilweise noch mit Frames und Tabellen erstellt. CSS stellt aus diesem Grund aktuell noch etwas Neuland für mich dar.

Grundsätzlich soll die Seite wie folgt aussehen:

----------- Titel -----------
--------  -------------------
--------  -------------------

• Navi -  ----- Inhalt ------
  --------  -------------------
  --------  -------------------
  --------  -------------------
  ----------- Fuss ------------

Titel und Fuss habe ich als Überschrift (H2) in CSS definiert. Für den Bereich Navigation und Inhalt habe ich jeweils einen div-Container erstellt. Der div#Navi besitzt eine Breite von 60px und der div#Inhalt beginnt bei 60px.

Grundsätzlich funktioniert das Layout, leider habe ich Probleme sobald ein Browser verkleinert wird und im Bereich Inhalt ein langer Text oder z.B. eine Tabelle angezeigt wird. Die darin enthalten Texte werden bei entsprechend kleiner Fenstergröße aus dem div#Inhalt rausgeschoben, so dass das gesamte Layout zerschossen wird.

Gibt es eine Möglichkeit eine Mindestgröße festzulegen, bei der anschließend eine Scrollbar für links / rechts scrollen erscheint? Wie löse ich das Problem?

Habt ihr noch ein paar gute Links zum Thema css-basierte Layouts wo ich mich weiter mit der Thematik beschäftigen und meine Kenntnisse ausbauen kann?

[Felix Riesterer]

Lieber tlorenzo,

Dazu habe ich bereits die Beispiele auf selfhtml.org angeschaut und mir dabei einige Inspirationen geholt.

Inspirationen sind schonmal gut.

Ich selbst besitze schulische Kenntnisse über HTML. Leider hat man zu dieser Zeit Layouts teilweise noch mit Frames und Tabellen erstellt.

Na, dann nix wie los und es <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=richtig lernen>!

Grundsätzlich soll die Seite wie folgt aussehen:

----------- Titel -----------
--------  -------------------
--------  -------------------

• Navi -  ----- Inhalt ------
  --------  -------------------
  --------  -------------------
  --------  -------------------
  ----------- Fuss ------------

Also in etwa so? <http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm@title=2-spaltiges Layout>

Titel und Fuss habe ich als Überschrift (H2) in CSS definiert.

Nein, Du hast in HTML den Titel und den "Fuss" mit <h2> ausgezeichnet, welches Du mittels CSS layoutest. Ob das mit <h2> so sinnvoll war, müsste man einmal überdenken. Das obige 2-Spalten-Beispiel zeigt Dir Alternativen.

Für den Bereich Navigation und Inhalt habe ich jeweils einen div-Container erstellt.

Das kann sinnvoll gewesen sein, oder auch nicht. Wenn in diesen "div-Containern" nur ein einziges Element steht, dann kannst Du deren ID gleich ihren Einzelkind-Elementen zuweisen und auf die "div-Container" verzichten.

<div id="navi">  
    <ul>...</ul>  
</div> <!-- unnötig -->  
  
<ul id="navi">...</ul> <!-- reicht völlig -->

Der div#Navi besitzt eine Breite von 60px und der div#Inhalt beginnt bei 60px.

Wie auch immer. So sagt mir das absolut garnichts.

Die darin enthalten Texte werden bei entsprechend kleiner Fenstergröße aus dem div#Inhalt rausgeschoben, so dass das gesamte Layout zerschossen wird.

Dann machst Du entweder etwas auf nicht besonders sinnvolle Art, hast einen Denkfehler oder nur die overflow-Eigenschaft nicht passend verwendet.

Gibt es eine Möglichkeit eine Mindestgröße festzulegen, bei der anschließend eine Scrollbar für links / rechts scrollen erscheint? Wie löse ich das Problem?

Keine Ahnung, ich kenne Deine Seite nicht.

Habt ihr noch ein paar gute Links zum Thema css-basierte Layouts wo ich mich weiter mit der Thematik beschäftigen und meine Kenntnisse ausbauen kann?

Verarbeite ersteinmal die bereits angegebenen. ;-) Wenn Du da durch bist, oder mittendrin stecken bleibst, dann fragst Du hier wieder!

Viel Erfolg und liebe Grüße,

Felix Riesterer.

[Ulysses]

Hi!

Nein, Du hast in HTML den Titel und den "Fuss" mit <h2> ausgezeichnet, welches Du mittels CSS layoutest. Ob das mit <h2> so sinnvoll war, müsste man einmal überdenken. Das obige 2-Spalten-Beispiel zeigt Dir Alternativen.

Hier darf ich noch den Artikel „Hinweise zu Überschriften und Hierarchien“ von Meiert nachreichen.
FG Ulysses