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 :)

3 Antworten

amansoor

14.04.2019, 08:31

Das sollte eigentlich funktionieren:

Eventuell hast Du irgendwo noch einen Tippfehler drin oder die Datei- oder Ordner-Rechte stimmen nicht. Die Ordner sollten 755 und die Dateien 644 haben.

Woher ich das weiß:Berufserfahrung

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

13.04.2019, 22:02

Wird der link-Tag im head definiert?
Ist dein Markup valid?
Passen Groß- und Kleinschreibung bei der Pfadangabe?
Liegt die CSS-Datei wirklich in besagtem Verzeichnis?
Hast du bereits deinen Browsercache geleert und die Seite dann erneut aufgerufen?
Welche Rückmeldung gibt dir dein Browser? (Schau im Netzwerktab der Entwicklerkonsole des Browsers).

RANGObro

Fragesteller

13.04.2019, 22:04

1.ja. ich habe den tag genau so wie immer verwendet und wenn ich nicht localhost eingebe sonder einfach doppelklick auf das dokument mache lädt die css datei

2.kenn ich nicht also wahrscheinlich nein

3.ja

4.jup

5.klar

6.was ist das?

regex9

13.04.2019, 22:27

@RANGObro

2.kenn ich nicht also wahrscheinlich nein

Du hast dein HTML doch geschrieben. Überprüfen kannst du es mit diesem Tool: https://validator.w3.org/#validate_by_input. Unabhängig davon, ob die Fehlerursache in invalidem HTML liegt oder nicht, solltest du die Fehler beheben, die der Validator findet.

6.was ist das?

Der Browser ist die Anwendung, mit der du deine Webseite aufrufst. Internet Browser wie Google Chrome, Internet Explorer, Mozilla Firefox oder Safari besitzen eine Entwicklerkonsole, über die sich Seiten technisch untersuchen lassen.

Lies hier:

Chrome: https://developers.google.com/web/tools/chrome-devtools/
Firefox: https://developer.mozilla.org/en-US/docs/Tools

Es ist nur ratsam, sich mit solchen Tools näher auseinanderzusetzen.

PeterP58

13.04.2019, 22:11

bleibe dabei, dass der fehler in dieser zeile liegt:

"hrefhttp://localhost/stylesheets/style.cssss"

threadi

14.04.2019, 20:24

@PeterP58

Das ist ja auch völlig falsch geschrieben. Dein 1. und 3. Beispiel passt, das 2. nicht.

RANGObro

Fragesteller

17.04.2019, 12:20

@threadi

ich habe die sachen oben neu geschrieben. in der richtigen datei ist es natürlich richtig und funktioniert wenn man es nicht mit localhost öffnet sondern einfach nen doppelclick auf die datei macht

Chewbacca0

13.04.2019, 21:52

href="/unterordner/datei.dateiendung"

RANGObro

Fragesteller

13.04.2019, 21:53

klappt nicht

Chewbacca0

13.04.2019, 21:55

@RANGObro

Mal mit \ probiert?

href="stylesheets\style.css"

RANGObro

Fragesteller

13.04.2019, 21:56

@Chewbacca0

auch nicht

Chewbacca0

13.04.2019, 21:57

@RANGObro

Probier mal die CSS Datei in den gleichen Ordner zu packen wie die index.php und dann nur href="style.css"

RANGObro

Fragesteller

13.04.2019, 22:00

@Chewbacca0

klapp danke :)

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

HTML Label verschieben?

Möchte gerne das Label im untenstehenden HTML Code verschieben. Hab es mit margin im Css versucht weis aber nicht ganz genau wie es geht.

<!DOCTYPE html>

<html>

<head

<title>Probe Seite</title>

</head>

<body>

<h1> Textfelder erstellen </h1>

<label for "vname"> Vorname:

<button type="button" id="button"> auslesen </button>

</label for "vname">

</body>

</html>

...zur Frage

Visual Studio css stylesheet?

Guten Tag,

ich bin dabei einen "primitiven" Webshop zu erstellen. Allerdings kriege eine Fehlermeldung, dass eine Datei nicht gefunden werden kann. Ich versuche den Hintergrund des Webshop auf eine bestimmte Farbe einzustellen (egal welche, es geht mir um die Funktionalität) ich benutze folgenden command = <link rel="stylesheet" href="style.css">. Ich habe bereits einen neuen Datenpfad geöffnet, die Farbe ausgewählt, aber im Chrome-Editor modus bekomme ich die oben besagte Fehlermeldung "Failed to load resource: net::ERR_FILE_NOT_FOUND" oder "net::ERR_FILE_NOT_FOUND" gibt es hier einen experten?

...zur Frage

JavaScript - Erste Schritte, CSS wird blockiert?

Ich bekomme folgenden Error, wenn ich versuche meine ersten Versuche einer Webseite in Firefox zu laden.

Die Ressource von "http://localhost:63342/FirstTest/style.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff)

Das ist der Code von den Datein.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="placeholder">
        I'm in a div!
    </div>
    <div class="anotherClass">
        I'm in another class!
    </div>
</body>
</html>

CSS

.placeholder{
    background-color: red;
}

.anotherClass{
    background-color: lightseagreen;
}

Leider werden nur die div Elemente ausgeben, woran kann es legen? Ich werde aus der Fehlermeldung nicht schlau.

Schöne Grüße

...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

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

Vorschaubild für Link bei WhatsApp?

Welche Angaben muss ich im HTML-Head setzen, damit ich ein Vorschaubild beim senden eines Links erhalte?

Mein HTML-Head:

<head>
    <title>Webseitentitel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Webseiten Beschreibung" />
    <meta name="author" content="Max Mustermann" />
    <meta name="keywords" content="Schlüsselwort, noch ein Schlüsselwort, ..." />
    <meta property="og:title" content="Webseitentitel" />
    <meta property="og:description" content="Webseiten Beschreibung">
    <meta property="og:url" content="https://www.domain.de/" />
    <meta property="og:image" content="http://domain.de/images/logo.png" />
    <meta property="og:image:secure_url" content="https://domain.de/images/logo.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="325" />
    <meta property="og:image:height" content="325" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="de_DE" />
    <link rel="icon" href="images/logo.png" type="image/png">
    <link rel="shortcut icon" href="images/logo.png" type="image/png">
    <link rel="icon" href="images/logo.png" sizes="32x32" />
    <link rel="icon" href="images/logo.png" sizes="192x192" />
    <link rel="apple-touch-icon-precomposed" href="images/logo.png" />
    <meta name="msapplication-TileImage" content="images/logo.png" />
    <link rel="apple-touch-icon" href="images/logo.png">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <link rel='shortlink' href='https://domain.de/' />
    <link rel="canonical" href="https://domain.de/" />
    <script src="https://kit.fontawesome.com/secret_key.js"></script>
</head>

Laut diesem Post bin ich vorgegangen...

https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing

...ich habe mir auch die Infos von https://ogp.me/ angeschaut.

Ich komme einfach nicht weiter :(

HILFEEEEEEEEE....

...zur Frage

DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>

...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 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

php passwort überpüfung?

Guten Abend, ich habe eine Html Datei erstellt die eine Loginseite darstellt. Dazu habe ich eine PHP Datei erstellt die das Passwort abfragen soll. Aber wenn ich auf einloggen klicke wird mir nur der Code der PHP angezeigt. Also ich kann mich weder einlogen noch sagt mir die PHP ob das Passwort falsch ist. Was kann ich tun.

Der Html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="shortcut icon" type="image/x-icon" href="https://www.flaticon.com/premium-icon/icons/svg/2395/2395608.svg" />
<link rel="stylesheet" type="text/css" href="../CSS/global.css">
</head>
<style type="text/css"></style>
<body>
<div class="form-container">
<div id="benutzer-bild"></div>
<center><h2><b>Login</b></h2></center>
<form method="POST" action="loign.php">
Benutzername: <input type="text" name="user"/><br>
Passwort: <input type="password" name="password"/><br>
<input type="submit" value="Einloggen"/>
</form>
</div>
</body>
</html>
der PHP code:
<?php
$user = $_POST['user'];
$password = $_POST['password'];
if ($user=="Admin" && $password==Admin)
{
  header('location:startseite.html');
}
else
{
  echo "dfgdfgfdgdfgdfg";
}
?>

...zur Frage

HTML Navigationsleiste strecken?

meine navi leiste klebt aneinander also alle kästen.

wie kann ich es auseinander ziehen?

<html>
<head>
<title>X</title>
   <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body bgcolor=#d9d9d9>
<style>
.container {
clear: both;
float: left;
width: 100%;
overflow: hidden;
background: ##56585b;
font-family: Verdana;
font-size: 1em;
}
#navi {
float: left;
position: center;
left: 50%;
margin: 2 auto;
padding: 40;
list-style-type: none;
}
#navi li {
float: left;
position: center;
right: 50%;
}
#navi a {
width: auto;
display: block;
padding: 5px;
line-height: 1.5em;
color: #000000;
background: ##56585b;
border:2px solid #024c68;
text-decoration:none;
}
#navi a:hover {
background: #56585b;
color: #000;
} 
{bcolor: grey} 
div.a {
text-align: center;
}
ul.horizontal li{
display:block;
float:center;
padding:0 10px;
}
</style>
<div class="a">
<u><h1>XXXXXXXXXXXXXXXXXX</h1></u>
</div>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX
 <div class="container">
<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div> 
</body>
</html>

...zur Frage

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?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen