nicht angemeldet
Hilfe...*schnief*
0 
Gunnar Bittersmann
0 0 0 
Auge
0 0 0 
Der Martin
Hilfe...*schnief*
Hallo!
Ich bin gerade dabei, eine Website zu bauen. Dabei wollte ich mich voll und ganz auf HTML und CSS beschränken (kein Javascript).
Der Aufbau war alles kein Problem, funktioniert auch in jedem Browser. Nun bin ich am Menü.
Die Menüpunkte bestehen aus Bildern, also z.B. home.gif und home_over.gif usw. Erzeugen will ich einen Hover-Effekt, bei dem die Bilder sich wechseln, also statt home.gif soll beim Mouseover home_over.gif angezeigt werden. Nun hab ich schon ne halbe Ewigkeit bei Google gesucht und auch hier bei selfhtml etwas zu Hovern gefunden.
Damit ich meine Site nicht wohlmöglich kaputtmache oder alles unübersichtlich wird hab ich dafür erstmal ne Testdatei angelegt. Da hab ich dann den kompletten Text von selfhtml übernommen und die Angaben so geändert, dass sie auf meine Dateien passen. Nun kommt der Brüller...in IE funktioniert alles wunderbar (oh Wunder), nur wenn ich das ganze in Firefox öffnen möchte, wird nichtmal home.gif angezeigt, man sieht nur einen klitzekleinen blauen Strich. Was hab ich denn falsch gemacht?
Hier mein Quellcode:
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Rollover mit CSS - Beispiel 5</title>
<style>
a { display:block;
background-image:url(.../navigation/home.gif);
width:155px; height:33px }
a:hover { background-image:url(.../navigation/home_over.gif); }
</style>
</head>
<body>
<p><a href="#"> </a></p>
</body>
</html>
CSS:
a { display:block;
background:url(.../navigation/home.gif); }
a:hover { background:url(.../navigation/home_over.gif); }
Ich hoffe, ihr könnt mir helfen :(
LG, nina
-
Hello out there!
in IE funktioniert alles wunderbar (oh Wunder)
Wahrhaftig, dessen Fehlertoleranz ist wirklich ein Wunder.
Was hab ich denn falsch gemacht?
Das 'type'-Attribut (Pflicht!) des 'style'-Elements vergessen.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe) -
ersteze
a { display:block;
background:url(.../navigation/home.gif); }
a:hover { background:url(.../navigation/home_over.gif); }durch
a { display:block;
background:url(../navigation/home.gif); }
a:hover { background:url(../navigation/home_over.gif); }eine URL mit ... gibts nicht, maximal 2 Punkte fürs übergeordnete Verzeichnis
-
Danke für die schnelle Hilfe...und danke danke danke rfb, dass du mich auf die Quelldatei aufmerksam gemacht hast, denn da lag der Haken. Ein winziger kleiner Punkt. Naja, als Auszubildende darf man ja noch so dumme Fehler machen *augen rollt*. Erstaunlich, dass IE dass trotzdem angezeigt hat *gg*. Vielen Dank!
-
Hallo
Erstaunlich, dass IE dass trotzdem angezeigt hat *gg*. Vielen Dank!
Das liegt an der großzügigen Fehlerauslegung des MSIE. Das mach vieles (wenn auch nur scheinbar!) einfacher.
Also:
../bla/blubb.xxx: geht eine Verzeichnisebene nach oben, dann in das Verzeichnis "bla" um "blubb.xxx" aufzurufen/zu laden.
../../bla/blubb.xxx: das Gleiche mit zwei Verzeichnisebenen. Das Verfahren mit noch mehr Ebenen sollte somit klar sein.
/bla/blubb.xxx: ruft die Datei "blubb.xxx" im Verzeichnis "bla" vom DOCUMENT_ROOT aus auf, _egal_ in welcher Verzeichnistiefe sich die aufrufende Datei (also die, in der "blubb.xxx" referenziert[1] wird) befindet.
Wenn es z.B. ein Verzeichnis "css" auf der oberen Ebene der Webpräsenz gibt und sich darin die Datei "basis.css" befindet, kann man sie auf diese Art (in dem Fall "/css/basis.css") aus jeder HTML-Datei heraus aufrufen, egal in welcher Verzeichnistiefe letztere zu finden ist../bla/blubb.xxx: geht vom dem Verzeichnis aus, in dem sich die "blubb.xxx" referenzierende[1] Datei befindet und ruft aus dessen Unterverzeichnis "bla" die Datei "blubb.xxx" auf. Dies ist gleichbedeutend mit der Notation "bla/blubb.xxx".
[1] "referenzieren" meint, dass z.B. in einer HTML-Datei der Pfad zu einer aufzurufenden CSS-Datei notiert ist.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1-
Hallo Auge!
../bla/blubb.xxx
"bla" um "blubb.xxx"
../../bla/blubb.xxx
/bla/blubb.xxx
"blubb.xxx"
"bla"
./bla/blubb.xxx
"blubb.xxx"
"bla"
"blubb.xxx"
"bla/blubb.xxx"Warum komme ich mir vor, als hätte ich ein Stück Seife geschluckt?
;)
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
-
-
-
-
Ich sehe den Fehler jetzt auch nicht auf Anhieb. Aber zum Debuggen spiele ich gern mit der background-color, um zu sehen, ob das CSS über "greift", sprich, ob es dem Tag überhaupt zugeordnet wird, ob das :hover erkannt wird usw.
-
Hi,
HTML:
<html>Du solltest _unbedingt_ einen hinreichenden DOCTYPE verwenden, damit kein Browser in den Quirks-Mode schaltet - vor allem nicht der IE.
<style>
ERROR: Required attribute "type" missing.
a { display:block;
background-image:url(.../navigation/home.gif);
width:155px; height:33px }Stimmt die URI mit den Begebenheiten auf dem Server überein? Ist die Grafik korrekt? Was sagt der DOM-Inspector?
<p><a href="#"> </a></p>
Ein Menü ist kein Absatz des Fließtextes, sondern eine Liste von Links. Es liegt also nahe, Listenelemente zu verwenden - i.a.R. <ul>, je nach Einsatz <ol>, in Ausnahmefällen <dl>.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hallo Nina,
Was hab ich denn falsch gemacht?
das hier:
a { display:block;
background-image:url(.../navigation/home.gif);
width:155px; height:33px }Zunächst ist a ein inline-Element und hat per Definition keine Abmessungen. Auch wenn du ihm per CSS eine Breite und eine Höhe gibst, muss ein korrekt arbeitender Browser das ignorieren, solange du a nicht gleichzeitig zum Block-Element umdefinierst.
Firefox stellt das Element in deinem Fall so groß dar, wie es der Inhalt (das eine Leerzeichen) erfordert. Vom Hintergrundbild siehst du dann natürlich nur einen kleinen Fitzel. Der IE wendet width und height fälschlicherweise auch auf Inline-Elemente an.
So long,
Martin--
Kleine Geschenke erhalten die Freundschaft.
Große verderben sie aber meist auch nicht.-
Hallo Ingrid, ;-)
a { display:block;
da steht ja ein display:block!
Hab ich das übersehen? Das war vorhin noch nicht da! *scheinheilig*Dann vergesst den Tipp einfach - die Lösung passt nicht zum Problem, und die entscheidenden Hinweise sind eh schon geäußert worden.
Ciao,
Martin--
Frauen sind wie Elektrizität: Fasst man sie an, kriegt man eine gewischt.
-