HTML/CSS relative Pfade mit / beginnen oder nicht?

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?

01.02.2024, 22:37

Und weshalb fangen manche die Verlinkung mit / an, trotz, dass es auf selber Ebene liegt? Wie hier z. B:

    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

1 Antwort

Von Experte FaTech bestätigt

ChrisCat1, UserMod Light

01.02.2024, 22:41

Mit "/" am Anfang gibst du den Pfad vom Root-Verzeichnis aus an.

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

Mit "./" am Anfang oder wenn du es weg lässt gibst du den Pfad vom aktuellem Verzeichnis in welchem du dich befindest aus an.

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

Und weshalb fangen manche die Verlinkung mit / an, trotz, dass es auf selber Ebene liegt? Wie hier z. B:

Wenn man alle Pfade vom Root-Verzeichnis aus angibt, ist es einfach einheitlicher auch die Dateien welche im Root-Verzeichnis liegen mit "/" am Anfang zu verlinken.

Tababab

Beitragsersteller

01.02.2024, 22:47

Danke

Ähnliche Beiträge

style Datei im Header CSS?

Ist der style tag im Header der Html Datei eine Verlinkung zu der CSS Datei?

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

Mehrere Html seiten mit einer css Datei?

Kann man mit mehreren Html Dateien auf eine Css datei zugreifen um nicht alles von neu zu kopieren usw. Wenn man für alles eigene classes bzw. ids verwendet zB

...zum Beitrag

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

Wie kann man eine Webseite (HTML/CSS/JS) in WordPress einbinden (unverändert dort einsetzen)?

Kurze Frage,

Ich habe eine Webseite mit HTML/CSS und JS erstellt und möchte diese jetzt bei WordPress einfügen, damit andere, die keine Ahnung von HTML haben diese auch gut bearbeiten können. Funktioniert es vielleicht, einfach die Dateien die man hat hochzuladen? Ich beschäftige mich jetzt schon seit Tagen und komme nicht voran... Ich bin am verzweifeln. Ich würde mich über jede Hilfe freuen.

...zum Beitrag

Bild Datei ins selbe Verzeichnis bringen wie html Datei?

Wie schaffe ich das wenn meine html Datei in VS drin ist? Ich hab keine ahnung wie ich die in einen externen Ordner tun soll.

Wie soll ich den Pfad angeben?

(Bild ist im Ordner namens Pegasus, Bild heißt landschaft.jpg)

Ist kein Problem das Bild woanders hin zu tun damit es einfacher geht, ich weiß nur nicht wie.

So habe ich das gemacht:

body {
        font-family: helvetica, arial;
        font-size: 90%;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        justify-content: center;
        text-align: center;
        background-image: url(Pegasus/landschaft.jpg);
        background-attachment: fixed;
        background-size: cover;
      }

...zum Beitrag

Website schrift ändert sich nicht?

Font face wurde verwendet.

Ich hatte vorher eine andere Schriftart installiert und ausgewählt in der css datei .

nun zeigt mir die webseite noch immer die alte schrift an, sogar dann, wenn ich die schriftart aus dem ordner entferne oder in der css datei den namen umbenenne. (dann müsste es normalerweise die standard html schrift anzeigen)

...zum Beitrag

Stichpunkte mit Html bearbeiten?

Hii ich versuch gerade html zu lernen und will listen machen.

So sieht die Website gerade aus:

Ich möchte das der text von den verschiedenen Stichpunkten verschiedene farben hat also, dass Katze: Lila Hund:Pink Otter:blau. Außerdem möchte ich das die herzen for den Stichpunkten Pfoten sind.

Das ist mein Code:

Wie muss ich den abändern damit das funktioniert?

(Außerdem funktioniert meine Css Datei nicht wäre nett wenn mir da auch wer weiterhelfen könnte)

...zum Beitrag

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zum Beitrag

Statische HTML/CSS Page aktive Seite anzeigen?

Moin,

erstmal vorweg, ich bin kein Webdev, deshalb kenne ich mich damit kaum aus.
Ist es mir möglich, wenn ich keinen Webserver habe, dass ich meine Navbar so dynamisch verwenden kann, dass sie mir anzeigt, auf welcher Seite ich mich gerade befinde?

Zurzeit baue ich die Navbar in einer eigenen HTML Datei auf und binde sie dann via iframe ein. Mir ist bewusst, dass JS das alles regeln könnte, möchte aber wie gesagt einen Webserver vermeiden, da das Endprodukt ohne laufen können soll.

Ideen? Ich möchte auch nicht auf jeder Seite wieder das ganze Inhaltsverzeichnis reinschreiben, sondern am liebsten einen Single-Point-of-Truth, also eine Navigationsdatei haben.

Danke!

...zum Beitrag

Wie kann ich CSS und Java in einer HTML Datei vereinen?

https://codepen.io/x-doggy/pen/dyyEGMW

Möchte das als HTML Seite haben. Wie geht das?

...zum Beitrag

Wo beginnt der Relative Pfad?

Ich habe in meinem Webserver eine Download Datei angegeben z.B. ../Download/beispiel.zip

Der Webserver findet diese Datei allerdings nicht.

Die Datei ist ein Verzeichnis über dem, wo sich das html befindet im Ordner "Download".

Ich verstehe nicht, von wo aus man den relativen Pfad beginnen soll.

...zum Beitrag

Lokale HTML extern hosten?

Hallo, ich habe lokal eine html und dazugehörige css Datei.

Die html Datei wird alle paar Sekunden durch ein Programm verändert.

Nun würde ich diese gern als Webseite von außen erreichbar machen, jedoch unterstützt mein Router mit dem dazugehörigen LTE-Tarif keine Portweiterleitung, da er keine öffentliche IP hat.

Gibt es einen Provider mit dazugehörigem Tool, wo ich die Websiete quasi hosten kann und wobei dann die html mittels Tool vom PC aus alle paar Sekunden auf dem Webserver aktualisiert wird?

Danke im Voraus

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen