Mouseover-Effekt mit CSS und "Eigener HTML-Code"-Modul

[Summi]

Hallo Ihr alle!

Ich möchte einen Bildlink mit einem Mouseover/Hover Effekt versehen. In meinem speziellen Fall scheint das aber nicht so ohne weiteres möglich.

Ich habe ein Modul "Eigener HTML-Code" angelegt.
Inhalt:
<div id="button1">
<a href="{{link_url::8}}"><img src="tl_files/layout/button1.png" alt="Button1" /></a>
</div>
Über die Seitenlayouts habe ich es in die Seite eingebunden und im CSS als #button1 an die richtige Stelle verschoben.
Jetzt möchte ich aber das Bild beim überfahren der Maus tauschen. Dazu habe ich eine CSS-Definition #button1 a:hover angelegt. In dieser habe ich das neue Bild angegeben. Das funktioniert auch. Leider liegt das Bild aus dem Modul immer darüber. Mit dem z index habe ich nichts erreicht.

Ich hab bestimmt wieder einen total doofen Denkfehler.

[kos]

Durch das Modul fügst du ein Bild ein, per CSS ist es ein Hintergrundbild.
Abhilfe: in beiden Fällen Hintergrundbild verwenden.

[Summi]

Ich hoffe ich habe dich richtig verstanden:

Ich habe jetzt dem CSS #button1 das Bild des ungedrückten Button gegeben. Die CSS-Definition #button1 a:hover hat jetzt das Bild des gedrückten Button.
Im Seitenlayout habe ich definiert in welcher Spalte das Modul nach definiertem CSS erscheinen soll.

Ich steh grad auf dem Schlauch und weiß nicht was ich im Modul "Eigener HTML-Code" angeben muss.
So funktioniert es natürlich nicht, weil das Bild von hier die anderen Beiden überlagert:
<div id="button1">
<a href="{{link_url::8}}"><img src="tl_files/layout/button1.png" alt="Button1" /></a>
</div>

[kos]

Also ich würde zunächst mal so ansetzen:

<div id="button1">
<a href="{{link_url::8}}">HierMeinLinkText</a>
</div>

und per css

#button1 a{
background: url(tl_files/layout/button1.png) no-repeat scroll 0 0;
text-indent:-9999px;
}

#button1 a:hover{
background: url(tl_files/layout/button1_hover.png) no-repeat scroll 0 0;
}

:

[Summi]

Ha! Suppigut!!!

So hats funktioniert. Dankeschön!

Aber, wie kann ich festlegen, das das gedrückte Bild aktiv bleibt? Mit active klappt das irgendwie nicht.

[Summi]

Ich hab gerade nochwas festgestellt.

Das text-indent sorgt dafür das ich jetzt soweit runterscollen kann, bis meine Seite oben komplett verschwindet. Sobald ich es rausnehme, ist alles ok. Nur steht dann wieder der Text über dem Bild.

[kos]

Hast Du einen Link, damit man das mal live und in Farbe sehen kann?

[Summi]

Ich baue immernoch lokal. Ich habe noch keinen Webspace.
Kann ich was anderes machen? Soll ich die Quelltexte hier zeigen? Wenn ja, welche?

[kos]

Na gut, dann versuchen wir es mal so.

Aber, wie kann ich festlegen, das das gedrückte Bild aktiv bleibt? Mit active klappt das irgendwie nicht.

So ganz klar ist das für mich nicht. Ein Anklicken eines Links führt doch i.d.R. dazu, dass man zu einer anderen Seite geleitet wird, dann ist es doch gleich, wie der Link formatiert ist.
Wenn es dennoch anders geregelt werden soll, dann könnte man

#button1 a:visited{
background: url(tl_files/layout/button1_hover.png) no-repeat scroll 0 0;
}

versuchen.

Das text-indent sorgt dafür das ich jetzt soweit runterscollen kann, bis meine Seite oben komplett verschwindet.

Das verstehe ich nicht. Was text-indent macht ist z.B. nachzulesen bei www.w3schools.com/cssref/pr_text_text-indent.asp
Du musst aber den Link zu einem Blockelement machen:

#button1 a{
display: block;
}

oder 

#button1 a{
display: inline-block;
}

[Summi]

Hallo,

ich habe drei Bildlinks nebeneinander stehen. Alle "absolute" und über "Position" an der richtigen Stelle. Fahre ich mit der Maus über eines der Bilder, wird dieses gewechselt. Nach einem klick kommt man auf die verlinkte Seite. Jetzt wird wieder das Ursprungsbild angezeigt. Ich hätte aber gerne das Bild das auch beim überfahren des Ursprungsbildes angezeigt wird. Das geht doch normalerweise mit a:active. Bei mir funktioniert das aber nicht.

Das Text-indent rückt doch den Text ein. Mit dem Wert -9999 schiebe ich den Textlink über dem Bild in einen nicht sichtbaren Bereich. Beim dritten meiner Bildlinks bewirkt das indent einen Scrollbalken bei Seiten die keinen brauchen. Verkleiner ich den Wert auf z.B. -8999 wird der Bereich unter der Webseite kürzer. Bei einem zu kleinen Wert hängt der Text vom Link irgendwo im Layout der Seite. Bei einem Wert von -4999 verlängert sich die Seite nicht, und der Text ist nicht im Layout und auch nicht zu sehen. So scheint es zu funktionieren. Irgendwie ist das schon seltsam. Sobald ich den Code für die Drehung entferne, funktioniert es mit dem indent von -9999.

Hier mal der Code:
-moz-transform:rotate(-10deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(-10deg); /* Safari */
-o-transform:rotate(-10deg); /* Opera */
-ms-transform:rotate(-10deg); /* IE9 */
transform:rotate(-10deg); /* W3C */

Der button a
hat ein width, height, left, top, position (absolut), display (block), url zum Bild eine Drehung um 10%, backgroundrepeat

Der a:hover
hat ein width, height, left, top, position (absolut), display (block), backgroundrepeat

[Summi]

Hallo,

das text-indent-Problem habe ich am Wochenende mit folgendem Code lösen können:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

So funktionierts. Vielleicht hilft es ja noch jemandem.

Das auf der aktiven Seite das gedrückte Button-Bild angezeigt wird, habe ich noch nicht lösen können. Da bin ich immernoch auf eure Hilfe angewiesen. #-D

[comanche]

[...] Das auf der aktiven Seite das gedrückte Button-Bild angezeigt wird, habe ich noch nicht lösen können. Da bin ich immernoch auf eure Hilfe angewiesen. #-D

Darf ich fragen warum du dafür eigenen HTML-Code verwendest? Benutz ein Navigationsmenü oder eine Individuelle Navigation von Contao, dann wird auf der aktiven Seite dem Navigationselement die Klasse "active" mitgegeben, mit der du das gewünschte Bild anzeigen lassen kannst.

Ansonsten vergibst Du jeder Seite eine Klasse und benutz diese, um das Button-Bild zu definieren. Zum Beispiel für eine "Kontakt"-Seite:

#kontakt #button1 a { background: url(tl_files/layout/button1_hover.png) }

Gruß,
Andreas

[Summi]

Meine Navigation besteht aus Bildern die in verschiedene Richtungen gedreht oder garnicht gedreht sind. Ich habe die Navigation mit den Bordmitteln nicht so richtig realisiert bekommen.
Meine jetzige Lösung habe ich ursprünglich nur für das Logo (mit Link zur Startseite) genommen. Nachdem ich mit den Navigationsmodulen zu keinem Ergebnis gekommen bin, habe ich diese Links ebenso gemacht. Sind in diesem Fall nur 3.

Deine Lösung versteh ich leider nicht.

Ich vergebe einer Seite in der Seitenstruktur eine CSS-Klasse. Z.B. "kontakt"

Wenn ich jetzt eine Klasse anlege mit #kontakt #button1 greift die Formatierung nicht.

Ich hab dich bestimmt falsch verstanden. Ich hab noch nicht soviel Erfahrung.

LG

[andi-bar]

es sieht so aus, als hättest du gern eine grafische navigation mit mouseover effekt.
das modul "hit_graphical_navigation" hat genau das gemacht. es wird leider nur bis contao 2.9.5 supported.

hab grad eine neue seite mit contao 3 aufgesetzt und suche genau nach der gleichen lösung.
hab bis heute nicht verstanden, warum es keine grafische navigation mit normal/selected/activated zuständen als modul in contao gibt.
mit css und klassen zu frickeln dauert ewig.

[Lego2013]

hab bis heute nicht verstanden, warum es keine grafische navigation mit normal/selected/activated zuständen als modul in contao gibt.
mit css und klassen zu frickeln dauert ewig.

andi-bar: Das liegt einfach daran, dass Contao als CMS nur für die Inhalte und die Vergabe von IDs bzw. Klassen zuständig ist. Alles andere wird über CSS geregelt. Und das ist auch gut so.

Das "Frickeln" mit CSS kann ich nicht nachvollziehen. Einen Mouseover erstellst Du doch mit CSS in nullkommanix Zeit: Eigenschaften für a:hover, a:focus, a:active und das war's auch schon. Falls es so sein sollte, dass Du CSS noch nicht so gut kennst, empfehle ich Dir das Buch von Peter Müller "Little Boxes". Das weiht Dich in (fast) alle Geheimnisse von CSS und CSS3 ein. Falls Du Englisch kannst, ist auch LevelUpTuts (bei Youtube) eine gute Quelle. Die haben eine komplette Serie zu CSS und CSS3 kostenlos veröffentlicht. Super gemacht.

Viel Spass und weiter Fragen stellen - das hilft nämlich allen anderen auch.

[andi-bar]

Wenn ich eine komplette Webseite aufbauen muss und das sehr häufig, ist "CSS-gefrickel" (ich will es mal so nennen) eher hinderlich.
Ich kann mich mit dem Kleinkram nicht lange aufhalten, weil es zu viel Zeit kostet und Zeit bedeutet Geld.
Es wäre also von Vorteil, wenn man neben der normalen Navigation einfach eine grafische Navigation erstellen könnte (die ich wesentlich öfter brauche, als getextete Navigation).
Genau das hat ja das "hit_graphical_navigation" Modul erledigt. Deswegen finde ich es extrem schade, dass das Modul nicht für Contao 3 weiterentwickelt wird.

In den Meisten fällen bin ich dafür zuständig, das Grundgerüst aufzubauen. Die Grafik kommt von einem Grafiker und wenn man so einen im Nacken hat, dann bettelt man förmlich um ein grafisches Menü. Der Grafiker wird nicht im CSS "rumfrickeln", er müsste es aber tun und das funktioniert nicht.

Ich hoffe, ich konnte erklären, warum wir unbedingt eine grafische Navigation brauchen und warum es einfacher sein muss, solche eine einzubinden.


Grüße,
Andi

[andreasisaak]

Wenn man im CSS frickelt, dann sollte man vielleicht nochmal die Schulbank drücken. Entweder man kann es oder man kann es nicht. Ich verkaufe auch keine Kühlschränke in Brasilien wenn ich kein Spanisch/Portugisisch spreche. Da hilft mir auch das Wörtbuch nichts. Wenn die Grundlagen nicht da sind ist es egal ob ich eine grafische Navigation zur Verfügung stehen habe oder nicht - es wird bei jedem kleinen Problem scheitern was dann auftritt. Und schon ist wieder die Extension oder Contao schuld.

[comanche]

Meine Navigation besteht aus Bildern die in verschiedene Richtungen gedreht oder garnicht gedreht sind. Ich habe die Navigation mit den Bordmitteln nicht so richtig realisiert bekommen.
Meine jetzige Lösung habe ich ursprünglich nur für das Logo (mit Link zur Startseite) genommen. Nachdem ich mit den Navigationsmodulen zu keinem Ergebnis gekommen bin, habe ich diese Links ebenso gemacht. Sind in diesem Fall nur 3.

Deine Lösung versteh ich leider nicht.

Ich vergebe einer Seite in der Seitenstruktur eine CSS-Klasse. Z.B. "kontakt"

Wenn ich jetzt eine Klasse anlege mit #kontakt #button1 greift die Formatierung nicht.

Ich hab dich bestimmt falsch verstanden. Ich hab noch nicht soviel Erfahrung.

LG

Wenn Du schon

#button1 a { }

verwendest und das funktioniert,
dann sollte

#kontakt #button1 a { }

auch funktionieren. Vorausgesetzt diese 2. Anweisung kommt auch wirklich nach der 1. Anweisung, damit sie diese überschreiben kann. Vielleicht postest du mal das komplette CSS für die Buttons, dann findet man evtl. den Fehler. Zur Not auch den Quellcode der generierten Seite.

Grüße,
Andreas

[pmmueller]

Ansonsten vergibst Du jeder Seite eine Klasse und benutz diese, um das Button-Bild zu definieren. Zum Beispiel für eine "Kontakt"-Seite:
#kontakt #button1 a { background: url(tl_files/layout/button1_hover.png) }

Ich habe zwar nicht den ganzen Thread gelesen, aber das passt so nicht zusammen. Wenn die Seite eine Klasse namens kontakt bekommt, dann muss der Selektor mit .kontakt beginnen.

[comanche]

Ich habe zwar nicht den ganzen Thread gelesen, aber das passt so nicht zusammen. Wenn die Seite eine Klasse namens kontakt bekommt, dann muss der Selektor mit .kontakt beginnen.

Mein Fehler. Danke für den Hinweis, Peter!

Grüße,
Andreas

[pmmueller]

Wenn Du schon

#button1 a { }

verwendest und das funktioniert, dann sollte

.kontakt #button1 a { }

...
Vorausgesetzt diese 2. Anweisung kommt auch wirklich nach der 1. Anweisung, damit sie diese überschreiben kann.

Wo wir gerade dabei sind

• Die Reihenfolge dieser beiden Anweisungen spielt keine Rolle, denn die Spezifität kommt in der Kaskade vor der Reihenfolge.
• Die Reihenfolge der beiden Anweisungen wäre also nur relevant, wenn die Selektoren bei der Spezifität die gleiche Punktzahl haben.

Kurz beschrieben wird das in "Die Kaskade im Schnelldurchgang" ( (mit Grafik zur Kaskade).

[andi-bar]

Wenn man im CSS frickelt, dann sollte man vielleicht nochmal die Schulbank drücken. Entweder man kann es oder man kann es nicht. Ich verkaufe auch keine Kühlschränke in Brasilien wenn ich kein Spanisch/Portugisisch spreche. Da hilft mir auch das Wörtbuch nichts. Wenn die Grundlagen nicht da sind ist es egal ob ich eine grafische Navigation zur Verfügung stehen habe oder nicht - es wird bei jedem kleinen Problem scheitern was dann auftritt. Und schon ist wieder die Extension oder Contao schuld.

Wenn ich das Alphabet kann, schreibe ich auch nicht alle Buchstaben zusammen mit dem Wort auf, das ich eigentlich schreiben möchte.
Die Grundlagen sind klar.
Es geht darum SCHNELL ein Menü mit grafischer Oberfläche aufzubauen, statt lange per CSS zu basteln.

Ich weiß nicht, wer von euch das modul "hit_graphical_navigation" mal benutzt hatte.
man editiert einfach die seite und kann drei zustände mit einer graphic verknüpfen.
dann wählt man als template navigation_graphical und schon werden die bilder dargestellt.
einfacher geht es nicht.

während ihr dann noch mit css bastelt, bin ich schon beim nächsten schritt.

[BugBuster]

na ohne gefrickel wirste die für TL 2.7.5 freigegeben Version nicht für Contao 3 lauffähig bekommen.
Klar, machbar ist alles und auf verschiedenen Wegen.

[andi-bar]

verstehe trotzdem nicht, warum grafische menüs im contao universum so extrem stiefmütterlich behandelt werden.
es schreit danach, aber keinen, der bisschen proggen kann, interessierts.

[BugBuster]

Das hat nichts mit Contao zu tun, Grafik Menüs allgemein sind unüblich, ob aus SEO Sicht oder anderen Gründen.

Ich würde die Erweiterung graphical_navigation mal ansehen.
Da braucht es warscheinlich nur das Template auf .xhtml bzw. .html Endung zu bringen, den Autoload Generator anschmeissen und es könnte schon funktionieren.