Webdesign – die besten Beiträge

Verwandte Themen
einefrage188
03.05.2024, 19:12
Mit Bildern

HTML- falscher Dateipfad, wenn ich html-datei auf Browser öffne :(?

Hallo,

mein Order hat den Dateipfad ''/home/zara/Schreibtisch/Code'' (darin HTML-datei und ein Bilderordern)

wenn ich aber die HTML Datei im Browser öffne wird in der Addresszeile der Pfad ''file:///run/user/1000/doc/7b8bb7e5/index.html'' angezeigt :-((.

Meine Bilder für die Website habe ich aber im ersten Pfad. Im zweiten Pfad ist nur die HTML Datei und ich weis NICHT wie der Ordner mit dem zweiten Pfad überhaupt entstanden ist. Ich kann den Ordner nicht löschen, würde eh nichts bringen. Den Inhalt löschen bringt auch nichts, dann ist es gelöscht und die HTML funktioniert nicht mehr auf dem browser, auch wenn ich diese HTML im und aus dem ersten Ordner des ersten Pfades öffne, so wie ich es will. Wenn ich den Inhalt des zweiten Ordners mit dem zweiten Pfads lösche, passiert nichts im ersten Ordner (HTML und Bilderordner bleiben erhalten) den ich selber angelegt habe und auch nutzen will.

Ich habe nicht versucht das Bild in den zweiten Ordner zu packen(es würde bestimmt funktionieren),weil ich diesen Ordner nicht haben möchte.

Es ist so, dass ich auf meinem Desktop (Schreibtisch genannt(Linux Ubuntu) ) einen Ordner ''Code'' und darin die index.html datei und ein Order ''Bilder'' mit einem Bild.

Ich habe die Tags und den Code richtig geschrieben denke ich (<img src="bilder/header.jpg"> oder <img src="header.jpg"> und trotzdem wird das bild nicht angezeigt, WEIL das Bild NUR im ersten Ordner mit meinem Pfad vorhanden ist aber nicht im selbständig erstellten Ordner, den ich löschen will aber nicht kann. In diesem zweiten Ordner befindet sich die HTML datei die ich dorthin niemals gespeichert hatte, aber das Bild fehlt. Und wie oben beschrieben, wenn ich die HTML datei aus dem ersten ordner öffne, wird diese aber aus dem zweiten ordner geöffnet.

Ich bin ein Wirrkopf und kann mich schlecht ausdrücken, ich hoffe man versteht was für ein Problem ich habe :)danke schonmal.

Achja, ich will wissen, wie bekomme ich den Browser dazu, dass er die HTML, die ich im ersten Ordner anklicke, auch aus diesem Ordner heraus öffnet und diesen Pfad auch anzeigt?

Bild zum Beitrag
Linux, HTML, Webseite, Code, Webdesign, Webentwicklung
2 Antworten
Rolajamo
20.04.2024, 12:00

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

  • ...dass Content 1 von Opacity 100 auf 0 geht
  • ...dass Content 1 in Minus Y-Richtung 20px bewegt wird
  • ...dass Content 2 von Opacity 0 auf 100 geht
  • ...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>
Animation, Technik, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort

Meistgelesene Beiträge zum Thema Webdesign

Mehr meistgelesene Fragen zu Webdesign