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>
Beiträge von Sailor
-
-
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! -
...
Geht das auch mit HTML?
...
Nein! Mit HTML fügt man Inhalte in die Webseite ein - mit CSS bestimmt man, wie diese Inhalte aussehen.
Eine Mischung von beidem geht aber. Versuche mal, ob das bei Jimdo geht.
<td style="color: transparent;">....</td> -
Mit CSS, falls das bei Jimdo geht.
Für den betroffen Text - bzw für das <td> Element entwederfont-size: 0px;
oder
color: transparent;
notieren.
-
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...HTMLLaden 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! -
Du hast aber ein <div></div> mit einem <p><div></div></p> eingeschlossen - das akzeptiert der der Validator nicht.
Mache <div><p></p></div> und es sollte valide sein.
Google man nach HTML Blockelemente. -
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!HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Absolute</title> <style> span.absolut { position: absolute; width: 200px; height: 200px; color: #f00; border: 1px solid #f00; background-color: rgba(100,100,100,0.8); } </style> </head> <body> <h1>Ein Demo</h1> <p>Lorem ipsum dolor sit amet, <span class="absolut">Hier bin ich und hier bleib ich</span> consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p> </body> </html>
-
Deine beiden 'fiddles' haben auch nichts mit dem Dropdown Menü zu tun. Du hast einfach eine absolute positionierte, blaue Box in eine rote gepackt!
Was soll da wie ausgerichtet und untereinander sein? -
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!
HTML
Alles anzeigen.pageheader p:nth-of-type(odd) { width: 240px; /*die Breite der p-Elemente / Links*/ margin: 10px auto; /*Positionierung der Elemnte 10px Abstand oben unten - auto links rechts (=zentriert)*/ } .pageheader p a { width: 100%; display: block; padding: 0.3rem 0; color: #483d8b; background-color: #63B8FF; border: 1px solid #000; border-radius: 0.3rem; } .pageheader p a:hover { background-color: black; color: gold; }
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:
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:
und gleich dahinter dann die Formatierung für die Lupe:
HTMLfigure 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':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/Kapitel1Ansonsten 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. -
Das lässt sich mit 'cursor: zoom-in;' oder 'cursor: zoom-out; (+Lupe / -Lupe) - ggf mit -webkit- Zusatz.
Schau mal hier:
https://www.mediaevent.de/css/userinterface.htmlFunktioniert aber nicht bei allen Browsern:
https://caniuse.com/#feat=css3-cursors-newer