CSS-basiertes Layout

[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.