DIV mit CSS stylen

kliph

Cadet 2nd Year
Registriert
Dez. 2013
Beiträge
31
Hallo liebe Community,

ich arbeite mich gerade in HTML und CSS ein, da ich mich für die beiden Sprachen interessiere und diese daher gerne lernen möchte.

Ich versuche gerade mit verschiedenen DIV's ein Layout zu erstellen, das dann so aussehen soll, wie das angehängt Bild.

Dazu habe ich folgende HTML Codes erstellt, von denen einer funktioniert und der andere nicht. Warum der eine nicht funktioniert, verstehe ich nicht, da ich dachte man kann jedes CSS entweder im HTML <head>, im HTML <body> oder in einer externen CSS definieren.

Dieser Code funktioniert:
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Stapelplan: Absolute Positionierung machts möglich</title>
    <style>
        div {
            font-size: 8pt;
            /*Absolute Positionierung: der Browser verlässt sich ganz auf deine Positionsangaben, um die Elemente anzuordnen.*/
            position: absolute;
        }
    </style>
    <meta charset="utf-8"/>
</head>
<body>
<!--top und left geben an, wo die linke, obere Ecke des Elements sein soll. -->
<div style="background-color: #FFAAAA; width: 124px; height: 187px; left: 2px; top: 2px;">
    Stapelkiste schmal, hoch (124 x 187 cm)
</div>
<div style="background-color: #AAFFAA;;width: 124px; height: 55px; left: 2px; top: 189px;">
    Stapelkiste schmal, flach (124 x 55 cm)
</div>
<div style="background-color: #AAAAFF;width: 166px; height: 55px; left: 2px; top: 244px; ">
    Stapelkiste mittelbreit, flach (166 x 55 cm)
</div>
<div style="background-color: #FFFFAA;width: 121px; height: 42px; left: 126px; top: 2px;">
    Teppichrolle, Läufer (121 x 42 cm)
</div>
<div style="background-color: #FFAAFF; width: 121px; height: 100px; left: 126px; top: 44px;">
    Stapelkarton, leicht (121 x 100 cm)
</div>
<div style="background-color: #AAFFFF;width: 121px; height: 100px; left: 126px; top: 144px;">
    Stapelkarton, leicht (121 x 100 cm)
</div>
<div style="background-color: #AAAAAA;width: 79px; height: 55px; left: 168px; top: 244px;">
    Getränkekiste "Abgeladen, Feierabend" (79 x 55 cm)
</div>

</body>
</html>

Dieser funktioniert nicht:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">

body { 
	margin:0; 
	padding:0; 
	height:1500px; 
} 

div{
	position:absolute;
}
<!---erstes Div-->
#1 {
	background-color:red; 
	width:124px; 
	height:187px; 
	top:0; 
	left:0;
}
<!---zweites Div-->
#2 {
	background-color:#FF0;
	width:121px;
	height:42px;
	top:0;
	right:0;
}
<!---drittes Div-->
#3 {
	background-color:purple;
	width:121px;
	height:100px;
	top:42;
	right:0;
}
<!---viertes Div-->
#4 {
	background-color:#6CF;
	width:121px;
	height:100px;
	bottom:79;
	right:0;
}
<!---fünftes Div-->
#5 {
	background-color:grey;
	width:79px;
	height:55px;
	bottom:0;
	right:0;
}
<!---sechstes Div-->
#6 {
	background-color:green;
	width:124px;
	height:55px;
	top:187;
	left:0;
}
<!---siebtes Div-->
#7 {
	background-color:#63F;
	width:166px;
	height:55px;
	bottom:0;
	left:0;
}
</style>
</head>

<body>
<div id="1">Stapelkiste schmal (124 x 87 cm)</div>
<div id="2">Teppichrolle, Läufer (121 x 42 cm)</div>
<div id="3">Stapelkarton leicht (121 x 100 cm)</div>
<div id="4">Stapelkarton, leicht (121 x 100 cm)</div>
<div id="5">Getränkekiste (79 x 55 cm)</div>
<div id="6">Stapelkiste schmal, flach(124 x 55 cm)</div>
<div id="7">Stapelkiste, mittelbreit (166 x 55 cm)</div>
</body>
</html>

Ich wäre euch sehr dankbar, wenn Ihr mir erklären könntet, worin die Unterschiede der beiden Codes liegen und mich damit meinem Ziel (die HTML und CSS Welt zu verstehen) einen Schritt näher bringt.

Viele Grüße
Kliph
 

Anhänge

  • Unbenannt.PNG
    Unbenannt.PNG
    39,1 KB · Aufrufe: 280
@powerfx

Vielen Dank für den Link. Jetzt weiß ich auch, dass ich die HTML-Kommentare nicht im <style>-Bereich verwenden darf!

Noch was: Wenn ich für den <body> jetzt folgenden Code setze:
HTML:
body { 
	margin:0; 
	padding:0; 
	height:297px;
	width:166px; 
}

Dann sind die Boxen immer noch über den gesamten Bildschirm verteilt. Wieso ist er jetzt nicht nur 297px hoch und 166px breit`?
 
Dem body einen Höhe und Breite zuweisen ist so eine Sache.... versuch einen <div> um den Inhalt zu wickeln und weise dem Breite und Höhe zu.

Das wäre mein Lösungsansatz, vielleicht gibts da noch elegantere Wege.
 
1.) Ich weiß nicht einmal, ob rein numerische IDs zulässig sind, sie sind definitiv schlechter Stil und sind ein Fall von "Nich machen!"
2.) Mach es von Anfang an anständig, schreib deinen CSS-Code dahin, wo er hin gehört: In eine .css - Datei
3.) Absolute Positionierung ist ein Klotz am Bein, den man vermeiden sollte. Was machst du, wenn in deinem Layout mal ein Container größer oder kleiner werden soll? Was machst du, wenn der Viewport des Geräts nicht groß genug dafür ist? Dein Layout ist kein Fall für absolute Positionierung, sondern für Multi-Column - Ansätze.
 
@Daaron & @smallwall

Vielen Dank für das Feedback. Ich werde mich jetzt in relative Positionierung und Responsive Designs einlesen.
 
Zurück
Oben