zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css-sprites

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.09.2011, 12:39
stu stu ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2011
Beiträge: 5
stu befindet sich auf einem aufstrebenden Ast
Standard 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>
Mußte leider gerade feststellen das hier keine bilder hochgeladen werden können und der link aus meinem email-account natürlich auch nicht funktioniert.
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...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.09.2011, 12:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.09.2011, 13:10
stu stu ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2011
Beiträge: 5
stu befindet sich auf einem aufstrebenden Ast
Lächeln

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 01.09.2011, 13:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von stu Beitrag anzeigen
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
Mit Zitat antworten
  #5 (permalink)  
Alt 01.09.2011, 13:30
stu stu ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2011
Beiträge: 5
stu befindet sich auf einem aufstrebenden Ast
Rotes Gesicht

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>
aber hab grad nochmal selber versucht diesen overflow overflow: Übergroßer Inhalt: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets nach zu stellen, nich mal das hat funktioniert.

danke dir...
Mit Zitat antworten
  #6 (permalink)  
Alt 01.09.2011, 13:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 01.09.2011, 14:25
stu stu ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2011
Beiträge: 5
stu befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #8 (permalink)  
Alt 01.09.2011, 14:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von stu Beitrag anzeigen
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.
Nein, natürlich nicht. Bitte lies nochmal ganz genau, was ich schon zweimal über overflow und Hintergrundbilder geschrieben habe.
Alles, was du mit dem Hintergrund der Links machst spielt sich innerhalb deren Boxgrenzen ab. Overflow interessiert dabei nicht.
Mit Zitat antworten
  #9 (permalink)  
Alt 01.09.2011, 14:48
stu stu ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2011
Beiträge: 5
stu befindet sich auf einem aufstrebenden Ast
Lächeln

hab den Sinn und Zweck der ganze overflow geschichte woll nich richtig verstanden...
danke das du dich mir angenommen hast...
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
sprites

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:54 Uhr.