Hallo
Ich bekomme aber den Text in einem Div um's verrecken nicht am unteren Ende des Divs ausgerichtet.
Die beiden div #titel_text und #nav sind nicht nebeneinander sondern untereinander. Deshalb kann der Inhalt der beiden div auch nicht nebeneinander stehen.
Grundsätzlich solltest du dir überlegen aktuelles HTML / CSS zu verwenden und die Grundlagen zu lernen. XHTML ist bereits vor über 8 Jahren offiziell begraben worden und sollte seitdem nicht mehr verwendet werden. Und für den Quelltext gibt es einige ungeschriebene Regeln, deren Einhaltung sich beim Erstellen vom Layout bewährt hat.
Das ist ein Hinweis, der mit deinem aktuellen Problem nichts zu tun hat, aber dir zukünftige Probleme vermeiden hilft.
Zu deinem aktuellen Problem:
Du verwendest float ohne die Auswirkungen gelernt zu haben. Zum Beispiel wie korrekt gecleart wird und was mit "globaler Auswirkung" vom clear gemeint ist. Ich habe mal drei Infoseiten dazu herausgesucht:
http://little-boxes.de/lb1/13-float-schwebende-boxen.html
und die folgenden Kapitel
http://www.andreas-kalt.de/webdesign/tutorials/float-theorie
http://www.thestyleworks.de/basics/float-rule.shtml
In deinem Beispiel sorgt das clear
Code:
#nav {
...
clear: left;
}
dafür, dass die Navigation immer unter dem vorherigen Text in #titel_text angeordnet wird. Das muss also gelöscht und anschließend die Abstände angepasst werden, um alles auf eine Höhe zu bringen. Das float in der Navigation muss dann wahrscheinlich auch korrigiert werden (clearfix). Das sollte nach dem Lernen von float aber kein Problem mehr darstellen.
Wobei float nicht zum links- oder rechtsbündigen Ausrichten von Elementen gedacht ist.
Nachtrag:
Ich habe mal eine Testseite mit aktuellem HTML / CSS und einigen Optimierungen erstellt:
http://boratb.bplaced.net/spikydesign_net/2016_10_01_johnny82_01_layout.html
So ist unter anderem die Grafik als jpg-Datei ohne den weißen Rand gespeichert und spart so 4/5 des Übertragungsvolumens. Da der Rahmen und die Drehung per CSS gestaltet sind können sie für schmale Fensterbreiten angepasst werden, so dass die Grafik dort möglichst groß angezeigt werden kann.
Oder statt float / clear wird Flexbox verwendet.
Abstände, Rahmen, Größen, Schriftarten und so weiter können natürlich noch weiter angepasst werden. Für noch schmalere Fenster können auch weitere Media Queries hinzugefügt werden.
Nachtrag 2:
Der Grafik mittels figcaption eine Bildbeschreibung hinzugefügt.
Gruss
MrMurphy
