|
|||
css-sprites
hallo Leute,
hab hier mal versucht nen sprite zu programieren, der durch overflow: visible auch das gesetzte umfeld verändern soll. Funktioniert nicht wie gewünscht. da ich sowas bisher nirgends gesehn hab, würde mich interessieren ob das überhaupt möglich ist. Wäre nämlich für kleinere galerien bestimmt kein schlechter ansatz. Über den normalen weg --> hovern 5 verschiedener Bilder isses kein Thema... aber eben der sprite... anbei mal der background (jpg) und der nicht / bedingt funktionierende Code: HTML-Code:
<style type="text/css"> #farben {width:100px; height:140px; background:url(sprite-1.jpg); overflow:hidden;} #farben a {width: 20px; height: 20px; display:block; float:left;margin-top:120px; background-position:bottom ; background:url(sprite-1.jpg); text-decoration:none;overflow:visible;} #farben a#rot {background-position:-100px bottom;overflow:visible;} #farben a#rot:hover{background-position:-100px bottom;overflow:visible;} #farben a#blau {background-position:-220px bottom;overflow:visible;} #farben a#blau:hover {background-position:-200px bottom;overflow:visible;} #farben a#gruen {background-position:-340px bottom;overflow:visible;} #farben a#gruen:hover {background-position:-300px bottom;overflow:visible;} #farben a#gelb {background-position:-460px bottom;overflow:visible;} #farben a#gelb:hover {background-position:-400px bottom;overflow:visible;} #farben a#hellblau {background-position:-580px bottom;overflow:visible;} #farben a#hellblau:hover {background-position:-500px bottom;overflow:visible;} </style> </head> <body> <div id="farben"> <a id="rot" href="#"></a> <a id="blau" href="#"></a> <a id="gruen" href="#"></a> <a id="gelb" href="#"></a> <a id="hellblau" href="#"></a> </div> </body> </html> weis denn jemand nen speicher wo man`s zum verlinken öffentlich ablegen kann ? Würde mich freuen wenn wir daß hier zusammen hinbekommen... gruß an alle STU Geändert von stu (01.09.2011 um 12:46 Uhr) Grund: link zum Anhang hat nicht funktioniert... |
Sponsored Links |
|
|||
Es gibt "Freehoster" (Suchbegriff).
Falls du aber darauf hinaus wollen solltest, dass ein Hintergrundbild auch außerhalb der gesetzten Grenzen einer Box sichtbar werden soll: Nein, das geht nicht. Hintergrundbilder haben keinen Einfluss auf einen "overflow" -- sind schließlich kein Inhalt.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Hallo fricca,
gemeint sind eigentlich die kleinen farben-div`s 20px20px die per overflow die fläche von 100px140px durch den selben nur versetzten Hintergrund verändern sollen... kümmer mich noch um das bild... |
|
|||
Wir brauchen kein Bild, sondern einen Link zum Problem.
Dein Code ist nur ein Fragment. Vollständiger Code beginnt mit einem Doctype. Bitte lesen und beachten: http://xhtmlforum.de/40080-f-r-frage...twortende.html
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
bitte um entschuldigung ist mein erster Forenbeitritt überhaupt.
hier der komplette code HTML-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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sprite_versuch</title> <style type="text/css"> #farben {width:100px; height:140px; background:url(sprite-1.jpg); overflow:hidden;} #farben a {width: 20px; height: 20px; display:block; float:left;margin-top:120px; background-position:bottom ; background:url(sprite-1.jpg); text-decoration:none;overflow:visible;} #farben a#rot {background-position:-100px bottom;overflow:visible;} #farben a#rot:hover{background-position:-100px bottom;overflow:visible;} #farben a#blau {background-position:-220px bottom;overflow:visible;} #farben a#blau:hover {background-position:-200px bottom;overflow:visible;} #farben a#gruen {background-position:-340px bottom;overflow:visible;} #farben a#gruen:hover {background-position:-300px bottom;overflow:visible;} #farben a#gelb {background-position:-460px bottom;overflow:visible;} #farben a#gelb:hover {background-position:-400px bottom;overflow:visible;} #farben a#hellblau {background-position:-580px bottom;overflow:visible;} #farben a#hellblau:hover {background-position:-500px bottom;overflow:visible;} </style> </head> <body> <div id="farben"> <a id="rot" href="#"></a> <a id="blau" href="#"></a> <a id="gruen" href="#"></a> <a id="gelb" href="#"></a> <a id="hellblau" href="#"></a> </div> </body> </html> danke dir... |
|
|||
Was du mit overflow willst ist mir völlig schleierhaft. "visible" ist der Initalwert der overflow-Eigenschaft. Keine Ahnung, was du damit in deinem Code erreichen willst. Das Beispiel bei CSS4You zeigt das Verhalten von überfließendem Inhalt. Hintergrundbilder sind kein Inhalt.
Bitte -- wenn du einen Link gepostet hast -- beschreib genauer, was an dem Ergebnis nicht deinen Erwartungen entspricht und was du eigentlich erreichen willst.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
hallo nochmal,
bitte entschuldige meine laienhafte Beschreibensweise, hab mein Agentur-chef dazu gebracht das ding mal ins Netz zu stellen -->sprite_versuch wie du sehen kannst färben sich die kleinen Kästchen oben beim überfahren rot, jedoch überfließt das restliche bild nicht so dass sich der große kasten auch ändert. Also erreicht werden soll das der hintergrund beim überfahren der kleinen kästchen um das jeweilige maß (100px pro Farbfeld) nach links verschoben werden soll. aber es würde wenn dann wahrscheinlich nur für ein kästchen funktionieren oder man fährt mit dem cursor immer von unten darüber, da der dann funktionierende overflow sich ja über die andern kleinen legt... naja hört sich kompliziert an, hoffe Du/ ihr wisst jez was das ziel wäre... vielen dank fürs Zeit nehmen... gruß stu Geändert von stu (01.09.2011 um 14:29 Uhr) |
|
|||
Zitat:
Alles, was du mit dem Hintergrund der Links machst spielt sich innerhalb deren Boxgrenzen ab. Overflow interessiert dabei nicht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Stichwörter |
sprites |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
MYspace mehr als nur CSS oder ? | Vinceone | CSS | 0 | 12.07.2007 03:21 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |