• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] CSS-Fehler, Hilfe benötigt

PythonIT

PythonIT

Neues Mitglied
Ich habe vor, eine kleine Website zu programmieren. Dafür habe ich zuerst meine "index.html" erstellt und die Grundstruktur gemacht. Dann habe ich zwei Stylesheets gemacht, eine "style.css" und eine style-index.css, diese in dem Unterordner "style". Ich habe angefangen, das Ganze zu stylen, header, navbar, alles in Ordnung, nur als ich mich dann an den Content machte, haben meine rules aus dem style-index.css einfach nicht mehr funktioniert und wurden gar nicht erst den entsprechenden HTML-Tags angehängt. Die zentrale Stelle, an der es nicht mehr funktioniert hat, ist folgende:

Die Verlinkung zu den beiden Stylesheets und einer Google font:
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style/style-index.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,700"
rel="stylesheet" />

Der komplette body meines index.html Dokuments:
<body>
<div class="main">
<div class="top">
<nav>
<ul clas="navbar-content">
<li><a>Startseite</a></li>
<li><a>Projekte</a></li>
<li><a>Über mich</a></li>
<li><a>Impressum</a></li>
</ul>
</nav>
<div class="heading">
<h1>Weil der Weg immer das Ziel ist</h1>
<h2>Dominik Walz</h2>
<h3>- Portfolio -</h3>
</div>
</div>
<div class="content"> <---- DA haben die rules nicht mehr gegriffen
<h1>Was auf dieser Webseite steht</h1>
</div>
<div class="bot">

</div>
</div>
</body>

Die CSS-files:
style.css:
body {
font-family: "Roboto", sans-serif;
font-size: 1.3vw;
padding: 0px;
margin: 0px;
}
nav {
display: block;
font-size: 2vw;
background-color: black;
}
nav ul {
margin: 0;
padding: 1.2%;
padding-bottom: 2%;
padding-top: 2%;
}
nav li {
display: inline;
}
nav a {
background-color: black;
color: white;
font-weight: 700;
padding: 2%;
opacity: 30%;
text-align: center;
border-radius: 0 0 3% 3%;
}
nav a:hover {
padding-bottom: 3.5%;
animation-name: navHover;
animation-duration: 0.2s;
background-color: #4a4a4a;
}

.contHeader {
background-color: white;
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
margin-bottom: 3%;
}

@keyframes navHover {
from {
background-color: black;
padding-bottom: 2%;
}
to {
background-color: #4a4a4a;
padding-bottom: 3.5%;
}
}

style/style-index.css
body {
background-image: url("../img/Snow-BG.jpg");
background-size: 100%, auto;
background-attachment: fixed;
z-index: 1;
}

.heading {
text-align: center;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #ffffff;
background-image: url("../img/Code-BG.jpg");
background-size: 100%, auto;
padding-top: 2%;
padding-bottom: 5%;
}
.heading h1 {
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 4vw;
}
.heading h2 {
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 3vw;
}
.heading h3 {
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 2.5vw;
}
.content {
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #000000;
margin: 4%;
}
.content h1 {
background-color: #ffffff;
font-size: 6vw;
}

Anhänge: 2 Bilder, index.html, style.css, style-index.css (Note: die Dateien sin als .txt benannt)
Bilder:
h1-selected.png
h1-content-selected.png
Wie man sieht, ist auf dem ersten Bild h1 von <div class="heading"> ausgewählt. Unten rechts sieht man, dass dem Ganzen eine rule in style-index.css entspricht, und zwar .heading h1{}. Im zweiten Bild ist h1 von <div class="content"> ausgewählt. In der style-index.css gibt es eine rule .content h1{}. Dennoch sieht man unten rechts, dass keine rule angewandt wird.

Ich hoffe irgendjemand findet eine Lösung, ich würde mich sehr darüber freuen.
 

Anhänge

  • index.txt
    1,4 KB · Aufrufe: 3
  • style-index.txt
    803 Bytes · Aufrufe: 2
  • style.txt
    840 Bytes · Aufrufe: 2
Werbung:
Kann ich nicht bestätigen. Ich habe es gerade ausprobiert. Was du mal versuchen kannst ist deinen Cache zu löschen. Sag mir mal, ob das funktioniert hat.
Steht außerdem noch etwas in der Konsole?

Ein Link zur Seite ist im übrigen immer am hilfreichsten
 
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style/style-index.css">

Stimmt das so mit dem Verzeichnis?
 
Werbung:
Ich habe meine Seite über einen lokalen XAMPP-Server laufen, deshalb konnte ich sie Seite nicht über das internet freigeben. Wenn das bei dir so funktioniert, dann muss irgendwas bei mir falsch gelaufen sein, ich werde mal versuchen, meinen PC und danach den Server und alle Prozesse neu zu starten. Ich hoffe das hilft! Ansonsten danke, fürs Ausprobieren, eigentlich komisch, dass es bei mir nicht funktioniert. Melde mich dann gleich nochmal!

m.scatello schrieb:
Stimmt das so mit dem Verzeichnis?
Zum Vergrößern anklicken....
Ich denke schon, denn manche Elemente auf der Seite werden ja von beiden css-sheets beeinflusst...
 
Ich glaube ich bin hinter das Problem gekommen. Nach einem Neustart habe ich den Server neu gestartet und dabei auch den letzten Log durchgesehen. Ich war ziemlich überrascht zu sehen, dass meine letzten Uploads der Dateien ungefähr 130 Minuten (!!!) gebraucht haben, um auf dem Server wirksam zu werden, was in etwa der Zeitspanne vom Auftreten des Problems bis zu meinem Server-Neustart entspricht. Somit wurde die Seite immer mit den alten Stylesheets geladen was die ganze Sache natürlich erklärt. Browser-Cache löschen war danach natürlich nicht mehr nötig ;) Zumindest weiß ich jetzt, was das Problem ist, wenn ich die nächsten Male wieder solche Fehler bemerke. ich danke dir für deine schnelle Antwort, auch wenn es wohl eher mein Fehler war ;)
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben