nicht angemeldet
css :hover +xhtml +strict
Guten Tag,
auf http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm finden sich gute Beispiele für den Zeigerfokuseffekt (hover). Ich habe nun das erste und dritte Beispiel zu mir kopiert und in den Kopf die xhtml-strict-Zeilen
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
gesetzt und zudem die fehlenden Schlussmarkierungen /img und /meta eingefügt.
Ich verwende firefox 1.0 und opera 7.54 (sowie amaya).
1. Speichere ich die Datei mit der Endung html (unlogisch, aber interessant) ab, so funktioniert der Fokuseffekt wie er soll.
2. Speichere ich die Datei mit der Endung xhtml (eigentlich logisch) ab, so funktioniert der Fokuseffekt nur im Beispiel 1; im dritten jedoch nicht! In diesem wird der im Fokusfall auf der rechten Seite anzuzeigende Teil dauerhaft links eingeblendet; die einzige "Reaktion" ist, dass der Zeiger beim darüberfahren in eine Hand verwandelt wird.
Kann mir bitte jemand erklären, wie ich dies verstehen soll beziehungsweise eine Lösung nennen? Ich möchte kein javascript verwenden.
Danke im voraus,
mit Gruß
Dada
-
Hi,
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">- Speichere ich die Datei mit der Endung html (unlogisch, aber interessant)
- Speichere ich die Datei mit der Endung xhtml (eigentlich logisch)
Worauf bezieht sich Deine Logik? Auf den Namen des root-Elements?
Welche content-types liefert Dein Server in den beiden Fällen?
gesetzt und zudem die fehlenden Schlussmarkierungen /img und /meta eingefügt.
Als <img ... /> oder als <img ...></img>?
Ansonsten: Link zur Seite rausrücken, sonst kann man nicht viel sagen.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo,
auf http://aktuell.de.selfhtml.org/tippstricks/css/infobox/ finden sich gute Beispiele für den Zeigerfokuseffekt (hover). Ich habe nun das erste und dritte Beispiel zu mir kopiert und in den Kopf die xhtml-strict-Zeilen
Wenn ich die beschriebenen Änderungen vornehme, funktionieren immer noch beide Beispiele nicht. Das liegt in meinem Fall daran, dass die style-Bereiche noch mit <!-- ... --> umrandet sind. XML-Parser können Kommentare vollständig herausschneiden. Die beiden Dokumente sind daher vollkommen umformatiert, die CSS-Regeln greifen nicht.
Ich verwende firefox 1.0 und opera 7.54 (sowie amaya).
- Speichere ich die Datei mit der Endung html (unlogisch, aber interessant) ab
Wieso unlogisch? Normalerweise arbeitet man mit HTML-kompatiblem XHTML, Dateiendung .html.
- Speichere ich die Datei mit der Endung xhtml (eigentlich logisch) ab, so funktioniert der Fokuseffekt nur im Beispiel 1; im dritten jedoch nicht! In diesem wird der im Fokusfall auf der rechten Seite anzuzeigende Teil dauerhaft links eingeblendet; die einzige "Reaktion" ist, dass der Zeiger beim darüberfahren in eine Hand verwandelt wird.
Das kann ich nicht nachvollziehen. Bei mir funktionieren beide Beispiele nach den Änderungen im Opera 7.54 und Mozilla 1.0.
Mathias
-
Tag,
die Antworten kamen schneller als erwartet.
Zu Andreas/molily: Vielleicht bin ich in dem Punkte zu naiv gewesen: Ich habe gedacht, dass eine in xhtml-strict aufgesetzte Seite auch in eine Datei mit der Endung xhmtl abgespeichert werden sollte. Die genannten Browser haben mir bisher mit xhtml-Endungsdateien keine Probleme bereitet - außer mit dem Beispiel 3 und firefox bei javascript.
Zu Andreas/MudGuard: Leider läuft die Seite noch nicht im web, sondern bei mir lokal. Daher gebe ich unten den Quellcode an. Die Dateinamen sind bei mir Test.hmtl und Test.xhtml.
Mit Gruß
Dada<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8"></meta>
<title>Infobox</title>
<style type="text/css">
<!-- img {
border:none;
}#box{
height:80px;
width:80px;
padding:0;
margin:20px;
border:1px solid black;
font:bold 14px verdana, sans-serif;}#box div{display:none;}
#box:hover div{
display:block;
width:300px;
position:absolute;top:20px;right:20px;
border:1px dashed black;
padding:15px;
font:normal 14px verdana, sans-serif;}
-->
</style>
</head>
<body>
<div id="box"><img src="schmetterling.png" width="80" height="80" alt="schmetterling"></img>
<div><p><a href="beispiel3b.htm"><img src="schmetterling.png" width="150" height="150" alt=""></img></a></p>
<p><strong>INFO</strong></p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul></div>
</div></body>
</html>-
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ähem, muss es nicht trotzdem
<!DOCTYPE html
heißen?
-
Hi,
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ähem, muss es nicht trotzdem
<!DOCTYPE html
heißen?Natürlich. Denn das root-Element heißt auch in XHTML html und nicht xhtml.
Dada, warum hast Du meine Frage nach den Content-Types nicht beantwortet?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Dada, warum hast Du meine Frage nach den Content-Types nicht beantwortet?
cu,
Andreas... weil ich mit der Frage nach den Content-Types einfach überfordert bin. Ich habe die ersten paar Zeilen im Quellcode stehen, weil sie auch bei anderen stehen... jedoch kann ich bei meinem jetzigen Wissensstand nicht alles nachvollziehen. Mit Nachhilfe kann ich vielleicht schreiben, welche Content-Types mein Recher liefert...
mit Gruß
Dada
-
-
-
<style type="text/css">
<!-- img {
border:none;
}Hast du meinen Tipp ausprobiert?
-
<style type="text/css">
<!-- img {
border:none;
}Hast du meinen Tipp ausprobiert?
Eben erst, denn ich bin etwas auf dem Schlauche gestanden. Ohne die html-Kommentarmarkierungen funktioniert es. Danke.
Ist es schlimm, wenn ich später auf dem web-Server die Endung xhtml statt html verwende? Wenn es bei mir lokal läuft, sollte es - zumindest auf den getesteten Browsern - auch im web gehen. Oder?Mit Gruß
Dada-
Ist es schlimm, wenn ich später auf dem web-Server die Endung xhtml statt html verwende? Wenn es bei mir lokal läuft, sollte es - zumindest auf den getesteten Browsern - auch im web gehen. Oder?
Jein. Wenn der Webserver die Dateiendung .xhtml mit einem passenden MIME-Typ wie application/xml oder besser application/xhtml+xml verbindet, dann sollte es funktionieren. Freilich nur in den getesteten Browsern. Die Verbreitung von Browsern, denen man ernsthaft »echte« XHTML-Seiten anbieten kann, ist nämlich nicht sehr groß. (Welchen MIME-Typ der Server sendet, kannst du dir mit http://web-sniffer.net/ ansehen, der steht hinter »Content-Type:«.) Wenn der Webserver über eine veraltete Zuordnungsliste Dateiendung -> MIME-Typ verfügt, kann es sein, dass darin .xhtml nicht aufgeführt ist. Dann wird die Datei gerne als Nur-Text (text/plain) gesendet. Die Browser würden dann nur den Quelltext darstellen.
Mathias
-
-
Tag,
die Beispiele waren ja nur zum Testen. Und in diesen lasse ich meine css-Anweiseungen etc. meistens der Einfachheit halber in der Datei. So hat es ja schlussendlich (s. mein letzter Schrieb) funktioniert.
Jetzt habe ich die ganzen style-Anweisungen innerhalb der Kommentarzeichen mit
<style type="text/css" href="./Test0.css"></style>
ausgelagert. Nun geht es wieder nicht bzw. nur so falsch, wie in der Datei mit Kommentarmarkierungen. Was habe ich jetzt wieder falsch gemacht?
Dank vorausmit Gruß
Dada-
Hi,
<style type="text/css" href="./Test0.css"></style>
Lies nochmal nach, wie externe Stylesheets eingebunden werden.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
<style type="text/css" href="./Test0.css"></style>
Lies nochmal nach, wie externe Stylesheets eingebunden werden.
cu,
AndreasTag,
Entschuldigung, ich habe beim Kopieren gepennt; anstatt in die style- gehört es natürlich in die link-Markierungen.
Jetzt bringt er mir mit
<link rel="stylesheet" type="text/css" href="./Test0.css"></link>
(so ist`s auf selthtml beschrieben)
nur das kleine Bild auf der linken Seite - ohne den Fokuseffekt mit dem großen Bild auf der rechten.
Ohne das Attribut rel ist alles sofort auf der linken Seite zu sehen.
??Mit Gruß
Dada
-
-
-
-