[ERLEDIGT] HTML5 - floating funktioniert nicht richtig

[Kobar]

Hallo Leute, ich bin absoluter HTML- und CSS-Neuling und möchte eine kleine Seite für einen Bekannten zusammenbasteln. Ich habe gehört, dass Responsive Design eine ganz schnieke Sache ist und man das mit HTML5 erreichen kann.
Ich hab mich also an einem Tag hingesetzt und das versucht zu durchsteigen. Das Gröbste funktioniert, aber die Listenelemente wollen nicht so wie ich das gerne hätte.
Problem 1: Teile des Textes der Listenelemente verschwinden in dem panel-element beim Verkleinern des Browsers
Problem 2: sub-nav li Elemente ordnen sich beim Verkleinern des Browserfensters nebeneinander statt untereinander an

Problem 3 (kein HTML5-Problem): Ich würde gerne für die Überschriften Georgia verwenden. Im head gebe ich
<style>
uberschrift{font-family:"Georgia",georgia,serif;}
</style>
und im body z.B. folgendes ein:
<p class="uberschrift">Kuckuck</p>

Nichts passiert... Es ist immer noch die Verdanaschrift, die ich in der css-Datei angelegt habe.


Könnt Ihr mir helfen? Ich wollte erstmal die Startseite in Ordnung bringen, da ich die andren Seiten einfach kopieren möchte.
Die ersten zwei Fragen wären mir wichtiger. Es kann auch jeder sich nur eine Frage vornehmen.
Leute, vielen Dank schonmal im Vorraus als Bastler unter Bastlern :)

 

[Bennyville]

zu 1.: Das liegt am „overflow: hidden;“ der Klassen .side-nav und .sub-nav. Dadurch wird alles überstehende versteckt.

zu 2.: Du floatest die Elemente ja auch. Hier ein Auszug aus deinem Code:

.sub-nav dt, .sub-nav dd, .sub-nav li {
  float: left;
  margin-left: 0.5625em;
  margin-bottom: 1.5em;
  font-weight: normal;
  font-size: 0.875em;
}

zu 3.: Klassen werden in CSS mit voranstehendem Punkt angesprochen (.uberschrift)

Ich weiß nicht wie weit du in HTML bist. Vielleicht wäre es einfacher das ganze komplett selbst zu schreiben, um die Zusammenhänge auch zu verstehen. Nur ein kleiner Tipp von mir ;)

 

[Kobar]

Hey bennyville. Danke für die Antworten soweit!
Die letzten zwei Punkte habe ich dank dir lösen können.

Zum ersten: ja, das overflow:hidden habe ich absichtlich reingebaut, weil das besser aussieht, als wenn die Schrift aus dem Panel herausragt in den andren Textblock hinein... Und genau das ist ja das Problem. Wie kann das passieren bzw. wie kann ich das herausragen/abschneiden verhindern?
Praktisch wäre es ja, wenn die Schrift für diese kritische Stelle beim Verkleinern des Fensters kurzzeitig verkleinert wird.

Und zum Selbstbauen... Anhand des funktionierenden Templates habe ich verdammt schnell lernen können, was alles möglich ist und wie das Ganze ungefähr zusammenspielt. Schneller zumindest, als wenn ich alles von 0 aufgebaut hätte. Da kann man sich vermutlich die Köpfe heiß reden, was nun besser ist.
Ich denke, dass ich die Zusammenhänge schneller verstanden habe, aber weniger Befehle auswendig aufsagen kann.

Wieauchimmer. Gute Nacht erstmal!

 

[Bennyville]

Naja, dein aside-Element hat 16.66667% Breite und wird beim zusammenschieben immer kleiner. Bis der Text nicht mehr reinpasst.

Entweder du erhöhst die Breit des aside oder gibst dem Text eine prozentualen Größe.

 

[Kobar]

Alright! Vielen Dank Bennyville :)