Liebes Girlfrommars13,

Es ist nun - für's erste - etwas übersichtlicher (wenn man mal von der "Div-Wüste" und nun auch "Img-Wüste" absieht) und wird auch in Safari zumindest so angezeigt (mit der großen Menüleiste unten), wie es aussehen soll.

Dein HTML-Code enthält einige Teile, die lediglich für das Aussehen der Seite ("Design") genutzt werden. Das sollte so nicht sein. Alles, was das Aussehen steuert, sollte über CSS realisiert werden. Dieser Baum links oben sollte rein über ein Hintergrundbild umgesetzt sein, keinesfalls jedoch von <img>-Elementen!

Was die eigentlichen Inhalte der Seite angeht, so solltest Du für Überschriften tatsächlich <h1>, <h2>... <h6> benutzen, für Textabsätze <p>, für Listen <ul> oder <ol> (je nachdem, ob die Reihenfolge wesentlich ist), für die Navigation <nav> (wenn Du den neuen HTML5-Doctype einsetzt, ansonsten gerne <div id="nav"> stattdessen).

Gerade für das visuelle Gestalten einer Navigation ist CSS sehr gut geeignet. [Beispiel]

habe ich das jetzt mal für die Seite http://www.riekmund.com/projectweddingsdress.html probiert für dieses kleine Menü.

In der URL ist wohl ein "s" nach "wedding" zuviel: http://www.riekmund.com/projectweddingdress.html

Das Problem ist jetzt hierbei, sobald sich die/das Browserfenstergröße/-format verändert, verschiebt sich auch dieses Menü wieder.

Du hast es noch nicht so umgesetzt, wie es im oben verlinkten CSS-Kapitel erklärt wird. Wenn die Darstellung rein mit CSS gesteuert wird, dann ist das heutzutage schon sehr robust und "funzt einwandfrei". Das setzt aber auch ein vernünftiges Markup (semantischen HTML-Code) voraus.

Ich fürchte, das mit margin und padding hab ich noch nicht so ganz verstanden. Ich habe versucht, das Element am unteren und rechten Browserfensterrand auszurichten (margin-bottom, margin-right). Das funktionierte nicht, das Element hat sich gleich mittig an den oberen Rand verbarrikadiert, egal welche Werte ich eingegeben habe.

Diese beiden Eigenschaften (margin und padding) haben wesentlich mit dem Box-Modell zu tun. Dieses müsstest Du verstehen, um diese beiden Eigenschaften sinnvoll einzusetzen. Für Deinen konkreten Zweck benötigst Du anscheinend außerdem noch das Konzept der absoluten Positionierung.

Bzgl dem <br>, was würde man denn innerhalb eines Textes für einen Zeilenumbruch verwenden?

Üblicherweise ist Text in Absätze aufgeteilt. Bei der korrekten Verwendung mehrer <p>-Elemente sollte ein Zeilenumbruch wie zu erwarten vorgenommen werden. Für einen Zeilenumbruch innerhalb eines Absatzes ist <br> sinnvoll und richtig, es ist aber keinesfalls ein "Abstandhalter" zwischen beispielsweise <img>- und <ol>-Elementen! Dafür brauchst Du das oben schon erwähnte Box-Modell und die margin-Eigenschaft.

Nebenbei: <img>-Elemente sind inline-Elemente (denke "Smiley"), die wie ein Wort im Fließtext in einem umspannenden Block-Element liegen sollten/müssen (je nach verwendetem Doctype), damit Dein HTML laut Spezifikation korrekt ist. Für mich bedeutet das als Faustregel, dass ein <img> mindestens in einem <p> stehen muss, alternativ natürlich <li> oder <h1-6>. Die anderen Block-Elemente (<div>, <section>, <article>, <nav>...) finde ich weniger geeignet, da sie ihrerseits <p>, <li> (natürlich innerhalb <ol>/<ul>) und <h1-6> enthalten können. Rein der Dokumentstruktur nach fehlt da das eigentliche Text-Element innerhalb dessen das Bild eingebunden ist.

In HTML5 findest Du insbesondere <figure> für Abbildungen. Das ist natürlich sehr zweckgebunden (eben Abbildungen) und für den Smiley im Fließtext eher nicht geeignet.

Ich möchte halt erreichen, dass alle Elemente sich an die Größe des Fensters anpassen. Ähnlich wie hier: http://www.carlosfernandez.de/index.php?page=contact (wenn auch das bestimmt mit irgendeinem Baukastensystem hergestellt wurde und keine "freie Programmierung" war?!)

Dazu benötigst Du noch mehr CSS. Die sogenannten "media queries" ermöglichen es, für bestimmte Fenstergrößen (also das, was man auch als "Viewport" bezeichnet) angepasste Layoutangaben (z.B. in eigens dafür angelegten CSS-Dateien) zu machen. Das wäre aber erst der nächste Schritt nachdem Du Deine Seite mit vernünftigem Markup erstellt hast.

Liebe Grüße,

Felix Riesterer.