Wieso funktioniert das stylen des div-Conatiners nicht?
Guten Abend zusammen,
wie ihr aus meinen vorherigen Fragen herauslesen könnt, übe ich gerade das programmieren. Ich habe jetzt sehr viel über das stylen (css) bzw. positionieren des div-containers recherchiert. Es taucht immer wieder das selbe Problem bei mir auf:
Es funktioniert nicht, spricht: ich kann weder das Element positionieren noch in irgendeiner Form stylen.
Unten ist mein Beispiel; wie immer kopiere ich nur den wichtigsten Code um euch den Rest zu ersparen. Hierbei wird nur das <h1> ausgegeben und leider nichts weiteres. Ich müsste noch erwähnen, dass ich mit Visual Studio programmiere und dabei einmal eine Seite mit index.html programmiere und stylen auf einem weiterem Fenster im Visual Studio tue.
Das ist der Code im Fenster index.html:
<body>
<div id="Hallo">
<h1>Hallo</h1>
</div>
</body>
Das ist der Code im Fenster sytle.css (wobei die Überschrift seltsamerweise rot angestrichen ist und daneben die Zahl 5 steht; ich weiß leider nicht ob das etwas zu bedeuten hat):
#Hallo {
width: 100px;
height:150px
position: relative;
top: 70px;
left: 80px;
background: blue;
}
Eventuell hat jemand von euch eine Idee wo das Problem liegen könnte.
Vielen Dank für eure Mühen im voraus !
Das Problem hat sich gelöst, ich benötige keine weitere Antworten; Danke an allen !
3 Antworten
![](https://images.gutefrage.net/media/user/ichmagmemes/1707964957094_nmmslarge__277_983_576_576_49086d1e4542f72ea56263373bac7233.png?v=1707964957000)
bei height: 150px fehlt am ende ein SEMIKOLON also ;
lade dir mal zB den atom html editor runter oder den von adobe... solche editoren verhindern eigentlich, dass solche fehler entstehen können oder das man schnell aufmerksam darauf gemacht wird
![](https://images.gutefrage.net/media/user/ichmagmemes/1707964957094_nmmslarge__277_983_576_576_49086d1e4542f72ea56263373bac7233.png?v=1707964957000)
hast du deine style.css datei im head "verlinkt" mit <link rel> ?
![](https://images.gutefrage.net/media/default/user/8_nmmslarge.png?v=1551279448000)
Nein, was muss ich den im Header reinschrieben ?
![](https://images.gutefrage.net/media/user/ichmagmemes/1707964957094_nmmslarge__277_983_576_576_49086d1e4542f72ea56263373bac7233.png?v=1707964957000)
deine hmtl datei weiß nicht wo sich deine style.css befindet, deswegen musst du im html head immer deklarieren wo die anderen benötigten dateien sich befinden:
![](https://images.gutefrage.net/media/default/user/8_nmmslarge.png?v=1551279448000)
Danke für deine Tipps bzw. der verlinkten Webseite, ich habe mir das mal durchgelesen, dann müsste doch dieser Code im head-Bereich richtig sein: Vielen Dank, wäre dieder Code im Head-Bereich dann richtig:
<link rel="style.css" href="styles.css">
wenn nicht was soll ich dann bei href oder link rel einfügen ?
![](https://images.gutefrage.net/media/user/ichmagmemes/1707964957094_nmmslarge__277_983_576_576_49086d1e4542f72ea56263373bac7233.png?v=1707964957000)
wenn deine index.html und style.css im gleichen ordner sind, ist das hier korrekt
(auf rechtschreibung deiner style.css datei achten)
<link rel="stylesheet" href="style.css">
![](https://images.gutefrage.net/media/default/user/8_nmmslarge.png?v=1551279448000)
![](https://images.gutefrage.net/media/user/ichmagmemes/1707964957094_nmmslarge__277_983_576_576_49086d1e4542f72ea56263373bac7233.png?v=1707964957000)
![](https://images.gutefrage.net/media/default/user/8_nmmslarge.png?v=1551279448000)
Das Problem in deinem Code ist, dass du in der CSS-Datei bei der Definition deiner Eigenschaften für das Element mit der ID "Hallo" einige Zeilenumbrüche vergessen hast. Du musst nach jeder Eigenschaft und deren Wert einen Semikolon setzen, um dem Browser mitzuteilen, dass die Definition einer Eigenschaft abgeschlossen ist. Hier ist eine korrigierte Version deines CSS-Codes:
#Hallo {
width: 100px;
height: 150px;
position: relative;
top: 70px;
left: 80px;
background: blue;
}
![](https://images.gutefrage.net/media/default/user/8_nmmslarge.png?v=1551279448000)
![](https://images.gutefrage.net/media/user/DodgeRT/1529572016769_nmmslarge__92_29_516_516_2159a45a5143b35e639048a39bec1647.jpg?v=1529572019000)
N Schuss ins blaue: vermeide Großschreibung. Lieber #hallo schreiben. Und natürlich des schon erwähnte ; hinter height.
Wie ist des css den eingebunden? Also die Zeile im head?
![](https://images.gutefrage.net/media/default/user/8_nmmslarge.png?v=1551279448000)
Nein leider nicht, wie kann ich im Head bereich einbinden ?
Vielen Dank für deine Antwort, hat aber leider nichts geändert