[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:
(6314 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
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:
(6301 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


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:
(6280 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


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:
(6274 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:
(6262 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


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:
(6254 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 …?!


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:
(6234 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: 1965

9. Feb 2007, 07:55
Beitrag # 8 von 30
Beitrag ID: #275387
Bewertung:
(6230 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


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:
(6230 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:
(6217 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: 1965

9. Feb 2007, 11:56
Beitrag # 11 von 30
Beitrag ID: #275461
Bewertung:
(6207 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


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:
(6200 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?


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:
(6192 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: 1965

9. Feb 2007, 19:09
Beitrag # 14 von 30
Beitrag ID: #275568
Bewertung:
(6176 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 ...


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:
(6132 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


als Antwort auf: [#275387]
X

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
14.05.2024

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Ja

Organisator: Impressed / Horizon

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

Einsparpotenziale in der Weiterverarbeitung
Veranstaltungen
16.05.2024

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

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

Und es geht doch: Automatisierung im Großformatdruck!