Beiträge von Sailor

    Das mag sein, dass das Stylesheet auch auf dem Server liegt... aber nicht an der Stelle, die du mit
    <link rel="stylesheet" type="text/css" href="http://www.malerei2000.de/style2000.css"> angegeben hast!
    Wenn ich die Datei aufrufen will kommt das:<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head>
    <title>404 Not Found</title>
    </head><body>
    <h1>Not Found</h1>
    <p>The requested URL /http://www.malerei2000.de/style2000.css was not found on this server.</p>
    </body></html>

    In deinem HTML Quellcode steht in Zeile 177ff..

    a:hover {

    }


    Wenn du diese Stelle abänderst in

    a:hover {
    background-color: black;
    color: gold;
    }

    dann sollten die Hover-Effekte links und rechts gleich sein.

    Du musst dann aber bitte schauen, denn mit a:hover sprichst du alle Links auf deiner Seite an. Wenn da jetzt woanders einer ist der sich anders verhalten soll, dann müsstest du dich nochmal melden.

    Der Unterschied liegt darin, dass du einmal

    a:hover

    definierst. Damit sind im Prinzip alle Hyperlinks auf der Seite angesprochen - und dann sagst du...

    .navigation a:hover

    Damit werden jetzt die Hyperlinks in einem (Eltern)Element mit der Klasse 'navigation' angesprochen.
    Der Link auf der rechten Seite hat aber kein Elternelement mit der Klasse 'navigation'. Deswegen fühlt er sich nicht angesprochen.

    Das liegt daran, dass du es in deinem Stylesheet (oder in einem Style-Element im Quellcode so festgelegt hast!
    Die Links auf der linken Seite...


    .navigation a:hover, .navigation a:active, .navigation a:focus {
    background-color: black;
    color: gold;
    }

    und rechts...

    a:hover {
    }

    siehst du den Unterschied?

    Mitunter hilft ein Rechtsklick auf das betreffende Element mit der folgenden Auswahl 'Element untersuchen', um solche Probleme schnell zu identifizieren.

    Die Lösung gibt es bestimmt - aber nicht mit 2 CSS Stylesheets, sondern mit einer sinnvollen Verwendung von CSS Klassen.
    zB umschließe die Inhalte deiner Include-Datei mit einem <div class="zwei-spaltig"> .. deine Inhalte...</div>, dann kannst du in deinem EINEN CSS Stylesheet die Elemente gezielt ansprechen.

    Oh je... diese Google-abstraf-Manie!
    Mach deine Seite valide und mit vernünftigen Strukturen und Inhalten, dann passt das schon... ich denke, deine Idee mit den Bildern in Tabellen kostet dich diesbezüglich mehr 'Minus'-Punkte als irgendein versteckter Text.
    Zumal er mit 'color: transparent;' nicht versteckt ist - man sieht ihn nur nicht!

    Wenn du alle Fehler beseitigt hast, dann schau mal in deine 'design.css' - da steht folgendes:

    HTML
    .tab-panels {
        height: calc(100% - 110px);
        width: calc(100% - 200px);
        overflow-y: scroll;
        background: #fff;
        position: fixed;
        z-index: -1;
        border: solid 1px #acd7fb;
    }


    Das 'z-index: -1;' ist dein Problem!
    Setze den Wert auf eine positive Zahl (zB 10), dann sollte der Link auch im IE 11 funktionieren.
    Mich wundert nur, dass die anderen Browser das so problemlos akzeptieren, denn eigentlich hat der IE Recht - oder?

    Da sind immer noch die bereits benannten Fehler drin:
    Die ID's 'tab1' und 'tab2' sind mehrfach vergeben! Eine ID darf nur einmal pro Dokument vergeben werden!
    Des weiteren immer noch das falsch positionierte </p> (siehe Beitrag #8 )
    Die Webkonsole meldet mir...

    HTML
    Laden fehlgeschlagen für das <script> mit der Quelle "http://connect.facebook.net/en_US/sdk.js".
    ...
    Source-Map-Fehler: request failed with status 404
    Ressourcen-Adresse: http://www.denkmodelle.de/easyComment/app/assets/lib/jquery-min.js
    Source-Map-Adresse: jquery.min.map


    Da stimmt was mit den Linkadressen nicht!
    Beseitige erst mal die Fehler und dann prüfe, ob sich dein Problem damit schon gelöst hat!

    Es macht immer Sinn sich mit solchen Dingen zu beschäftigen! Nicht nur im Berufsleben, sondern auch privat kann man das gut gebrauchen und erhöht mit Sicherheit auch die eigene Qualifikation und den Stellenwert, wenn es um Bewerbungen auf dem Arbeitsmarkt geht. Und Tabellenkalkulation, Textverarbeitung, Datenbankanwendungen gehören in manchen Berufssparten einfach dazu.
    Ob man sich das selber beibringen kann... jein... so der eine oder andere Lehrgang kann da schon angebracht sein. Die Programme sind heute so vielfältig, dass man selbst gar nicht darauf kommt, was die alles zu leisten im Stande sind, bis es einem mal gezeigt wird.

    Ein mit position: absolute; formatiertes Element erscheint immer genau da, wo es im Textfluss der Seite eingefügt wird, vorausgesetzt, es wird nicht abweichend positioniert (zB durch top, left, right, bottom).
    Es ist nur aus dem Textfluss herausgenommen und wird nicht von andere Elementen 'umflossen'. Es sitzt einfach oben drüber und belegt auch keinen Platz, wie es ein Element im Textfluss tun würde.
    Wenn du also eine absolut positioniertes Element in eine Liste einfügst, dann ist es auch genau an der Stelle der Liste, wo du es einfügst.
    Vielleicht macht es das folgenden Beispiel ja etwas klarer!

    Der folgende CSS Code sollte dir erst mal helfen - passt zwar wegen des unterschiedlichen Layouts der beiden Seiten nicht zu 100%, aber das kannst du ja nach belieben nachbessern!

    Bitte auf unerwünschte Nebenwirkungen auf anderen Seitenteilen prüfen.

    Dein Vorhaben ist von Anfang an zum scheitern verurteilt - zumindest was Teil 1 deiner Frage betrifft.
    - Tabellenspalten (in einer Tabellenreihe) sind immer gleich lang! Siehst du, wenn du mal einen Rahmen um die td's anzeigen lässt (td {border: 1px solid #000;}
    - Wie der Inhalt dann angezeigt wird, hängt maßgeblich von der Breite des Anzeigebereiches ab und selbst wenn du es schaffst, das auf deinem Monitor hinzubekommen, wird der nächste Nutzer, der ein anders Display (Bildschirmauflösung) hat, nicht das Gleiche sehen, wie du! Die Anzeige passt sich an den Bildschirm an.
    Das Einzige, was annähernd funktionieren könnte, wäre der Tabelle (und den td's) eine feste Breite zu geben (zB 1000px) aber so richtig empfehlenswert ist das nicht. Du solltest dich nach Alternativen zur Tabelle umschauen - zB 'Flexbox'.

    Dein zweiter Punkt ließe sich bestimmt mit 'padding' und/oder 'margin' erledigen - dazu müsst man allerdings sehen können, was du da an Code hast.

    Ok - Eins nach dem Anderen.
    Wenn ich dein CSS aus dem ersten Beitrag richtig deute, dann hast du in deinem HTML Teil irgendwas stehen, das so aussieht:

    HTML
    <figure>
       <img src="dein_Bild.jpg" alt="ein Bild">
    </figure>


    das solltest du wie folgt abändern/ ergänzen:

    HTML
    <figure>
       <img class="lupe" src="dein_Lupe.jpg" alt="ein Lupe">
       <img class="mein_bild"  src="dein_Bild.jpg" alt="ein Bild">
    </figure>


    Den Bildern habe ich jeweils eine Klasse (class) zugewiesen, damit man sie mit CSS einzeln ansprechen kann.
    Die Klasse hier im class=" " wird nur der Klassenname angegeben. Um diese Klasse im CSS anzusprechen muss ein Punkt (.) davor stehen! Also im CSS '.lupe' und '.mein_bild'.

    Dann musst du, bei der jetzt schon in deinem CSS vorhanden Anweisung natürlich die Klasse noch ergänzen... so:

    HTML
    figure img.mein_bild {
      width: 100%;
      border-radius: 3px 3px 0 0;
    }

    und gleich dahinter dann die Formatierung für die Lupe:

    HTML
    figure img.lupe {
       position: absoute;
       width: 30px;     /* Breite nach Bedarf ändern */ 
       height: 30px;   /* Höhe nach Bedarf ändern */ 
       border: 1px solid #000;  /* Bei  Bedarf ändern */
       z-index: 99;
    }


    Zu Schluss musst du die Lupe noch ausblenden, wenn du mit der Maus über das figure-Element 'hoverst':

    HTML
    figure:hover img.lupe {
       display: none;
    }

    Sollten Probleme auftauchen oder irgendwas nicht so funktionieren wie gedacht, wieder hier melden.

    Oh je... dann wird das nicht so einfach.
    Es ist vielleicht nur die zweitbeste Idee, sich HTML und CSS auf diese Weise beizubringen... abkupfern ohne zu verstehen. Besser könnte es sein, wirklich mit den Grundlagen anzufangen.
    Wenn dein Englisch einigermaßen ist solltest du mal das hier durchackern:
    https://www.w3schools.com/html/default.asp
    oder das hier in deutsch:
    https://wiki.selfhtml.org/wiki/HTML/Tuto…nstieg/Kapitel1

    Ansonsten gilt immer, was du auf deiner siehst... Texte, Bilder, Links, Tabellen, Listen und und und... fügt man in den HTML Teil - also zwischen den <body> </body> Tags ein.
    Wie das so eingefügte dann aussieht... Layout, Farbe, Größe, Position und und und... macht an dann mit CSS im <head> </head> Bereich in der <style>-Anweisung. Oder besser mit einem externen Stylesheet!

    Das stimmt... das ist eine ganz andere Baustelle. Habe ich deine Frage nicht richtig gelesen und/oder falsch verstanden :(.
    Kann das jetzt so schnell nicht testen, aber von der Idee her sollte es so funktionieren.
    Dein Lupenbild schreibst du zusammen mit dem richtigen Bild in das figure-Element. In der Reihenfolge <img Lupe><img Bild>
    Das Lupenbild musst du dann mit 'position: absolute;' aus den Textfluss herausnehmen und, wenn erforderlich, mit 'z-index: 99;' in den Vordergrund holen.
    Bei hover über das figure-Element musst du dann für das Lupenbild auf 'display: none;' setzen.