Hallo allerseits,

ich arbeite gerade an einem Layout für ne kleine Seite und bin da auf ein paar Probleme gestoßen mit denen ich nun seit Mittwoch kämpfe. Jetzt dachte ich schreib ich mal, bestimmt haben die Profis hier gute Vorschläge

Würde mich freuen wenn Ihr zu Euren Vorschlägen auch kurz erklären könntet wieso dieser Fehler entstanden ist, damit ich es richtig verstehe. Danke!

Hier ist die Seite zum gucken: http://goo.gl/BFGSpO

Ich hab da jetzt alles in einer Datei zusammengefasst, damit es leichter zum untersuchen ist

Also es gibt wie gesagt mehrere Probleme, ich versuche jetzt mal aufzuzählen, wenn ich was vergesse, füge ich es später an:

1. Der Footer sitzt ganz unten am Rand, wenn es bei mir in Fullscreen ist, aber bei Verkleinerung des Fenster, entsteht ein Spalt.
2. Sobald die Seite auch nur ein kleines bisschen in der Höhe verkleinert wird, erscheint rechts die Scrollbar. Wobei da eigentlich noch gar nichts zum Scrollen da ist... (Ich denke das gehört mit zu Punkt 1?)
3. Für die Schriftgröße unten hab ich jetzt das neue "vh" benutzt, aber wenn die Fensterhöhe sehr verkleinert wird, wird auch die Schrift sehr sehr stark minimiert. Habt Ihr dafür bessere Vorschläge? Vielleicht auch etwas, das bessere Browserunterstützung bietet? Ich mag hierbei, dass es so stufenlos ist. Gerne auch mit jQuery o.ä., falls es da was gibt.
4. der Wrapper wird nicht ganz zentriert dargestellt. Hab das mit den Minuswerten probiert, aber irgendwie kommt das nicht ganz richtig hin. Ich musste etwas mit den Werten spielen, damit es einigermaßen passt, aber so ist es eben nur bei mir und nicht auf einem anderen Monitor, was ja dann schlecht ist...
5. Genau so der content-div, der im Wrapper ist, der soll darin zentriert werden. Ich habe es zwar zwischenzeitlich geschafft diesen horizontal zu zentrieren mit margin, aber vertikal hat nicht geklappt. Daher alles wieder auf 0 um von neuem zu starten.
6. Bei Verkleinerung des Fensters rutscht der Wrapper in den Footer hinein. Dabei sollte der Footer sich eigentlich auch mit dem Inhalt verkleinern, sodass immer ein gewisser Abstand zwischen Footer und contentWrapper bleibt.
   (Genau so auch mit dem Header)
7. Achso, die Größe des contentDiv sollte sich anhand der Größe des Wrappers verändern. Daher möchte ich da eigentlich ungerne eine Größenangabe machen, sondern lediglich mit margin (oder padding) arbeiten. Geht das?
   Scrollbar sollte eben nur dieser contentDiv sein. (Bis zu einem gewissen Grad natürlich, irgendwann muss man auch das ganze Fenster scrollen wenn zu sehr verkleinert wird)

Ok, ich weiß das ist jetzt einiges, aber wie gesagt freue mich über jede Hilfe, sodass ich es auch verstehe. Ich habe aber auch die Vermutung, dass alle bzw. die meisten dieser Punkte zusammenhängen, kann das sein? Also ein paar kleine Fehler, die sich durchziehen und alles versauen *hehe* Ist ja oft so....

Besten Dank schon mal im Voraus!

Ich gehe jetzt nicht auf deine Punkte ein.
Aber zwei Dinge sage ich mal.
a) das Element <content> gibt es nicht
b) das position: absolute macht alles kaputt und MUSS entfernt werden

Und jetzt schön von vorne anfangen

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Hallo

Nein, da muss ich dich leider entttäuschen. Deine Probleme liegen tiefer.

HTML und CSS unterliegen bestimmten Regeln, an die man sich halten soll, grade als Anfänger. Es gibt Regel, die beachtet werden müssen und Vorgehensweisen, die zwar nicht festgeschrieben sind, deren Anwendung sich aber bewährt hat, die sogenannten "Best Practices".

Weiterhin haben sich einige Lösungen als benutzerfreundlich und andere als benutzerunfreundlich herausgestellt.

In den letzten Jahren hat es mit dem Aufkommen von Tablets und Smartphones einerseits sowie von HTML5 und CSS3 andererseits gewaltige Änderungen gegeben, ähnlich der Einführung von CSS2 im Jahr 2000.

Deine Vorstellungen sind leider veraltet und du willst Lösungen, die sich als benutzerunfreundlich "bewährt" haben, die demnach kein ernsthafter Webseitenersteller freiwillig anwendet. Dafür wirst du kaum Hilfe finden.

Du willst im Endeffekt ein Tabellenlayout mit anderen Mitteln nachbauen - das wird nicht funktionieren.

Das geht schon mal damit los, das du deine Seite unbedingt auf eine bestimmte Fenstergröße anpassen willst - vergiß das gleich mal wieder.

Du suchst nach "Sticky Footer". Das ist so ein Problem, für das HTML und CSS gar nicht gedacht sind. Deshalb gibt es dazu nur Hilfslösungen, die mehr oder weniger taugen. Allerdings kaum zusammen mit deinen anderen "Wunsch"vorstellungen.

Das ist normal und wird von den Usern so erwartet. Wenn bei mir der Scrollbalken erscheint kann ich auch scrollen. Das dann keine zusätzliche Infomationen erscheieinen liegt an deiner restlichen Gestaltung.

vh ist keine Schriftgröße für Fließtext. Da ist rem aktuell am sinnvollsten.

Es ist generell benutzerunfreundlich, die Schrift beim zoomen oder bei Verkleinerung des Fenster kleiner werden zu lassen.

Bei jQuery (bzw. JavaScript) solltest du immer im Hinterkopf haben, das viele User das blockiert haben. Besser (und schneller) sind Lösungen mit CSS.

Benutze Standardlösungen, wie sie in tausenden von Beiträgen beschrieben sind.

Verzichte auf CSS-Angaben, deren Auswirkung du nicht kennst (Stichwort: Grundlagenwissen). Z. B. "position: absolute". Da steckt häufig etwas anderes hinter als das, was man durch eine schlichte und schlechte Übersetzung erwartet.

Ähnliches gilt für height-Angaben. Die sich zudem teilweise anderes verhalten als width-Angaben. Die Höhe von einzelnen Elementen und damit im Endeffekt der gesamten Seite solllte immer vom Inhalt abhängen.

Auch so eine veraltete Lösung, die heutzutage niemand mehr haben will. Wenn der Inhalt nicht in das Fenster passt erwarten die User den ganz normalen Scrollbalken rechts - und keine versetzt oder mitten im Fenster erscheinenden.

Die sinnvollste Vorgehensweise um Seiten responsive mit aktuellem HTML5 und CSS3 zu erstellen ist folgende:

1. Den HTML-Quelltext semantisch korrekt erstellen. Und nur den.

2. Das Layout mit CSS gestalten, so das die Seite vernünftig angezeigt wird.

3. Wenn es sinnvoll erscheint Lösungen mit JavaScript bzw. jQuery hinzufügen.

Gruss

MrMurphy

Thielo und Murphy,

danke für die Hinweise. Die hab ich berücksichtigt und das Ganze komplett von vorne aufgebaut und sieht jetzt schon mal viel besser aus. Subjektiv ist es auch besser aufgebaut, was meint Ihr? (Der erste Versuch ist noch unter index_old.html aufrufbar.)

Das finale Design hat sich inzwischen auch ein wenig geändert. Der Kasten soll jetzt nicht zentriert auf der Seite sein, sondern rechts unten. Hab mal ein kleines Mockup als Bild erstellt, damit man es sich vorstellen kann.

Frage ist wie kriege ich das Ding jetzt am besten dahin, sodass es "am footer klebt". Ich meine damit wenn die Fensterhöhe verringert wird, soll es mit dem Footer nach oben steigen und ein Scrollbalken soll erst erscheinen wenn der Kasten den Header erreicht, vorher nicht.

http://goo.gl/BFGSpO


Edit 1:
Achso, was ich vergessen habe:
Es soll am Ende zwei solche divs geben und jeweils erscheinen wenn man auf einen der Links klickt.
(Schön wäre mit einem netten jQuery Effekt.... z.B. aufrollen oder so. Aber das kann man ja dann hinzufügen, wenn es erstmal normal funktioniert. Richtig?)

Edit 2:
Ich habe jetzt auch die innere Box (vom Bild) hinzugefügt

Angehängte Grafiken

testseite_final.jpg (133,8 KB, 6x aufgerufen)

Habe jetzt bei mir mal was ausprobiert:

Also bei .content{} float:right gesetzt. Bringt zwar das gewünschte (Teil)-Ergebnis... aber der Wrapper sieht dann komisch aus. Daher bin ich mir nicht ganz sicher was das noch anstellt.

Wird durch float der umgebende Div etwa nicht mehr berücksichtigt?? Ich dachte immer float wirkt sich nur auf den aktuellen div und dem folgenden aus.... so, dass bei 'right' der folgende dann links vom aktuellen ist...

Falls das so doch richtig ist... dann könnte man ja auch auf den Wrapper ganz verzichten, oder?!? Aber wie kriege ich das Ganze jetzt noch runter...?

Oder würdet Ihr das am besten ganz anders machen? Bin für alle Vorschläge offen

Hier ein Bild wie es dann aussieht:

Angehängte Grafiken

float.jpg (190,1 KB, 10x aufgerufen)

Irgendeine Idee??? Leute biiiitteeeee

Wer floatet muss clearen?

Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller) dir fehlen ganz klar die puren Basics

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Ok, danke für diesen Hinweis! Auf der verlinkten Seite hab ich mir den Bereich bzgl. float angeschaut. Kannst Du mir bitte noch sagen wo jetzt genau gecleart werden muss? Dann sehe ich was ne Wirkung es hier hat und es wird bestimmt einiges klarer!

Das mit dem float war ja auch nur eine Idee... Da ich nicht ganz sicher war, hab ich es so auch nicht hochgeladen, sondern nur hier gefragt! Dafür ist ja glaub ich ein Forum da! Umd sich auszutauschen und bei Themen, wo man nicht sicher ist oder es noch nicht ganz weiß zu fragen.... richtig??

Wobei das float bzw. clear hilft ja auch nichts bzgl. der vertikalen Positionierung. Dabei hängt es ja auch und da hab ich noch keine Idee
Schau doch bitte Beitrag 4. Danke!

Btw: Mag sein, dass hier und da Wissen lückenfaft ist... oder Deiner Meinung nach "die puren Basics" fehlen. Aber es wird ja nicht jeder mit Allround-Wissen geboren. Daher sind Hinweise und Sources, wie Du sie gibts, gut zum Lernen und das werde ich auch. Aber eine richtige Hilfestellung oder Lösungsvorschläge im vorliegenden Fall wäre auch sehr schön