Beiträge von MrMurphy

Hallo

Zitat

Wenn man das Cache-Löschen wenigstens per Tastenkombi auslösen könnte.

Das geht bei den meisten Browser entweder mit Strg+F5 oder Alt+F5.

Zumindest beim Firefox kann auch grundsätzlich eingestellt werden, dass kein Cache verwendet werden soll. Das ist grade bei der Erstellung von Webseiten sehr hilfreich.

Gruss

MrMurphy

Hallo

Ohne Link zur Seite werden wir dir kaum helfen können. Quellcodeschnipsel sind zur Hilfe grundsätzlich von Übel.

Gruss

MrMurphy

Hallo

Du baust dir zunächst im header und im footer mit "display: table;" Probleme und versuchst die dann mit ungeeigneten Mitteln zu reparieren.

"display: table;" ist nicht für Layouts, wie du sie offensichtlich erreichen willst, gedacht.

Zudem solltest du dein CSS aufräumen und nur behalten, was auch erforderlich ist.

Auch die unsinnige und überflüssige Verwendung von width- und insbesondere height-Angaben führt nur zu zusätzichen Problemen. Also weglassen und nur dort verwenden, wo die erforderlich sind. height-Angaben sind fast immer überflüssig.

Verwende für das Layout grundsätzlich Flexbox, das ist schließlich extra dafür entwickelt worden.

Gruss

MrMurphy

Hallo

Zunächst solltest du die Reihenfolge der zu ladenden CSS-Dateien ändern. Da die main.css deine Änderungen überschreiben kann sollte sie als letzes aufgeführt werden. Also

<!-- Verlinkung zur Open Sans Schriftart -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <!-- Verlinkung zum Bootstrap Theme -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Verlinkung zum optionalen Bootstrap Theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <!--FB, Pinterest & Insta icon-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Verlinkung zum eigenen CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>

Dann steht die main.css im Unterverzeichnis css. Von diesem Verzeichnis ausgehend musst du den Pfad zum Hintergrundbild bestimmen, da es von dort aus aufgerufen wird.

Also

body {
   background-image: url("../images/company/wood.jpg");
}

Probier das bitte zunächst aus, ich denke, dass wir danach weiterkommen.

Gruss

MrMurphy

Hallo

Du musst die Pfadnamen in der index.html-Datei anpassen und diese danach erneut hochladen. Für das Bild "Screenshot_1.png" steht in der index.html-Datei zum Beispiel

img src="../../Desktop/Bilder/Screenshot_1.png"

Das musst du zu

img src="Screenshot_1.png"

ändern, da das Bild sich auf dem Webserver in dem gleichen Verzeichnis wie die Datei index.html befindet.

Falls du später auf dem Webserver ein extra Bilderverzeichnis erstellst müssen die Pfadnamen entsprechend angepasst werden.

Weiterhin haben sich einige Vorgehensweisen bewährt:

Datei-, Bild- und Pfadnamen sollten nur aus den Kleinbuchstaben des englischen Alphabets und dem Unterstrich bestehen.

Also keine Großbuchstaben, Leerzeichen, Umlaute, Sonderzeichen oder ähnliche.

Gruss

MrMurphy

Ja.

Hallo

Keine Ahnung was da los ist.

Hast du eventuell eine .lnk-Datei in eine .html-Datei umbenannt?

Es wäre wohl hilfreich wenn du uns den Link zu der Seiten geben könntest.

Gruss

MrMurphy

Hallo

Wenn eine bestimmte Datei ohne Angabe des Dateinamens aufgerufen werden soll muss sie in der Regel index.html, index.htm oder index.php heißen. Je nach Provider sind auch andere Namen möglich.

Bei dir heißt eine Datei "index.html.lnk". Das soll wohl die "index.html" sein.

Du hast also entweder die falsche Datei hochgeladen oder der Name wurde beim Hochladen geändert.

Versuch einfach noch mal die "index.html" hochzuladen und achte dabei darauf, die richtige Datei zu erwischen.

Die "index.html.lnk" kannst du anschließend löschen.

Gruss

MrMurphy

Hallo

Zitat

Na ja, hat anscheinend halt jeder seine eigene spezielle Art zu coden

Klar kann jeder seinen Quelltext erstellen wie er will.

Wer bestimmte Ergebnisse erreichen oder benutzerfreundliche Seiten erstellen will sollte sich aber an die Regeln von HTML und CSS sowie bewährte Vorgehensweisen halten.

In Schulungen wird JavaScript zum Lernen für Aufgaben eingesetzt, für die es nicht gedacht ist. Leider wird häufig nicht darauf hingewiesen, dass für die Praxis dann doch andere Lösungen sinnvoller sind.

Ich habe mal ein Beispiel für einen Checkbox-Hack erstellt:

Beispielseite

Die Beispielseite funktioniert in jedem gängigen Browser, da sie nur auf HTML und CSS basiert.

Mit JavaScript könnte zum Beispiel jetzt noch sinnvollerweise die Zugänglichkeit der Seite verbessert werden.

Und noch mal der Hinweis: Grundsätzlich sollten keine Inhalte versteckt werden. Die Beispielseite würde ich als Onepageseite erstellen, deren Inhalt immer komplett angezeigt wird, so dass die Besucher zum Finden aller Informationen nur noch raufscrollen oder runterscrollen müssen.

Das könnte dann so aussehen:

Beispielseite ohne versteckten Text

Gruss

MrMurphy

Hallo

Zitat

sorry, wenn es dir so vorkommt, als würde ich deine Anregungen nicht umsetzten wollen ..

Ich mache nur Vorschläge, ob du die benutzen willst ist ganz alleine deine Entscheidung.

Es geht mir darum dass ich das Gefühl habe, die nicht helfen zu können, weil ich dein Problem nicht richtig erkennen kann. Das

Zitat

Je nach angeklicktem Link werden der Text ausgetauscht ...

habe ich zum Beispiel nicht erkannt. Normalerweise werden über die Links einer Hauptnavigation andere Seiten aufgerufen oder, bei One-Page-Webseiten, zu den entsprechenden Einträge heruntergerollt.

Dein Vorgehen ist ungewöhnlich und hat Nachteile, die beim Erstellen von Webseiten vermieden werden sollten.

Mal abgesehen davon, dass versteckte Inhalte grundsätzlich vermieden werden sollten, da sie für viele Besucher Barrieren darstellen, bietet sich für deine Vorstellungen eher der sogenannte Checkbox-Hack an.

Der Vorteil ist, dass die Checkbox-Hack-Lösung auch bei nicht vorhandenem oder blockiertem JavaScript funktioniert.

Gruss

MrMurphy

Hallo

Zitat

Ich weiß nicht, wie ich das sonst lösen soll ..

Es ist leider nicht klar, was du überhaupt erreichen willst. Wonach richtet es sich zum Beispiel wann welches Bild angezeigt werden soll?

Wenn von mehreren möglichen Inhalten nur bestimmte angezeigt werden sollen ist eher PHP sinnvoll. Damit werden die Inhalte auf dem Server zusammengefügt und den Besuchern keine unnötigen aufgedrängt, welche zum Beispiel unnötigen Traffic verursachen.

Und wie sollen wir dir helfen wenn du selbst einfachste Lösungen nicht umsetzen kannst oder willst?

Für Webseiten setzt du viel zu intensiv auf JavaScript.

Ein Grundsatz ist, das Webseiten auch ohne JavaScript funktionieren sollten. Es ist in der Regel auch kein Problem dies umzusetzen.

JavaScript ist zum Beispiel bei Webshops unverzichtbar und damit sinnvoll.

Gruss

MrMurphy

Hallo

Dein HTML und CSS enthalten leider noch jede Menge Anfängerfehler und Lösungen, die so nicht, oder nicht mehr, verwendet werden sollten.

Ein Problem sind überflüssige height- oder min-height-Angaben. Auf height- und min-height-Angaben sollte so weit wie möglich (also fast immer) verzichtet werden.

Der Grundsatz lautet: Die Höhe von Containern wird von deren Inhalt bestimmt.

Die folgende CSS-Angabe löst dein Problem aus:

Im div mit der id="homeImage" gibt es das Inline-Style height: 300px.

Das musst du löschen.

Gruss

MrMurphy

Hallo

Im CSS steht einmal: position: absolut;

Meiner Kenntnis nach sollte das wohl eher position: absolute; heißen.

Gruss

MrMurphy

Hallo

Zitat

Sonst gibt es keine anderen Fehler/Möglichkeiten. Da liege ich richtig oder ?

Ja.

Gruss

MrMurphy

Hallo

In der Regel doch. Dann liegen die Bilder nicht in dem Pfad/Ordner.

Gruss

MrMurphy

Hallo

Entweder liegt das Bild nicht in dem Ordner oder Bildname / Pfadname sind verkehrt.

Hast du Groß-/Kleinschreibung beachtet?

Gruss

MrMurphy

Hallo

Die Abstände kommen von

nav ul {
   ...
   display: inline-block;
}

Alle inline-Elemente (damit auch inline-block-Elemente) bringen einen Mindestabstand nach rechts und nach unten mit sich.

Wenn du als Grundlage HTML5 verwendest solltest du auch die Möglickeiten von HTML5 nutzen. Zum Layouten ist deshalb Flexbox besser geeignet, zumal es nicht so viele Nebenwirkungen wie bei inline-Elementen oder der Verwendung von float mit sich bringt.

Gruss

MrMurphy

Hallo

Das geht rein mit HTML und CSS nur über normale Klassen oder den sogenannten Checkbox-Hack.

Für eine konkrete Hilfe sind deine Infos aber viel zu mager.

Gruss

MrMurphy

Hallo

So einen Befehl oder so eine Anweisung gibt es nicht.

Es gibt verschiedene CSS-Anweisungen und Verfahren um das Layout von Webseiten zu gestalten:

position: relative, absolute, fixed, ...
display: flex, table, ...
float
...

jeweils mit all den dahinter stehenden Möglichkeiten.

Welches oder welche davon für dein aktuelles Projekt sinnvoll sind ist deinen Infos leider nicht zu entnehmen.

Gruss

MrMurphy

Hallo

Dein Infos sind leider immer noch sehr vage. Ein einzelnes Bild kann zudem nicht responsive sein, es kann sich nur der Breite des Fensters anpassen. Der html-Quelltext will eher folgendermaßen aussehen:

<header class="pageheader">
      <figure>
         <img src="images/kopf.png" alt="Hier gehört immer ein Text rein der das Bild beschreibt">
      </figure>
   </header>

Aktuelle Seiten sollten grundsätzlich mit HTML5 und CSS3 erstellt werden. Dazu gehört dann auch das passende Elemente wie header und figure benutzt werden.

id sollten nur verwendet werden wenn sie sachlich erforderlich sind, ansonsten ist class besser geeignet. Wenn weder id noch class erforderlich sind sollten beide gleich wegbleiben. In deinem Beispiel reicht eine class für header und ist auch sinnvoll, da das header-Element mehrmals auf einer Seite erscheinen darf.

Da weder für figure noch für img spezielle Angaben erforderlich sind die class oder gar id erfordern bekommen die beiden Elemente auch keine. Die notwendigen speziellen Angaben können problemlos über die class vom header zugewiesen werden oder allgemein erstellt werden wie in meinem Beispiel.

Zudem sollte der html-Quelltext nur die wirklich notwendigen Angaben enthalten, also möglichst schlank und damit übersichtlich sein.

Grafiken sollten keine Attribute wie width, height oder border enthalten. Das wird mit CSS geregelt.

Grafiken sollten so bearbeitet werden, dass sie nur so groß sind wie sie maximal erscheinen sollen, auch um unnötigen Traffic zu vemeiden.

<div id="gesamtseite">

So ein Container ist (und war) in der Regel überflüssig und stört nur - also weglassen.

Zum CSS

Das könnte folgendermaßen aussehen:

figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .pageheader {
         background-color: #787878;
         background-image: url(../images/header2.jpg);
         background-repeat: no-repeat;
         background-position: center;
         display: flex;
         justify-content: center;
      }

Angaben wie

html,
      body {
         font-size: 101.01%;
         height: 100.1%;
      }

sind heutzutage nicht mehr erforderlich und sinnvoll. Also weglassen.

Angaben wie

html,
      body {
         text-align: center;
      }

sind an dieser Stelle nicht sinnvoll. So sollten mit text-align immer nur einzelne Elemente zentriert werden, niemals eine gesame Webseite oder ein größerer Container. Und, wie die Bezeichnung bereits hergibt, sollte es sich nur um Text-Elemente wie p, h1 bis h6, li und so weiter handeln.

background-image: url(../images/header2.jpg);
         background-repeat: no-repeat;
         background-position: center top;

Diese Angaben sollten dem betroffenen Container (in meinem Beispiel dem header) direkt zugewiesen werden, falls sie überhaupt erforderlich sind.

Deine Grafik lässt vermuten, dass deine Webseite mehr Inhalt und mehr CSS enthält. Ich kann nur das berücksichtigen was du hier zeigst.

Gruss

MrMurphy