Frage Paar Probleme mit Website im CSS-Bereich.

[YoureStein]

Ich bin gerade dabei CSS zu lernen und habe ein paar Probleme. Ich würde im folgenden einfach mal meine beiden Dateien hochladen und könntet ihr mir helfen meine Fehler zu beheben?
Also die Dateien sind im Anhang.
Zu meinen Fragen: Ich habe jetzt ein Wrapper hinzugefügt und jetzt spinnt das "logo" irgendwie was oben im Navigator drin steht. Desweiteren ist die Website bei mir nicht über der kompletten Seite --> Screenshot: http://prntscr.com/h3j80g
Das wärs erstmal mit den beiden wichtigsten Fragen...

Da die Datei größer ist hier ein Link zum Downloaden:
https://workupload.com/file/59EtsBc

 

[threadi]

Zeig besser einen Link zur Seite, downloads macht hier nicht jeder gerne.

 

[YoureStein]

Aber ich habe eigentlich nicht vor diese Website hochzuladen, sondern will einfach nur Sachen testen

 

[threadi]

Wenn die Seite nicht irgendwo per Link für jemanden erreichbar ist, ist es schwer dir beim Testen zu helfen. Du kannst für den Moment auch ein kostenfreies Hosting nutzen und den Link dafür dann hier posten. Angebote dafür findest Du hier: https://www.meine-erste-homepage.com/webspace_gratis.php

 

[YoureStein]

https://teststein.000webhostapp.com/#
ok hier wäre sie, soll ich einen neuen Beitrag verfassen?

 

[threadi]

Der Link ist schonmal ein Anfang. Jetzt müsste man nur noch wissen was Du mit "spinnt das Logo" meinst? Soll es woanders stehen?

 

[Sailor]

Das liegt (zu Problem 1 / Logo) daran, dass das Logo im <div class="wrapper"> liegt - und dann sieht das eben so aus.
Zu Problem 2 (Anzeige geht nicht über ganze Seite. Das liegt an den 'unglücklich gewählten margin und padding Werten bei .bild und h1.
Folgend mal die überarbeitet Style Sektion:

html, body {
margin: 0px;
padding: 0px;
}

.wrapper {
max-width: 90%;
margin: 0 auto;
width: 960px;
}

.nav {
height: 100px;
width: 100%;
background-color: rgba(250, 250, 250, 0.8);
position: fixed;
top: 0;
}

#logo {
height: 60px;
width: 60px;
background-color: grey;
margin: -20px 0px 0px -20px;
float: left;
background-image: url("Logo.png");
background-repeat: no-repeat;
background-size: contain;
}

.text {
margin-top: 44px;
word-spacing: 50px;
text-align: center;
}

.text a {
text-decoration: none;
color: black;
font-family: Helvetica;
font-weight: 700;
}

.text a:hover {
color: navy;
border-bottom: white 5px solid;
border-top: white 5px solid;
}

.bild {
padding-top: 100px;
height: 700px;
width: auto;
background-image: url("coast-2723729_1920.jpg");
background-repeat: no-repeat;
background-size: cover;
}

.bild h1 {
margin-top: 100px;
text-align: center;
font-size: 50px;
font-family: "Futura Std";
color: red;
letter-spacing: -3px;
}

.content {
width: 960px;
text-align: center;
margin-left: 250px;
}

#name {
text-decoration: underline;
}

Den Positionierungsfehler von #logo habe ich versucht durch die negativen 'margin' Werte zu kompensieren.

 

[YoureStein]

Das mit dem Logo ist mir schon aufgefallen, trotzdem danke, auch für den zweiten, sehr hilfreich.

 

[YoureStein]

Bzw es hat bei mir geklappt indem ich das im Bodytag hinzugefügt habe.