Website programmieren; HTML, CSS; Wo ist mein Fehler?

Hallo :)

Ich hab mich heute mal als blutiger Anfänger daran gemacht mit einem Tutorial eine Website zu programmieren.

Nutze dazu folgendes Youtube-Video: https://www.youtube.com/watch?v=MsrrKMzLeWE

Allerdings sieht meine Website nun etwas verschoben aus. (Ich füge Bilder von der Index.html und der Style.css Datei, sowie der Website ein.)

Habe meinen Code schon nach Fehlern durchsucht, habe aber nichts gefunden.

Würde mich sehr freuen wenn mir jemand weiterhelfen kann.

Answer 1

[Erzesel]

Ich frage mich warum alle denken man schaut sich ein Video an und plötzlich weis man was zu tun ist...:D

Versuche es doch mal Schritt für Schritt mit ganz normalem Lesen und Experimentieren. Beim Lesen beschäftigt sich Dein Gehirn viel intensiver mit einem Thema, als wenn es erst Bild und Sprache in nutzbare Information umwandeln muss.
Beim Lesen und Experimentiern gibst Du das Tempo vor und nicht das Video...

https://www.w3schools.com/html/default.asp

Auf W3Shools kannst du sogar die Demos verändern auf "Run" klicken und sofort sehen was passiert ohne den Browser zu verlassen.

zu deinemLayoutproblem:
https://www.w3schools.com/html/html_layout.asp

https://www.w3schools.com/css/css_website_layout.asp

Comments

[AliceG21]

Ich weiß, dass ich kein Plan habe was ich da tue :D Ich hab auch garnicht vor das ganze wirklich zu lernen und habe auch nichts mit der Website vor. Wollte mir das ganze nur mal aus Langeweile anschauen. Danke trotzdem für die Tipps.

Answer 2

[Franky12345678]

Die Antwort ist einfach: Das Tutorial ist für die Tonne. So programmiert man keine Webseite :'-(

Selbst, wenn du diese Boxen irgendwie hingeschubst bekommst, haut dir das um die Ohren, wenn du versuchst, sie mit Inhalten zu befüllen.

Wenn du ernsthaft das Programmieren einer Webseite lernen möchtest, ändere das CSS wie folgt (das HTML kann so stehen bleiben):

• Wenn die Seite gescrollt wird, dann über die Scrollbar des Browsers. (weder den eigentlichen Inhaltsboxen noch dem Body-Tag eine height-Attribute geben, so dass sie sich dem späteren Text ("Content") anpassen und über die Bildschirmgrenze hinaus wachsen können). Dieser Punkt ist wirklich wichtig und das verbaust du dir gerade total.
• Positioniere den header und den Footer mit "position:fixed", so dass sie nicht mitscrollen sondern wie der Header auf Gutefrage feststehend sind. Die CSS-Attribute top, left, width, right, height und bottom sind hier hilfreich.
• Gleiche die Überlappung mit einer entsprechenden Padding im Body aus. Beispiel: Ist der Header 60px hoch, dann bekommt der body ein "padding-top:60px", damit der Header andere Inhalte nicht überlagert.
• ggf. das gleiche mit der Seitennavigation
• Baue niemals auf einer fixen Breite. Besonders im Smartphone-Zeitalter wirst du dich später darüber ärgern. Eine Maximalbreite ("max-width:960px") ist ok.
• Verwende float nur, wofür es vorgesehen ist: Element von Text umfließen lassen (so wie Bilder bei Wikipedia). Damit ein Seitenlayout zusammenzuwurschteln ist großer Mist.

Das ist nicht schwerer zu bauen als das, was du da gerade baust. Im Gegenteil: Es ist einfacher, weil da nicht "gegen den Strom geschwommen" wird, wie es bei diesem Tutorial der Fall ist.

Solche Boxengerüste waren mal in den 90ern modern, als es nicht wirklich was anderes gab.

Answer 3

[sociallist]

Ich würde auch vorschlagen, dass du dir vielleicht eher die Themen "flexbox" oder "css-grid" näher anschaust.

Answer 4

[Kompaktdesign]

Beim äußersten div hast du 1d="wrapper" stehen. Aus dem "1d" musst du "id" machen.