css - Website in div Boxen aufgeteilt

  • Hallo,


    vorneweg ich bin wirklich blutiger Anfänger bei verwenden von css!


    Ich bin von CSS fasziniert und würde mich da gerne weiterbilden. Zur Übung möchte ich mir meine eigene Homepage in CSS formen. Als Bsp. habe ich mir diese Webseite "http://www.knx-trier.de" herausgesucht, die mir von der Aufteilung gut gefällt. Ich habe mich vor Beginn nun schlau gemacht und habe herausgefunden, dass es Sinn macht so eine Aufteilung der Bereiche mit div Boxen vorzunehmen. Ich habe zwar einige Versuche gestartet aber da ich nicht richtig voran komme, möchte ich euch hier zunächst um einen Rat bitten.


    Wie kann ich am besten vorgehen und wie könnte ich so eine Seite am besten aufteilen? Oder gibt es statt div Boxen noch andere Möglichkeiten.


    Schon mal vielen Dank im voraus für eure Mühe.


    Grüße Nio

  • Hallo


    Mit deiner Vorbildseite hast du leider eine denkbar ungeeignete erwischt.


    Zitat

    Wie kann ich am besten vorgehen


    Die Erfahrung zeigt, dass zunächst die Grundlagen von aktuellem HTML und CSS gelernt werden sollten. Die Zeiten vom "Learning bei Doing" zum Erstellen von Webseiten sind schon lange vorbei.


    Zitat

    wie könnte ich so eine Seite am besten aufteilen?


    Heutzutage sollten nur noch responsive Webseiten erstellt werden, die sich den aktuellen Bildschirmgrößen anpassen. Die Aufteilung geschieht mittels geeigneten Containern und die Anordnung der Container mit CSS.


    Zitat

    Oder gibt es statt div Boxen noch andere Möglichkeiten.


    Bei HTML5 gibt es spezielle Container, die auch verwendet werden sollten, wie header, main, footer, nav, article, section und so weiter. div-Container sollten nur noch verwendet werden, wenn es keine geeigneteren Container gibt. Das ist in den Regeln zu HTML5 auch so festgelegt worden.


    Die Anwendung der Container gehört zu dem erforderlichen Grundlagenwissen, um das zu lernen du kaum herumkommen wirst.


    Gruss


    MrMurphy

  • OK, DANKE, Ich werde es mir mal anschauen.


    Unabhängig davon habe ich mal mit den Div Boxen rumgespielt. Ich habe mir nun die Seite zum Vorbild genommen und folgendes Ergebnis.





    Ich habe den CSS-Codex der einfach halber in html mit eingetragen. Später werde ich diesen aber outsourcen.


    Ich habe nun folgendes Problem. Die Boxen haben nun feste Größen. Da die Seite sich aber individuell an den Ausgabemedien anpassen soll, sollte nur der Kern in der Mitte fest bestehen bleiben. Die Flächen Links und Rechts (oben jeweils) sollten variieren. Wer könnte mir hier einen Tipp geben?


    Noch etwas - Ist es ratsam in diesem Fall einen Wrapper zu integrieren und was sollte ich dabei beachten?


    Danke und Grüße

  • Hallo


    So wie du es dir vorstellst funktioniert es leider nicht.


    Um die Seite flexibel oder gar responsive zu bekommen muss die Grundlage stimmen.


    Dazu gehört auf ein Layout mit position: absolute zu verzichten, zumal position: absolute nie für Webseitenlayouts gedacht war.


    Zudem benutzt du Attribute, die bereits seit über 15 Jahren nicht mehr verwendet werden sollten.


    Für deine Gestaltungswünsche solltest du die Möglichkeiten von HTML5 und CSS3 verwenden. Grade auch wenn du verschiedene Ausgabemedien berücksichtigen willst.


    Für unterschiedliche Ausgabemedien müssen sich Container auch in ihrer Höhe anpassen können. Deshalb sollte in die Höhe von Containern nur in absoluten Ausnahmefällen eingegriffen werden. Die Höhe von Containern wird grundsätzlich von deren Inhalt bestimmt.


    Zum Layout deiner Seite solltest du sie deshalb zunächst mit Inhalt füllen und dich mit Flexbox beschäftigen.


    Zitat

    Noch etwas - Ist es ratsam in diesem Fall einen Wrapper zu integrieren und was sollte ich dabei beachten?


    Nein, Wrapper waren noch nie sinnvoll und sind fast immer überflüssig.


    Gruss


    MrMurphy