css - Website in div Boxen aufgeteilt

nio · 17. April 2017

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

MrMurphy · 17. April 2017

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

nio · 17. April 2017

Warum ist die Bsp.-Seite für den Anfang schlecht gewählt?

The-Error · 18. April 2017

Wenn du jetzt neu anfängst empfehle ich dir ein Framework zu verwenden am besten Bootstrap da kommst du am schnellsten zum Erfolg.
Sicher solltest du deine Kenntnisse in HTML und CSS vertiefen. Aber um erst mal zu beginnen solltest du http://holdirbootstrap.de/ durcharbeiten.

nio · 20. April 2017

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.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Nio">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">







<!------------------------------------------  Zeile 1 ------------------------------------------>




<!-- Beginn Box 1 -->
<div id="Box1"
style="position:absolute;
width:350px;
height:250px;
z-index:1;
background-color: #E0E0E0;
border: 0px solid #000000;
left: 0px;
top: 0px">
</div>
<!-- Ende Box 1 -->




<!-- Beginn Box 2 -->
<div id="Box2"
style="position:absolute;
width:680px;
height:250px;
z-index:1;
background-color: #FFFFFF;
border: 0px solid #000000;
left: 350px;
top: 0px">
</div>
<!-- Ende Box 2 -->




<!-- Beginn Box 3 -->
<div id="Box3"
style="position:absolute;
width:300px;
height:250px;
z-index:1;
background-color: #ABABAB;
border: 0px solid #000000;
right: 350px;
top: 0px">
</div>
<!-- Ende Box 3 -->




<!-- Beginn Box 4 -->
<div id="Box4"
style="position:absolute;
width:350px;
height:250px;
z-index:1;
background-color: #E0E0E0;
border: 0px solid #000000;
right: 0px;
top: 0px">
</div>
<!-- Ende Box 4 -->




<!------------------------------------------  Zeile 2 ------------------------------------------>




<!-- Beginn Strip 1 -->
<div id="Strip1"
style="position:absolute;
width:350px;
height:5px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
left: 0px;
top: 250px">
</div>
<!-- Ende Strip 1 -->




<!-- Beginn Strip 2 -->
<div id="Strip2"
style="position:absolute;
width:680px;
height:5px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
left: 350px;
top: 250px">
</div>
<!-- Ende Strip 2 -->




<!-- Beginn Strip 3 -->
<div id="Strip3"
style="position:absolute;
width:300px;
height:5px;
z-index:1;
background-color: #FFFFFF;
border: 0px solid #000000;
right: 350px;
top: 250px">
</div>
<!-- Ende Strip 3 -->




<!-- Beginn Strip 4 -->
<div id="Strip4"
style="position:absolute;
width:350px;
height:5px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
right: 0px;
top: 250px">
</div>
<!-- Ende Strip 4 -->




<!------------------------------------------  Zeile 3 ------------------------------------------>




<!-- Beginn Box 1 -->
<div id="Box1"
style="position:absolute;
width:680px;
height:500px;
z-index:1;
background-color: #555555;
border: 0px solid #000000;
left: 350px;
top: 255px">
</div>
<!-- Ende Box 1 -->




<!-- Beginn Box 2 -->
<div id="Box2"
style="position:absolute;
width:300px;
height:500px;
z-index:1;
background-color: #C0C0C0;
border: 0px solid #000000;
right: 350px;
top: 255px">
</div>
<!-- Ende Box 2 -->







</body>
</html>

Alles anzeigen

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

MrMurphy · 20. April 2017

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

css - Website in div Boxen aufgeteilt

Jetzt mitmachen!

Teilen