[GastForen Web allgemein HTML und CSS / Stylesheets a: hover mit img und Firefox

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

a: hover mit img und Firefox

matmax
Beiträge gesamt: 626

7. Feb 2007, 00:11
Beitrag # 1 von 30
Bewertung:
(6083 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo!
Ich habe eine Navigation folgendermaßen erstellt:
(Menuepunkt 1 ist aktiv, das kästchen ist permanent zu sehen (habe ich dadurch gelöst indem ich img einfach nach a gesetzt habe und nicht innen drin))
Code
<div id="navigation">  

<h1><a href="index.html">Menuepunkt1&nbsp;</a><img src="Kaestchen.gif" alt="" width="9" height="8"/></h1>
<p><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></p>
<p><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></p>

<h2><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></h2>
<p><a href="Menuepunkt.html">Menuepunkt&nbsp;<img src="Kaestchen.gif" alt="" width="9" height="8"/></a></p>

</div>


und im stylesheet
Code
 
#navigation a:link {
color: black;
text-decoration: none;
}

#navigation a:visited {
color: black;
text-decoration: none;
}

#navigation a:link img {
visibility: hidden;
}

#navigation a:visited img {
visibility: hidden;
}

#navigation a:hover img {
visibility: visible;
}

#navigation a.aktuell:link {
visibility: visible;
}


In Safari funktioniert alles.
InternetExplorer für OSX auch.

In Firefox auf OSX und WINXP nicht. Das img wird komisch groß dargestellt und die Lage der Menüpunkte springt.
InternetExplorer für WINXP funktioniert der hover Effekt gar nicht.


Weiß jemand was ich falsch mache?!
Und wie man das dann am einfachsten löst?!

Danke!!
matmax
Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)
X

a: hover mit img und Firefox

SabineP
Beiträge gesamt: 7586

7. Feb 2007, 09:48
Beitrag # 2 von 30
Beitrag ID: #274803
Bewertung:
(6070 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo matmax,

>> Und wie man das dann am einfachsten löst?!

Mit einer Liste:

<ul>
<li><a href="">Link</a>
<li><a href="">Link</a>
</ul>


Und das Kästchen als Hintergrundbild:

ul li:hover {list-style:none;background:#f00 url(Kaestchen.gif) no-repeat 99% 50%}


Hier gibts noch mehr Beispiele zum Ausrichten von Hintergrundbildern:
http://www.w3.org/.../current/test536.htm
Gruß Sabine


als Antwort auf: [#274755]

a: hover mit img und Firefox

matmax
Beiträge gesamt: 626

7. Feb 2007, 23:10
Beitrag # 3 von 30
Beitrag ID: #275073
Bewertung:
(6049 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Liebe Sabine,

das mit dem positionieren verstehe ich noch nicht ganz.
Bei mir ist beim Überfahren des Links mit der Maus nichts zu sehen …

Kann man denn überhaupt das Kästchen so platzieren, dass es an der Grundlinie des jeweiligen Links ausgerichtet wird.
Ich habe das nämlich schon mal ausprobiert und festgestellt, dass je nach Browser die Liste eine andere Position erhält und somit das Kästchen zu springen scheint …

Geht es nicht auch ohne li, so dass ich ein img in den Link setzen kann?!?!

So wird es in Firefox beim Rollover angezeigt. Oben normal. (siehe Anhang)


Viele Grüße,
matmax
Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)


als Antwort auf: [#274803]
(Dieser Beitrag wurde von matmax am 7. Feb 2007, 23:18 geändert)

Anhang:
Bild 36.png (1.04 KB)

a: hover mit img und Firefox

SabineP
Beiträge gesamt: 7586

7. Feb 2007, 23:48
Beitrag # 4 von 30
Beitrag ID: #275075
Bewertung:
(6043 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Gibt es zu dem Bildschirmfoto auch noch einen Link zu dieser Seite, damit man sich den Quellcode ansehen kann?

Gruß Sabine


als Antwort auf: [#275073]

a: hover mit img und Firefox

matmax
Beiträge gesamt: 626

8. Feb 2007, 21:26
Beitrag # 5 von 30
Beitrag ID: #275368
Bewertung:
(6031 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
nein, sorry, hab ich noch nicht.
aber hier kopiert:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index, follow" />
<meta name="description" content="test" />
<meta name="keywords" content="test" />
<meta name="creator" content="test" />
<meta name="creation_date" content="16.10.2006" />


<title>Test</title>


<link rel="stylesheet" type="text/css" href="Stylesheets/test_screen.css" media="screen" />
<link rel="SHORTCUT ICON" href="/favicon.ico" type="image/ico" />
<link rel="stylesheet" type="text/css" href="Stylesheets/test_print.css" media="print" />


</head>

<body>

<div id="container">

<div id="logo"><img src="Bilder/Bild_Logo_94.gif" alt="" width="94" height="94"/></div>

<div id="schriftzug"><img src="Bilder/Bild_Schriftzug.gif" alt="" width="351" height="95"/></div>


<div id="navigation">

<h1><a href="index.html">Link</a><img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></h1>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>

<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2>

<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2>

<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>

<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>
<p><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></p>

<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2>

<h2><a href="Link.html">Link&nbsp;<img src="Bilder/Bild_Kaestchen.gif" alt="" width="9" height="8"/></a></h2>

</div>

<div id="inhalt">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>

<div id="box1">

</div>

<div id="box2"> </div>

<div id="box3">


</div>

</div>

</body>

</html>


und das stylesheet, aber etwas durcheinander, da ich viel probiert habe:

Code
 

/* layout
----------------------------------------------- */

* {
padding: 0px;
margin: 0px;
}


body {
background-color: white;
color: black;
text-align: left;
font: 12px Helvetica, Verdana, sans serif;
line-height: 18px;
font-weight: normal;
}


#container {
width: 950px;
height: 650px;
position: relative;
margin: auto;
margin-top: 50px;
background-color: white;
text-align: left;
}


#logo {
width: 94px;
height: 94px;
position: absolute;
top: 0px;
left: 30px;
}


#schriftzug {
width: 500px;
height: 95px;
position: absolute;
top: 0px;
left: 170px;
text-align: left;
}



/* navigation
----------------------------------------------- */

#navigation {
width: 138px;
height: 500px;
position: absolute;
top: 130px;
left: 0px;
text-align: right;
background-color: white;
}



#navigation a:link {
color: black;
text-decoration: none;
}


#navigation a:visited {
color: black;
text-decoration: none;
}


#navigation a:link img {
visibility: hidden;
}

#navigation a:visited img {
visibility: hidden;
}

#navigation a:hover img {
visibility: visible;
}

#navigation a.aktuell:link {
visibility: visible;
}


/* inhaltbox
----------------------------------------------- */

#inhalt {
width: 500px;
min-height: 500px;
position: absolute;
background-color: #EBEBEA;
top: 115px;
left: 150px;
padding-right: 15px;
padding-left: 20px;
padding-top: 15px;
overflow: visible;
margin-bottom: 15px;
}


* html #inhalt {
width: 500px;
height: 500px;
}


#inhalt a:link {
color: black;
}


#inhalt a:visited {
color: black;
}


#inhalt a:hover {
color: white;
}


/* box1
----------------------------------------------- */

#box1 {
width: 205px;
height: 120px;
position: absolute;
top: 115px;
left: 699px;
padding-right: 15px;
padding-left: 0px;
padding-top: 15px;
text-align: left;
}

#box1 a:link {
color: black;
text-decoration: none;
}


#box1 a:visited {
color: black;
text-decoration: none;
}


#box1 a:hover {
font-weight: bold;
}


#box1 ul {
margin: 0px 0px 0px 0px;
list-style-type: none;
list-style-position: outside;
padding-left: 0px;
}


#box1 li {
margin: 0px 0px 0px 0px;
list-style-type: none;
list-style-position: outside;
padding-left: 11px;
}


#box1 li.aktiv {
font-weight: bold;
padding-left: 0px;
}


/* box2
----------------------------------------------- */

#box2 {
width: 225px;
height: 225px;
position: absolute;
top: 215px;
left: 700px;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
}


#box2 a:link {
color: black;
}


#box3 {
width: 210px;
height: 165px;
position: absolute;
top: 455px;
left: 700px;
padding-right: 5px;
padding-left: 10px;
padding-top: 10px;
background-color: #EBEBEA;
}

/* box3
----------------------------------------------- */

#box3 a:link {
color: black;
}


#box3 a:visited {
color: black;
}


#box3 a:hover {
color: #CCCCCC;
}



/* typography
----------------------------------------------- */

h1 {
font: 12px Helvetica, Verdana, sans serif;
line-height: 18px;
font-weight: bold;
margin-bottom: 0px;
}


h2 {
font: 12px Helvetica, Verdana, sans serif;
line-height: 18px;
font-weight: bold;
margin-bottom: 0px;
margin-top: 18px;
}


p {
font: 12px Helvetica, Verdana, sans serif;
line-height: 18px;
margin-bottom: 0px;
margin-top: 0px;
}


.bold {
font-weight: bold;
}


.backwards {
unicode-bidi: bidi-override;
direction: rtl;
}


Ich hoffe das geht so … Danke!
Beste Grüße,
matmax
Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)


als Antwort auf: [#275075]

a: hover mit img und Firefox

matmax
Beiträge gesamt: 626

8. Feb 2007, 21:42
Beitrag # 6 von 30
Beitrag ID: #275374
Bewertung:
(6023 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Juhu!
Erste Hürde genommen: Firefox hat einen Rahmen um das Kaestchen.gif gemacht.
Lösung:
img {border: none;}

Jetzt muss ich nur noch den IE auf WINXP zum leben erwecken … warum will der das Hover-Kaestchen nicht zeigen …?!
Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)


als Antwort auf: [#275075]

a: hover mit img und Firefox

minou
Beiträge gesamt: 135

9. Feb 2007, 07:27
Beitrag # 7 von 30
Beitrag ID: #275386
Bewertung:
(6003 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo matmax,

meines Wissens kann der IE 6 (7 weiss ich nicht sicher) nicht hoovern. Ich habe da auch schon lange herumprobiert und kam schliesslich nur mit Javascript weiter.

Jedenfalls wird das Hoover gemäss eines Referenzbuches (HTML und XHTML) vom IE nicht unterstützt.

Es gibt aber auch diverse Lösungsansätze, meist halt nur mit Javascript.

Gruss

Fredi


als Antwort auf: [#275374]

a: hover mit img und Firefox

FSt
  
Beiträge gesamt: 1961

9. Feb 2007, 07:55
Beitrag # 8 von 30
Beitrag ID: #275387
Bewertung:
(5999 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo minou

Doch, doch, der IE kann hovern ...

http://www.hilfdirselbst.ch/..._P212407.html#212407

Gruss
Martin


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#275386]

a: hover mit img und Firefox

minou
Beiträge gesamt: 135

9. Feb 2007, 07:56
Beitrag # 9 von 30
Beitrag ID: #275388
Bewertung:
(5999 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo matmax,

habe noch etwas in deinem CSS gesehen. Warum machst du das was du vorhast nicht mit a.active??.
Das ist ähnlich wie der hoover Effekt.

Gruss


als Antwort auf: [#275386]

a: hover mit img und Firefox

minou
Beiträge gesamt: 135

9. Feb 2007, 09:54
Beitrag # 10 von 30
Beitrag ID: #275422
Bewertung:
(5986 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Fst,

danke für deine konstruktive Aussage. Die neuen Standards und neuen Sprachen überschlagen sich in letzter Zeit.

Jetzt habe ich auch wieder was gelernt...

Gruss

minou


als Antwort auf: [#275387]

a: hover mit img und Firefox

FSt
  
Beiträge gesamt: 1961

9. Feb 2007, 11:56
Beitrag # 11 von 30
Beitrag ID: #275461
Bewertung:
(5976 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo minou

Antwort auf [ minou ] Die neuen Standards und neuen Sprachen überschlagen sich in letzter Zeit.

???
Versteh ich nicht ganz. HTML 4.01 ist seit Weihnachten 1999 unverändert. CSS2 ist seit Mai 1998 fast unverändert (Ausnahme ist CSS 2.1 im Juni 2005).

Gruss
Martin


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#275422]

a: hover mit img und Firefox

matmax
Beiträge gesamt: 626

9. Feb 2007, 14:45
Beitrag # 12 von 30
Beitrag ID: #275503
Bewertung:
(5969 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo! Danke für die Antworten!

Woie ist das mit "a.active" ist das JavaScript?
Oder ist es a:active?
Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)


als Antwort auf: [#275388]

a: hover mit img und Firefox

minou
Beiträge gesamt: 135

9. Feb 2007, 15:53
Beitrag # 13 von 30
Beitrag ID: #275530
Bewertung:
(5961 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo zusammen,

entschuldige, mein Fehler. Es ist a:active, also kannst du es mit CSS steuern.
a:active ist wenn du die Taste aktiviert hast, also angeklickt.
Wenn du durch den Klick z.B. eine Datei öffnest, bleibt dieser "Button" schön gedrückt, bis man etwas Neues ansieht.
Mit border inset und outset geht das recht gut.

@ Fst:
Sorry, ich habe mich sehr undeutlich ausgedrückt. Ich meinte das für mich persönlich mit dem überschlagen. Ich bin noch ein ziemlicher Anfänger und verlasse mich dann halt teilweie auf Bücher von 2003 :-(

Grüsse euch

minou


als Antwort auf: [#275503]
(Dieser Beitrag wurde von minou am 9. Feb 2007, 15:56 geändert)

a: hover mit img und Firefox

FSt
  
Beiträge gesamt: 1961

9. Feb 2007, 19:09
Beitrag # 14 von 30
Beitrag ID: #275568
Bewertung:
(5945 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo minou

Kein problem, wie Du siehst sind Deine Bücher absolut up to date, wenns um HTML und CSS geht ...

Gruss
Martin

PS:
Ich hab hier Bücher aus dem 2000 oder noch älter, die ich zum Teil immer noch konsultiere ...


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#275530]

a: hover mit img und Firefox

matmax
Beiträge gesamt: 626

12. Feb 2007, 22:08
Beitrag # 15 von 30
Beitrag ID: #275892
Bewertung:
(5901 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo!
Ich muss noch mal nachfragen:
Die Geschichte zusätzlich padding:0; einzusetzen funktioniert nicht. Der IE zeigt immer noch nichts an! Und außerdem ist die Zeilenhöhe nicht richtig. :((

Was ist nun das einfachste zu tun?
Ich möchte ja einfach nur mit der Maus auf ein Wort fahren und rechts daneben, in der gleichen Zeile, immer an der gleichen Stelle (ohne Verrutschen) soll ein kleines schwarzes Kästchen erscheinen.

Soll ich dies nun mit einer Liste und JavaScript machen (dann müsste ich mich da einarbeiten, bis jetzt habe ich nur Scripte zu AUSTAUSCH von Grafiken gefunden. Eine Grafik ein und wieder auszublenden habe ich bisher nur so vorgefunden, dass es ein festes div war, in dem die verscheidenen Grafiken auftauchten. Meine wechseln aber den Ort, sind ja in jeder Zeile und ich will nicht 15 divs für alle Menüpunkte anlegen!) oder geht es irgendwie doch, das ohne Liste zu machen, so dass man ein img in die Zeile setzen kann?!

Danke!
matmax
Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)


als Antwort auf: [#275387]
X

Aktuell

InDesign / Illustrator

| 23.05.2022

IDUG_300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
29.09.2022

IDUGS#85 Press2id

Zoom Meeting
Donnerstag, 29. Sept. 2022, 19.00 - 21.00 Uhr

Vortrag

Kennst du WordPress? Vielleicht. Verwendest du WordPress? Ja, klar! WordPress ist das am weitesten verbreitete System für die Erstellung von Webseiten. Um Webseitenbau soll es auf dieser IDUG aber nicht gehen. Gregor zeigt press2id (github.com/grefel/press2id). Seine Open-Source-Lösung für die Verbindung von Web und InDesign. Richtig gelesen: InDesign liest mithilfe von press2id die Inhalte der WordPress-Webseiten und generiert daraus Zeitschriften, Kataloge, Programmhefte oder Bierdeckel (das zeigen wir natürlich auch!). So wird die „Content First“ Theorie zu einer konkret anwendbaren Praxis, ohne gleich die ganz großen Räder zu drehen. Versprochen: Jeder kann nach der IDUG innerhalb kürzester Zeit Daten von WordPress nach InDesign importieren. Aber Achtung: Prinzipiell kann press2id aus jeder Website, oder besser Contentmanagementsystem (CMS) Daten auslesen und nach InDesign importieren! Spannend, oder? Danach geht es in die Praxis: Stefan hat die Webseite des Parktheater Iserlohn (parktheater-iserlohn.de) gestaltet. Die gedruckten Spielpläne (parktheater-iserlohn.de/interaktive-spielplaene) werden mit press2id realisiert. Wir schauen in den Maschinenraum und zeigen, wie die Lösung des Projekts realisiert wurde.

Nein

Organisator: InDesign Usergroup Stuttgart

Kontaktinformation: Christoph Steffens, E-Mailidug AT satzkiste DOT de

https://idugs85.eventbrite.de/

Von Wordpress nach InDesign
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022