zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout Zentrierung und Responsiveness

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2014, 18:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard Layout: relative DIV-Ausrichtung und Verhalten

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!

Geändert von Mufasa (09.11.2014 um 14:36 Uhr) Grund: Neuer Titel passt besser zum aktualisierten Inhalt
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.11.2014, 19:02
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.11.2014, 11:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Ich habe aber auch die Vermutung, dass alle bzw. die meisten dieser Punkte zusammenhängen, kann das sein?
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.

Zitat:
1. Der Footer sitzt ganz unten am Rand, wenn es bei mir in Fullscreen ist, aber bei Verkleinerung des Fenster, entsteht ein Spalt
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.

Zitat:
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...
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.

Zitat:
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.
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.

Zitat:
5. 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...
Benutze Standardlösungen, wie sie in tausenden von Beiträgen beschrieben sind.

Zitat:
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)
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.

Zitat:
7. ... 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)
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

Geändert von MrMurphy (08.11.2014 um 11:08 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.11.2014, 14:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard Layout: relative DIV-Ausrichtung und Verhalten

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
Dateityp: jpg testseite_final.jpg (133,8 KB, 6x aufgerufen)

Geändert von Mufasa (09.11.2014 um 14:51 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.11.2014, 15:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard

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
Dateityp: jpg float.jpg (190,1 KB, 10x aufgerufen)

Geändert von Mufasa (09.11.2014 um 15:32 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.11.2014, 21:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard

Irgendeine Idee??? Leute biiiitteeeee
Mit Zitat antworten
  #7 (permalink)  
Alt 09.11.2014, 21:23
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 09.11.2014, 22:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Daumen hoch

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

Geändert von Mufasa (09.11.2014 um 22:18 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
div, horizontal, layout, responsive, vertikal, zentrierung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Was bevorzugt ihr - fixes, fluides oder elastisches Layout mimii CSS 0 19.12.2011 20:12
Zentrierung des Layouts schlägt fehl (Matthew James Taylor) Mauswerfer CSS 8 30.08.2011 21:37
Bitte um Hilfe - CSS und Prozentangaben sprefer CSS 3 01.03.2011 04:11
Untermenü im IE nici CSS 10 22.06.2009 21:19
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 22:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:27 Uhr.