Ich möchte ein HTML-Dokument mit einem CSS-Dokument verbinden, per <link rel="stylesheet" href="stylesheet.css">. Wieso funktioniert das nicht?

Ich möchte ein CSS-Dokument mit einem HTML-Dokument verbinden, undzwar mit dem Code:

<link rel="stylesheet" href="stylesheet.css">

Aber es funktioniert nicht?

5 Antworten

medmonk

04.11.2016, 22:23

Wenn das Stylesheet auf der selbe Ebene des HTML-Dokuments liegt:

<link rel="stylesheet" href="style.css">

Wenn das Stylesheet in einem Unterverzeichnis liegt:

<link rel="stylesheet" href="ordner/style.css">

LG medmonk

Niklas

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

02.11.2016, 18:11

Tach,

liegt höchstwahrscheinlich am Verweis, da keine Unterordner angegeben sind.
Dein Code funkioniert nur, wenn sich die CSS-Datei im selben Ordner wie die HTML-Datei befindet.

Beispiel 1 (angenommen, die Datei liegt im Hauptverzeichnis des Servers):

<link rel="stylesheet" href="../stylesheet.css">

Beispiel 2 (angenommen, die Datei liegt in einem Unterverzeichnis):

<link rel="stylesheet" href="../unterordner/stylesheet.css">

Wichtig ist, dass du den Pfad richtig nachvollziehst.

Hauptverzeichnis > Unterverzeichnis1 > Unterverzeichnis2 > ... > Dateiname

Grüße, Savix

Woher ich das weiß:Berufserfahrung – Freelance IT Consultant

Niklas

02.11.2016, 18:21

Ich möchte noch hinzufügen, dass du im Codebeispiel natürlich auch den Dateityp definieren solltest, was wir (beide) vergessen haben. ;)

<link rel="stylesheet" href="stylesheet.css" type="text/css">

medmonk

04.11.2016, 22:18

@Niklas

Ich möchte noch hinzufügen, dass du im Codebeispiel natürlich auch den Dateityp definieren solltest, was wir (beide) vergessen haben. ;)

Wenn das HTML-Dokument mit dem HTML5 Doctype ausgezeichnet wurde, man das Type-Attribute weglassen kann und darf. Davon mal ab, es auch ohne in älteren HTML Versionen funktionieren würde.

tanteerna68

30.12.2018, 15:46

@Niklas

In HTML5 ist das nicht von Nöten.

medmonk

04.11.2016, 22:31

Beispiel 1 (angenommen, die Datei liegt im Hauptverzeichnis des Servers):

Mit doppelten Punkten springt man zurück. Kurz um - Punkte und Slash da nicht verloren haben. Weder um das Stylessheet auf der selber Ebene des HTML-Dokuments zu laden, oder aus einem Unterverzeichnis.

Hauptverzeichnis » "Dateiname.Dateisuffix" (style.css)
Unterverzeichnis » "Verzeichnisname/Dateiname.Dateisuffix" (css/style.css)
Tiefere liegende Verzeichnisse = "assets/css/style.css"

LG medmonk

Anonym54023

02.11.2016, 15:30

liegen die HTML-Datei und das CSS Dokument im gleichen Verzeichnis?
Und hast du die CSS-Datei auch wirklich stylesheet.css genannt ?

Ein wenig mehr Info wäre hilfreich, wie zB. wo welche Datei liegt und ein wenig Quellcode kann auch nie schaden ^^.

Borgler94

02.11.2016, 15:42

du kannst auch kein html dokument mit einem css dokument einbinden.. das wär auch irgendwie sinnlos

wenn dann kannst du ein css Dokument in ein HTML Dokument einbinden...
und das müsste so wies du geschrieben hast geht, vorausgesetzt (das was MasterSnoopy geschrieben hat) und das du deine Zeile im head hast

Raceforce

02.11.2016, 16:11

Du musst dadrauf achten, dass du die Datei 1. in deinem Ordner hast, den du auch eingetragen hast. 2. musst du dadrauf achten, dass diese Datei auch so heißt. Hoffe, ich konnte helfen. LG ~Raceforce

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zur Frage

Wie füge ich eine SCSS Datei in HTML ein?

Hallo! Ich würde gerne meine Seite mit SCSS formatieren und nicht nur mit einfachem CSS. Leider habe ich Probleme eine SCSS Datei in meinen HTML Code einzufügen. Bei CSS sieht der Code zum einfügen ja so aus:

<link rel="stylesheet" type="text/css" href="[DATEIPFAD].css"/>

Wenn ich es nun aber mit einer SCSS Datei versuche klappt es nicht.

...zur Frage

Localhost spinnt rum?

Ich benutze XAMPP zum Testen meiner Website, hat auch bis jetzt alles immer gut geklappt...

Meine Websites speichere ich jeweils in Unterordnern in htdocs, benutze erstmal nur HTML und CSS, darum geht es jetzt nämlich auch.

Einige Daten:

Betriebssystem: Linux | Ubuntu 20.04
Editor: gedit
Browser: Firefox 98.0.2 (64bit)

Das Problem ist dass immer wenn ich in meinem CSS-Code etwas ändere, es dann abspeichere und schließlich im Browser öffne, werden meine Änderungen nicht angezeigt. Wenn ich allerdings Sachen in der HTML-Datei ändere werden diese angezeigt.

Einige Klarstellungen:

Ich bin mir zu 100% sicher, dass ich die richtige CSS-Datei bearbeite und auch im richtigen Ordner abspeichere.
Die CSS-Datei wurde mit folgendem Code in der HTML-Datei verwiesen:

<link rel="stylesheet" href="style.css">

(Außerdem hat das Problem ja jetzt erst begonnen.)

Ich habe keine Fehler in der CSS-Datei eingebaut, also bspw. zwei Semikolons, unbekannte Befehle etc.

Kann mir da jemand weiterhelfen??

...zur Frage

CSS in JavaEE nutzen?

Nabend,

Ich habe ein JavaEE Project und experimentier mit Servlets und einem Tomcat Server herum. Ich habe auch eine html Datei. Jetzt wollte ich der html Datei mit einem Stylesheet etwas Glanz geben.

Leider musste ich feststellen, dass die HTML-Datei mitnichten meine CSS Datei berücksichtigt. Ich habe auch den Server neugestartet und ein paar mal gecleaned.

Die html Datei sowie die CSS Datei befinden sich im WebContent Ordner. Die Pfadangabe passt meiner Ansicht nach.

<link rel="stylesheet" type="text/css" href="WebContent/test.css">

Hat jemand vielleicht eine Idee woran es noch liegen könnte?

...zur Frage

linien entfernen?

zwischen denn button sind so kleine linien. wie kan man die enfernen?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/all.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.min.css">

    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <h1>Homepage</h1>
        <a href="https://youtube.com">
            <button class="youtube"><i class="fa-brands fa-youtube"></i> YouTube</button>
        </a>
        <a href="https://discord.com/channels/@me">
            <button class="discord"><i class="fa-brands fa-discord"></i> Discord</button>
        </a>
        <a href="https://github.com">
            
            <button class="github"><i class="fa-brands fa-github"></i> Github</button>
        </a>
    </div>



    
</body>
</html>

style.css

body {
background-image: url(background.jpg);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: rgb(136, 127, 127);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;

}

.youtube {
    align-self: center;
    background-color: #f44336;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.discord {
    background-color: #738adb;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.github {
    background-color: #495057;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

...zur Frage

VS Code CSS funktioniert nur wenn es im HTML Code ist?

Hi,

wenn ich CSS ins HTML mit <style></style> einfüge, funktioniert es.

Kann man auch einstellen, dass es in unterschiedlichen Dokumenten ist, wie hier:

Wenn ich es allerdings so mache, funktioniert es nicht.

Funktioniert es mit unterschiedlichen "Dokumenten" oder muss ich es mit <style> machen?

...zur Frage

Css datei not found 404?

Hey,

ich bin gerade dabei eine kleine Webseite mit PHP zu erstellen (MNit Xampp und visual studio code). Ich habe meine Webseite in mehreren Dateien aufgeteilt, damit ich einen besseren Übersicht habe aber leider ist ein Fehler aufgetreten. Die css Dateien werden nicht geladen. Ich weiß nicht , woran es liegt denn die Pfaden zu den Dateien stimmen alle aber sie werden trotzdem nicht gefunden bzw. geladen und ausgeführt. Also die Seite ist dann nicht gestylt.

----------------header.php-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>Own Website</title>
</head>
<body>
    <header class="header">
        <div class="logo">
            <h2>Mode</h2>
        </div>
        <ul class="menu">
            <li class="items"><a href="#" class="links">Home</a></li>
            <li class="items"><a href="#" class="links">About</a></li>
            <li class="items"><a href="#" class="links">Service</a></li>
            <li class="items"><a href="#" class="links">Login</a></li>
        </ul>
    </header>
</body>
</html>

------------------------index.php-------------------
<?php include("./templates/header.php"); ?

---------------header.css--------------------

* {
    margin: 0;
    padding: 0;
}




body {

    background-color: #212121;

}

Meine Ordner Struktur

Die Fehlermeldung:

Diese Fehlermeldung bekomme ich, wenn ich mir den Seitenquelltext anschauen möchte und dann die css Datei aufmachen will. Die wird nicht gefunden.

Ich hoffe, dass ich das Problem halbwaches erklären konnte.

Danke im Voraus

...zur Frage

HTML: Eingebundene CSS-Datei funktioniert nicht?

Hallo Leute,

ich habe seit heute mit dem Erstellen von Webseiten angefangen. Ich habe mir schon sehr viel dazu angeschaut und bin auch der Meinung, dass ich das meiste schon weiß.

Ich habe also eine HTML-Datei erstellt und wie es auch sein muss in den

<head>...</head>

einen Link zur entsprechenden CSS-Datei eingeführt. Der Link ist auch zu 100% korrekt, sowohl vom Aufbau als auch von der Rechtschreibung (insbesondere der Dateipfad).

Das HTML-Dokument lässt sich auch ganz normal im Internet abrufen, jedoch wird die CSS-Datei nicht ausgeführt (da die Farbe sich nicht verändert).

Es muss also etwas mit dem Link nicht stimmen, da die CSS-Datei auch keine Fehler enthält. Ich habe auch verschiedene Browser probiert.

Fakt ist: Ich habe schon alles probiert, tausendmal über alles drüber geschaut und auch im Internet nach ähnlichen Fehlern gesucht. Jedoch hat alles nicht geholfen.

Hier mein Code:

HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <link href= "style.css" rel= "stylesheet" type= "css/txt" >
    <title>Regenwasser</title>
  </head>
  <body>
    <p><h1>Regenwasser</h1></p>
    <ul>
      <li>s</li>
      <li>l</li>
      <li>o</li>
      <li>l </li>
      <li>p-</li>
      <li>u</li>
      <li>P</li>
      <li>Fi</li>
      <li>Wass</li>
      <li>AQUA</li>
      <li>PLURAF</li>
      <li>AQ</li>
    </ul>
  </body>
</html>

CSS:

p {
  color: red;
}

ul li {
  color: green;
  height: 500px
}

Ich bin daran echt am Verzweifeln und sitze schon locker über zwei Stunden daran.

...zur Frage

Dynamic Web App und Thymeleaf CSS einbinden?

Moin.

Statt JSP wollte ich ich nun Thymeleaf umschwenken. Allerdings hab ich bei Thymeleaf Probleme, die CSS Datei einzubinden. Meine Recherchen haben ergeben, dass Thymeleaf von Haus aus in src/main/resources/static/ nach Ressourcen sucht. Die hab ich auch da reingepackt. css/style.css

Mein HTML Dokument sieht die Verlinkung Folgendermaßen aus:

 <link th:href="@{/css/style.css}" rel="stylesheet" />

Meine HTML Seite befindet sich direkt im webapp Ordner.

Ich hab auch versucht die HTML Seite in den templates Ordner zu packen. Leider ebenfalls ohne Ergebnis.

Pro Forma der CSS Inhalt :)

body{
	background-color: red;
}

Hier auch mal ein Bild von der Ordnerstruktur:

...zur Frage

CSS funktioniert in Notepad++ nicht?

Hab ein HTML Dokument erstellt...hat auch alles funktioniert nun habe ich ein Style.css erstellt und dieses in meiner HTML Seite erkennbar gemacht wenn ich nun aber z.b etwas im CSS Dokument machen wir z.b body {background-color:"red";} und ich es dann speichere funktioniert es einfach nicht? Ich habe im CSS Dokument auch schon die Sprache CSS oben ausgewählt...

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

HTML/CSS Bluefish?

Hey kennt sich jemand mit dem Programm Bluefish aus? Ich muss eine HTML und CSS Datei erstellen.

Die HTML Datei bekomme ich meiner Meinung nach hin aber wenn ich die passende CSS Datei erstellen will also auf Dialoge und Linkzu Stylesheet dann bei href gibt es den Link zu der HTMLDatei nicht.

...zur Frage

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zur Frage

localhost css laden?

Ich kann bei keine css dateien mit dem link tag laden. Ich habe mehrere Möglichkeiten ausprobiert:

<link type="text/css" rel="stylesheet" href="stylesheets/style.css">

<link type="text/css" rel="stylesheet" hrefhttp://localhost/stylesheets/style.cssss">

<link type="text/css" rel="stylesheet" href="./stylesheets/style.css">

nur fürs Verständnis:

htdocs

|- index.php

|- stylesheets

|- style.css

keine dieser möglichkeiten funktioniert.

Weiß jemand wie das geht? Oder hab ich einen Fehler gemacht?

Danke im Voraus :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen