Submit-Button mit Background-Image

Hallo,

ich habe bei einem Submit-Button ein Background-image per CSS eingebunden, welches mit Repeat-x wiederholt wird. Was auch soweit gut funktioniert. Ein weiteres Background-image wird bei Hover mit CSS eingebunden, aber dieses wird nur mit halber Höhe angezeigt. Tauche ich beide Background-images gegeneinander aus, wird bei Hover auch nur die halbe Höhe angezeigt. Ebenso habe ich den TopLink mit diesen beiden Images versehen und hier funktioniert alles, auch bei Hover.
Hat hierzu jemand eine Idee? Zu sehen ist dies unter dem Link http://sub.musikverein-hirschzell.de/kontakt.html.
Danke!


Gruß
Thomas

Hallo Thomas,

in Deinem CSS gibt es folgende Regel, die das hervorruft:

Code:

---

form button:hover, input[type="submit"]:hover, .button:hover {
        background-position: 0 -15px !important;
}

---

Du ziehst also das Hintergrundbild um 15px nach oben. Wenn Du die Angabe der Position löscht, ist alles gut.

Gruß
Hella

Im Firefox rechte Maustaste auf das Element, dann "Element untersuchen". Oben rechts "Pseudoklassen umschalten" auswählen und dann per Checkbox den Hoverstatus wählen. Jetzt siehst du u.a.

HTML-Code:

---

form button:hover,
input[type="submit"]:hover,
.button:hover {
        text-decoration: none;
        background-position: 0 -15px !important;
}

---

Tipp: Hintergrundbilder, welche bei Hover getauscht werden, sollten als Sprite angelegt werden. Ansonsten hat man ein unschönes "Springen" beim ersten Hovern, weil dieses Bild dann erst geladen wird. Beispiel: https://www.w3schools.com/css/css_image_sprites.asp

Wobei du da eigentlich kein Bild benötigst, das kannst du auch mit CSS machen.

HTML-Code:

---

#main .ce_toplink.top_screen,
#main .back.list_screen {
        background-image: linear-gradient(to bottom, #A29C90, #544F43 55%, #544F43);
}

---

Hallo Hella und Andreas,

danke für Eure Infos und Hilfestellung.
Das mit dem "background-image: linear-gradient" hat super geklappt. Dazu habe ich gleich noch eine Frage. In der Navigation gibt es auf den Kopf gestellte Dreiecke für Webseiten mit Unterseiten. Diese Dreiecke liegen ebenso als Grafikdatei vor und sind per "background-image:url("...")" eingebunden.
Gibt es eine Möglichkeit mit CSS solche Dreiecke zu erstellen mit transparentem Seitenbereich?

Den Eintrag "form button:hover, input[type="submit"]:hover, .button:hover" gibt es in meinen erstellten CSS-Dateien nicht. Mir ist aber aufgefallen, nachdem ich unter Seitenlayouts, CSS-Framework, Formulare aktiviert hatte, dass bei allen Formularfeldern es einen Versatz von 15 Pixel gab. Dies habe ich größtenteil per CSS ausgeglichen. Ich denke mal, dass dies Contao intern händelt.
Komme ich irgendwie an diesen CSS-Eintrag herankommen?


Gruß
Thomas

Zitat:

---

Zitat von Thomasge

... Gibt es eine Möglichkeit mit CSS solche Dreiecke zu erstellen mit transparentem Seitenbereich? ...

---

"mit transparentem Seitenbereich"? Ja, mit CSS kann man aus Blockelementen Dreiecke formen, Beispiel: https://davidwalsh.name/demo/css-triangles.php

Du kannst für die Links Pseudoelemente erstellen, welche du dann als Blockelement deklarierst und sie als Dreiecke formatierst.

PHP-Code:

---

a {
  position: relative; /* nötig zur Positionierung des Dreiecks */
}
a::after {
  content: '';
  position: absolute; /* macht es auch zum Blockelement */
  /* weitere Dreiecksformatierungen */  
}
a:hover::after {
  /* andere Formatierung bei Hover */  
} 


---

Zitat:

---

Zitat von Thomasge

... Komme ich irgendwie an diesen CSS-Eintrag herankommen? ...

---

Ja. Du musst die volle Kontrolle über dein CSS erlangen. Du musst wissen was/wie/wo/warum eingebunden wird. Mach dich da mal schlau. Benutze kein CSS des internen CSS-Editors, Erweiterungen können kleinere CSS-Dateien ins FE bringen, jede Checkbox im Layout "CSS framework" steht für eine CSS-Datei aus dem Core. Wenn du im Layout irgendwelche Breiten angibst, wird außerdem im HEAD ein STYLE-Element mit dem entsprechenden CSS generiert.