Lexi Help
Die neuesten Themen
» Private Nachrichten
von inde Gestern um 22:32

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde Gestern um 22:24

» Ad Ware im Forum?
von inde Gestern um 20:38

» [Update] Neues Theme der mobilen Version V2
von #Frank Gestern um 16:57

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Sa 24 Sep 2016 - 11:29

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Do 22 Sep 2016 - 20:30

» [phpBB2] Gruppen in der Wer is Online Anzeige "trennen"
von TheRollyJoger Mi 21 Sep 2016 - 10:49

» Yaruma - Fantasy-RPG Forum
von Alketa Di 20 Sep 2016 - 21:34

» [phpBB3] Links automatisch kursiv
von inde Di 20 Sep 2016 - 17:37

» [Invision] Kompletter Css-Codebaum gesucht !
von inde Di 20 Sep 2016 - 13:12

» Filmforum "Dark Movie Dreams"
von Ray Di 20 Sep 2016 - 11:56

» Forumseite mit Mailware verseucht ?
von inde Mo 19 Sep 2016 - 20:31

» Ich kann keine Hintergrundbilder hochladen
von Serv Mo 19 Sep 2016 - 19:59

» SQL Zugang
von inde Mo 19 Sep 2016 - 18:56

» Design vergrößern. Probleme mit Design.
von Minka02 Mo 19 Sep 2016 - 17:42

Partner
free forum

CSS Sprites

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt CSS Sprites

Beitrag von Blade@CodeLabs am Fr 8 Feb 2013 - 18:44

Hallo!
Diesmal habe ich was kompliziertes. Ich weiß ja wer hier als erstes antwortet, deswegen sollte es schnell gehen Wink
Also ich würde gerne CCS Sprites für die Buttons benutzen, nur leider sind die Infos bei Google schlecht geeignet, und hier gibts noch keinen Beitrag darüber, sodass andere Buttons ganz weg sind Shocked

Also ich weiß, dass für CSS Sprites die Eigenschaften background-image und background-position benötigt werden.
Beispiel:
#i_icon_mini_message {
}

#i_icon_mini_message:hover {
}

Ich habe gelesen, das man auch mit der Pseudoklasse :active arbeiten kann. Also ich muss ja das normale Bild und das hover Bild einfügen, aber wie mache ich das, dass dann beim cursorn das 2. Bild erscheint?
Ich dachte an sowas:

Code:

#i_icon_mini_message {
background-image:url ("http://imageshack.us/a/img43/2373/button10upd.png");
display: block;
height: 26px;
width: 115px;
}

#i_icon_mini_message:hover {
background-image: http://imageshack.us/a/img842/2307/button10over.png;
background-position: -115px -26px;
}

Aber ganz klappen tut das nicht...

Danke im Voraus!


Zuletzt von Blade@CodeLabs am Fr 8 Feb 2013 - 19:26 bearbeitet, insgesamt 1 mal bearbeitet

Blade@CodeLabs
Lehrling
Lehrling

Männlich Beiträge : 136
1.Ermahnung
Anmeldedatum : 17.11.12

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Sprites

Beitrag von Günther am Fr 8 Feb 2013 - 18:49

Hallo,

ich würde vorschlagen, du recherchierst dazu nochmal genau, siehst dir Beispiele an und verwendest ggf. einen der Online-Generatoren für CSS-Sprites.
Dazu gibt es sehr viele Informationsquellen und wenn du wirklich CSS-Sprites verwenden möchtest, solltest du dir schon die Zeit nehmen, dich genauer damit zu beschäftigen. Wink

Solltest du es nicht hinbekommen, dann sieh dir v.a. die Generatoren an, die es dafür sogar schon gibt. Das sollte es dir erleichtern. Wink

Liebe Grüße
Günther

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Sprites

Beitrag von Blade@CodeLabs am Fr 8 Feb 2013 - 18:52

Ja diese Generatoren habe ich auch schon gefunden, nur sind dann ca. 6 Buttons verschwunden...Vielleicht solltet ihr hier mal so einen Hilfsbeitrag für euer Lexikon posten Wink

Blade@CodeLabs
Lehrling
Lehrling

Männlich Beiträge : 136
1.Ermahnung
Anmeldedatum : 17.11.12

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Sprites

Beitrag von Günther am Fr 8 Feb 2013 - 19:10

@Blade@CodeLabs schrieb:Vielleicht solltet ihr hier mal so einen Hilfsbeitrag für euer Lexikon posten Wink
Erstens gibt es dazu sehr viele, verständliche und ausführliche Tutorials und Erklärungen im Internet, wenn man ein wenig danach sucht.
Zweitens sind CSS-Sprites keine Grundfunktionen bzw. Umsetzungen, die für viele User wichtig sind. Erst vor wenigen Jahren ist diese Idee überhaupt erstmals aufgekommen und wird seither teilweise als kreative Lösung zur Ladezeitoptimierung verwendet. Dazu ist allerdings ein gutes CSS-Grundverständnis nötig. Es hätte wenig Sinn, das hier zu erklären, weil einerseits wenige User davon betroffen sind und es andererseits bereits zahlreiche gute Erklärungen gibt.

Ich denke, wenn du dir dafür etwas Zeit nimmst und dich in die Materie einarbeitest, bekommst du das auch hin.
Andernfalls sind CSS-Sprites nicht zwingend nötig, da es viele altbewährte Alternativen dazu gibt, die wir dir auch schon einmal genannt haben.

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Sprites

Beitrag von Blade@CodeLabs am Fr 8 Feb 2013 - 19:17

Mhh ja klar, hovern bekomme ich auch wohl hin, ist leider nicht perfekt aber ich nehme das solange ich noch keinen passenden CSS Sprite code habe. Ich suche auch schon seit Wochen nach was passendem. Ich weiß leider auch nicht genau wonach ich suchen soll, es gibt sooo viele, nur sind nicht alle davon gut...

Blade@CodeLabs
Lehrling
Lehrling

Männlich Beiträge : 136
1.Ermahnung
Anmeldedatum : 17.11.12

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Sprites

Beitrag von Günther am Fr 8 Feb 2013 - 19:23

http://bueltge.de/css-sprites-einfach-erklaert/675/ Wink

Können wir dieses Thema damit als erledigt sehen?

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Sprites

Beitrag von Blade@CodeLabs am Fr 8 Feb 2013 - 19:26

Mhh den hab ich auch schon benutz, dann guck ich da nochmal rein Wink
Eins noch: könntest du mir vielleicht sagen ob ich bei CSS Sprites die hover Klasse trotzdem brauche?

Dann kannst du das Thema schließen, und danke mal wieder vielmals Very Happy
Schönes Wochenende noch!

Blade@CodeLabs
Lehrling
Lehrling

Männlich Beiträge : 136
1.Ermahnung
Anmeldedatum : 17.11.12

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Sprites

Beitrag von Günther am Fr 8 Feb 2013 - 19:29

Nur benutzen ist noch zu wenig. Du solltest dir auch die gesamte Erklärung genau durchlesen und dir die Beispielgrafik ansehen. Wink

Und ja, wie du am Beispielcode dort siehst, wird das Hintergrundbild zuerst für das Element im Normalzustand festgelegt und anschließend wird bestimmt, dass der Hintergrund sich beim Hovern verschiebt:
#image-link {
width: 60px;
height: 60px;
text-decoration: none;
display: block;
background: url('images/fb-sprite.png') 0 0;
}
#image-link:hover, #image-link:active {
background-position: 60px 0;
}
Genau darum geht es dir ja.

Dann wünsche ich dir auch ein schönes Wochenende und viel Erfolg. Wink

-closed-

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten