nicht angemeldet
referenz in css auf bestimmte html-seite
Matthias ApselHallo an die Webgemeinde,
Frage: kann man eigentlich im css eine referenz auf eine einzelne html-seite beziehen, in meinem Falle auf mypictures.html? ich würde gerne links auf externe websites
figcaption a[href^="http://"]:link, #content a[href^="http://"]:visited { color: #00FF00; text-decoration: none; } /*externe Links im Text */
was muss ich da vor figcaption setzen?
bari.
-
Hallo,
Frage: kann man eigentlich im css eine referenz auf eine einzelne html-seite beziehen, in meinem Falle auf mypictures.html? ich würde gerne links auf externe websites
figcaption a[href^="http://"]:link, #content a[href^="http://"]:visited { color: #00FF00; text-decoration: none; } /*externe Links im Text */
was muss ich da vor figcaption setzen?
Wenn ich dich richtig verstanden habe, willst du für _externe_ Links eine anderen CSS Formatierung haben? Wenn ja, dann gib deinen externen Links eine class oder id und diesen gibst du dann die jeweiligen Eigenschaften.
-
Wenn ich dich richtig verstanden habe, willst du für _externe_ Links eine anderen CSS Formatierung haben? Wenn ja, dann gib deinen externen Links eine class oder id und diesen gibst du dann die jeweiligen Eigenschaften.
Danke, hab nun eine class gemacht, doch irgendetwas stimmt noch nicht, wie man hier sehen kann (ganz unten eingangs der letzten Fotos). Die eine class im figure-element wird berücksichtig, die andere jedoch nicht.
Wäre es besser, zwei figcaption zu machen, als zwei unterschiedlich formatierte figcaption in ein figure-element zu tun?
bari
-
Om nah hoo pez nyeetz, bari!
Wenn ich dich richtig verstanden habe, willst du für _externe_ Links eine anderen CSS Formatierung haben? Wenn ja, dann gib deinen externen Links eine class oder id und diesen gibst du dann die jeweiligen Eigenschaften.
Danke, hab nun eine class gemacht, doch irgendetwas stimmt noch nicht, wie man hier sehen kann (ganz unten eingangs der letzten Fotos). Die eine class im figure-element wird berücksichtig, die andere jedoch nicht.
Alternativ könntest du auch dem body-Element eine Klasse geben und mit dem Nachfahrenselektor arbeiten. Dadurch reduziert sich die Anzahl zusätzlicher class-Attribute ggf. deutlich.
Wäre es besser, zwei figcaption zu machen, als zwei unterschiedlich formatierte figcaption in ein figure-element zu tun?
Figure-Elemente dürfen höchstens ein figcaption-Element als direktes Kind haben.
Matthias
-
Alternativ könntest du auch dem body-Element eine Klasse geben und mit dem Nachfahrenselektor arbeiten. Dadurch reduziert sich die Anzahl zusätzlicher class-Attribute ggf. deutlich.
Wäre es besser, zwei figcaption zu machen, als zwei unterschiedlich formatierte figcaption in ein figure-element zu tun?
Figure-Elemente dürfen höchstens ein figcaption-Element als direktes Kind haben.
danke, Matthias, ich grüble immer noch an der Lösung herum.
es sieht nun so aus:
<body class="mypictures">
<figure><figcaption>text<a href="http://...><br>
<span>anderer Text</span></figcaption></figure>im css:
``.mypictures {font: normal 1em helvetica,arial,sans-serif; color: brown; }
.mypictures a[href^="http://"]:link, .link-mypictures a[href^="http://"]:visited { color: green; text-decoration: none; } /*externe links in mypictures*/
.mypictures a[href^="http://"]:hover,.link-mypictures a[href^="http://"]:focus { color: green; text-decoration: underline; } /*green */
.mypictures span{ font: italic 0.8em helvetica,arial,sans-serif; color: red; }doch css wirkt sich nur auf "anderer Text", nicht auf "Text" des figcaption-elements.
Ein Nachfahrelement sollte doch unabhängig von der Stellung innerhalb anderer Elemente wie figure, figcaption erkannt werden, oder? oder liegt es am Attribut; dieses habe ich genau wie anderere Attribute für ext. links übernommen und anders formatieren wollen.
Ich sehe im moment nicht mehr durch.
bari.
-
Fehler gefunden, der Link ist https anstatt http.
Sollte ich jetzt die alten links auch auf https abändern oder alle überprüfen, ob sie http oder https sind?
bari.
-
Om nah hoo pez nyeetz, bari!
Fehler gefunden, der Link ist https anstatt http.
Sollte ich jetzt die alten links auch auf https abändern oder alle überprüfen, ob sie http oder https sind?
In beiden Fällen beginnt das href-Attribut mit ‚http‘.
Matthias
-
In beiden Fällen beginnt das href-Attribut mit ‚http‘.
aber es hat nur funtkioniert, als ich .mypictures a[href^="https://"] in das css schrieb. Mit .mypictures a[href^="http://"] blieb es unberührt und der firefox inspector sagte sinngemäss: von body geerbt (d.h. body meiner eigentlichen Websites),
Bei der Zusammensetzung mit Klassen hat man mehr Variation:
body.mypictures {...} und
.mypictures {...}
ergab bei mir die gleiche Formatierung, so wie ich das weiter oben auch vermutet habe.bari.
-
Om nah hoo pez nyeetz, bari!
In beiden Fällen beginnt das href-Attribut mit ‚http‘.
aber es hat nur funtkioniert, als ich .mypictures a[href^="https://"] in das css schrieb. Mit .mypictures a[href^="http://"] blieb es unberührt und der firefox inspector sagte sinngemäss: von body geerbt (d.h. body meiner eigentlichen Websites),Schreib
.mypictures a[href^="http"]. Da sind beide Varianten drin.Matthias
-
Guten Morgen Matthias,
aha, jetzt seh' ich es, du meinst ohne Doppelpunkt und 2x backslash. Ist ja auch logisch, wenn man den Doppelpunkt und die beiden backslashes nicht als zusammenhängendes Element mit http versteht. Dann könnte man im Prinzip im selfhtml-Wiki bei css-selektoren-attributselektoren-teilübereinstimmung im Beispiel nr. 1 auch nur a[href^="http"] schreiben anstatt a[href^="http://"], oder ist das nicht ganz das selbe?
Probier' ich nun gleich aus.
bari.
-
Om nah hoo pez nyeetz, bari!
aha, jetzt seh' ich es, du meinst ohne Doppelpunkt und 2x backslash. Ist ja auch logisch, wenn man den Doppelpunkt und die beiden backslashes nicht als zusammenhängendes Element mit http versteht. Dann könnte man im Prinzip im selfhtml-Wiki bei css-selektoren-attributselektoren-teilübereinstimmung im Beispiel nr. 1 auch nur a[href^="http"] schreiben anstatt a[href^="http://"], oder ist das nicht ganz das selbe?
[href^="foo"] bedeutet: Das href-Attribut beginnt mit foo. Der Unterschied ist also
- beginnt mit
http - beginnt mit
http://
beim ersten ist eben
https://mit drin, beim zweiten nicht.Man sollte vielleicht, um alle externen Links abzudecken, den Selektor ~~~css a[href^="http"], a[href^="//"]
verwenden. Letzteres href-Attribut lässt dem Browser die Wahl des Protokolls. Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Notar und Notarzt](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=N#notar). -
Hallo Matthias,
Man sollte vielleicht, um alle externen Links abzudecken, den Selektor ~~~css
a[href^="http"], a[href^="//"]
> verwenden. Letzteres href-Attribut lässt dem Browser die Wahl des Protokolls. gilt das auch für solche links wie für dieses forum (forum.de.selfhtml.org/...), das kein http und keinen Doppelslash in der web-adresse hat (wenigstens ist bei mir keiner sichtbar), oder solche wie bei der faz, die www.faz.net/... als web-adresse hat. Kurz, ein Doppelslash und http ist nicht bei allen websites sichtbar, werden diese websites trotzdem berücksichtigt, wenn man im css-Attribut a[href^="//"] definiert? bari.-
Om nah hoo pez nyeetz, bari!
Man sollte vielleicht, um alle externen Links abzudecken, den Selektor ~~~css
a[href^="http"], a[href^="//"]
> > verwenden. Letzteres href-Attribut lässt dem Browser die Wahl des Protokolls. > > gilt das auch für solche links wie für dieses forum (forum.de.selfhtml.org/...), das kein http und keinen Doppelslash in der web-adresse hat (wenigstens ist bei mir keiner sichtbar), oder solche wie bei der faz, die www.faz.net/... als web-adresse hat. > > Kurz, ein Doppelslash und http ist nicht bei allen websites sichtbar, werden diese websites trotzdem berücksichtigt, wenn man im css-Attribut a[href^="//"] definiert? Was die Browser in der Adresszeile anzeigen, ist irrelevant. Wichtig ist einzig und allein, wie es im Quelltext steht. Wenn du beispielsweise `<a href="forum.de.selfhtml.org">SELFHTML-Forum</a>`{:.language-html} schreibst, ist das zunächst einmal ein ungültiger URI[1]. Dass die Browser versuchen, da was draus zu machen, ist ein anderer Schuh. `a[href^="//"]`{:.language-css} bedeutet, das href-Attribut beginnt mit ‚//‘. Beginnt denn ‚forum.de.selfhtml.org/‘ mit einem Doppelslash? [1] Ungültig ist hier falsch. Es wäre eine Ressource namens ‚forum.de.selfhtml.org‘, die im selben Verzeichnis wie der angegebene Basis-URI liegt, bzw. wenn dieser fehlt, im selben Verzeichnis wie die aufrufende Datei. Bei einer Direkteingabe in die Adresszeile wird der Browser dort wahrscheinlich nicht finden, was er sucht. Deshalb probiert er halt ‚http://forum.de.selfhtml.org‘ und wird fündig. Wenn so ein Link im Quelltext einer HTML-Datei steht und die (lokale) Ressource ‚forum.de.selfhtml.org‘ nicht vorhanden ist, gibt es eine 404-Fehlermeldung. Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [NOS und Nostalgie](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=N#nos). -
Man sollte vielleicht, um alle externen Links abzudecken, den Selektor ~~~css
a[href^="http"], a[href^="//"]
> > > verwenden. Letzteres href-Attribut lässt dem Browser die Wahl des Protokolls. aha, du meintest, man muss beide href's ins css-attribut schreiben. Ich verstand, nur das letztere, da es dem browser die Wahl lasse, sprich 2 slashes ersetzten http. bari.-
Om nah hoo pez nyeetz, bari!
aha, du meintest, man muss beide href's ins css-attribut schreiben. Ich verstand, nur das letztere, da es dem browser die Wahl lasse, sprich 2 slashes ersetzten http.
Es gibt keine CSS-Attribute.
Wenn du in deinem HTML-Dokument folgende Links hast:
<a href="http://example.com">example.com</a> <a href="https://example.net/foo/bar.html">bar.html</a> <a href="//example.org">Hier entscheidet der Browser nach Rücksprache mit dem ausliefernden Server, welches Protokoll verwendet wird</a>kannst du mit dieser CSS-Regel alle externen Links formatieren.
a[href^="http"], a[href^="//"] { color: red; }Wenn du natürlich einen internern Link zu einer Datei namens ‚httpublications.html‘
<a href="httpublicationen.html">Horst Theodor Täubers Publikationen</a>hast, wird dieser Link trotzdem wie einer zu einer externen Seite formatiert, weil das href-Attribut eben mit ‚http‘ beginnt.Der Attributselektor gilt für alle Attribute:
[id^="img"]greift alle Elemente, deren ID mit ‚img‘ beginnt. Das ist keine Besonderheit von Link-Elementen oder href-Attributen.Informiere dich über die grundlegenden Vokabeln: Tag - Element - Attribut (HTML), Selektor - Eigenschaft - Wert (CSS)
Matthias
-
-
-
- beginnt mit
-
-
-
-
-
-
Om nah hoo pez nyeetz, bari!
danke, Matthias, ich grüble immer noch an der Lösung herum.
es sieht nun so aus:
<body class="mypictures">
<figure><figcaption>text<a href="http://...><br>
<span>anderer Text</span></figcaption></figure>»»
doch css wirkt sich nur auf "anderer Text", nicht auf "Text" des figcaption-elements.
Ein Nachfahrelement sollte doch unabhängig von der Stellung innerhalb anderer Elemente wie figure, figcaption erkannt werden, oder? oder liegt es am Attribut; dieses habe ich genau wie anderere Attribute für ext. links übernommen und anders formatieren wollen.
Dein HTML ist kaputt
<figcaption>Text <a href>Linktext</a> <span>anderer Text</span></span> wäre syntaktisch korrekt, ob es auch sinnvoll ist, weiß ich nicht. Damit kannst du jetzt innerhalb des figcaption-Elements 3 verschiedene Textformatierungen unterbringen. Wenn ich morgen dran denke, schau ich mir deine Seite mal etwas intensiver an. Mit dem Tablet vorm Fernseher wird das nichts.
Matthias
-
-
-
-
-
sorry, so sollte es heissen
figcaption a[href^="http://"]:link, figcaption a[href^="http://"]:visited { color: #00FF00; text-decoration: none; }
usw für weitere formatierungen
-
Om nah hoo pez nyeetz, bari!
Sprachwahl:
ul darf nur li als direktes Kind haben und die li-Elemente sind Elemente einer Aufzählung, in deinem Fall also ausschließlich die Elemente mit den Sprachen.
<ul id="spr"> <span class="mypictures">To go to the start page of your language, click on a language button.</span> <li><a href="de/index.html">Deutsch</a></li> <li><a href="en/index.html">English</a></li> <li><a href="fr/index.html">Français</a></li> <li><a href="ru/index.html">Русский</a></li><br><br> <span class="mypictures">or click </span><a href="index.html">here</a><span> to go back to the Welcome page.</span> </ul>(Linksbündig würde das werden, indem du ul#spr float: left spendierst. Das float ist hier allerdings überflüssig, also lass es weg.)
Besser:
<div id="Sprachwahl"> <!-- Eventuell nav, bin aber nicht sicher[1] --> <p>To go to the start page of your language, click on a language button.</p> <ul> <li><a href="de/index.html">Deutsch</a></li> <li><a href="en/index.html">English</a></li> <li><a href="fr/index.html">Français</a></li> <li><a href="ru/index.html">Русский</a></li> </ul> <p><span>or click </span><a href="index.html">here</a><span> to go back to the Welcome page.</span></p> </div>Bilder:
Gib allen Bildern aussagekräftige alt-Attribute mit, die Suchmaschinen werden sich freuen.
[1]
„Es gilt wie immer die Faustregel für semantisches HTML: wenn man die Wahl zwischen A und B hat und nach 5 Minuten Nachdenken und Recherche nicht zweifelsfrei klar ist, was richtiger ist, ist es vermutlich ziemlich egal.“ (Peter Kröner)Matthias
--
Das Problem bei Zitaten aus dem Internet ist, dass man nicht weiß, ob sie wahr sind. (Wilhelm Tell)
-
ul darf nur li als direktes Kind haben und die li-Elemente sind Elemente einer Aufzählung, in deinem Fall also ausschließlich die Elemente mit den Sprachen.
...schade, "darf" man keine weiteren eigenen Kindelement kreieren...;-), das erhaltene layout hat mir mit Ausnahme der fehlenden Linksbündigkeit gerade gepasst.
<ul id="spr">
<span class="mypictures">To go to the start page of your language, click on a language button.</span>
<li><a href="de/index.html">Deutsch</a></li>
<li><a href="en/index.html">English</a></li>
<li><a href="fr/index.html">Français</a></li>
<li><a href="ru/index.html">Русский</a></li><br><br>
<span class="mypictures">or click </span><a href="index.html">here</a><span> to go back to the Welcome page.</span>
</ul>> (Linksbündig würde das werden, indem du ul#spr float: left spendierst. Das float ist hier allerdings überflüssig, also lass es weg.) > Besser: > ~~~html <div id="Sprachwahl"> <!-- Eventuell nav, bin aber nicht sicher[1] --> > <p>To go to the start page of your language, click on a language button.</p> > <ul> > <li><a href="de/index.html">Deutsch</a></li> > <li><a href="en/index.html">English</a></li> > <li><a href="fr/index.html">Français</a></li> > <li><a href="ru/index.html">Русский</a></li> > </ul> > <p><span>or click </span><a href="index.html">here</a><span> to go back to the Welcome page.</span></p> > </div>o.k., danke bestens für diesen Hinweis. Wenn ich das erhaltene layout doch wollte, so müsste ich wohl am besten eine neue, eigene css-class für diesen Teil machen, da ich die sprachen-id und nav-id recht aufwendig in 7 Schritten formatiert habe (evtl habe ich schliesslich doch nicht die optimalste gefunden, man kann die eine Teilformatierung in einen andern schritt tun und zurück).
Gib allen Bildern aussagekräftige alt-Attribute mit, die Suchmaschinen werden sich freuen.
[1]
„Es gilt wie immer die Faustregel für semantisches HTML: wenn man die Wahl zwischen A und B hat und nach 5 Minuten Nachdenken und Recherche nicht zweifelsfrei klar ist, was richtiger ist, ist es vermutlich ziemlich egal.“ (Peter Kröner)...siehe oben...wie figura zeigt.
Bin daran, das thema bilder zu überdenken, aber es braucht noch eine weile.
Gruss,
bari.-
Om nah hoo pez nyeetz, bari!
<div id="Sprachwahl"> <!-- Eventuell nav, bin aber nicht sicher[1] -->
<p>To go to the start page of your language, click on a language button.</p>
<ul>
<li><a href="de/index.html">Deutsch</a></li>
<li><a href="en/index.html">English</a></li>
<li><a href="fr/index.html">Français</a></li>
<li><a href="ru/index.html">Русский</a></li>
</ul>
<p><span>or click </span><a href="index.html">here</a><span> to go back to the Welcome page.</span></p>
</div>> > o.k., danke bestens für diesen Hinweis. Wenn ich das erhaltene layout doch wollte, so müsste ich wohl am besten eine neue, eigene css-class für diesen Teil machen, da ich die sprachen-id und nav-id recht aufwendig in 7 Schritten formatiert habe (evtl habe ich schliesslich doch nicht die optimalste gefunden, man kann die eine Teilformatierung in einen andern schritt tun und zurück). Das ist nicht viel CSS. Du kannst ja die id ‚spr‘ für die Liste behalten. Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Komma und Kommandeur](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=K#komma). -
Es gibt wohl beim Formatieren von html nicht viele Fälle, wo man etwas macht, das nicht erlaubt ist (unerlaubtes Unterjubeln von span-elementen in die ul-liste), das Resultat dann aber trotzdem so herauskommt, dass man es gut findet - finde ich irgendwie lustig.
Das ist nicht viel CSS. Du kannst ja die id ‚spr‘ für die Liste behalten.
ja, klar. Und frischt mal Gewusstes wieder auf.
bari.
P.S. Wilhelm Tell misstraute wohl einigen/m oder allen/m Unbekannten - das kann man konservativ nennen, ist m.E. nicht per se nachteilig. Es erhält einfach zumindest das lebendig, was man kennt.
-
-
-