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:
Dieser funktioniert nicht:
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
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