Install the app
How to install the app on iOS
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder ein alternativer Browser verwenden.
Du solltest ein Upgrade durchführen oder ein alternativer Browser verwenden.
jQuery- hover mit fade effekt
- Themenstarter mita1982
- Beginndatum
Sollte beides gehen, aber ich meinte das a-Tag. Das muss dann natürlich display:block und eine Höhe und Breite haben (ich kenne dein css ja nicht, aber das wird es wohl auch jetzt schon haben).
ok ich probier das die Tage aus und melde mich hier mit dem Ergebnis wieder DANKE erstmal...
Das ganze lässt sich auch beliebig anders gestalten (span-Tag anstelle des img-Tag und dafür beim span ein Hintergrundbild. Wenn du dann noch home.jpg und home_hover.jpg in eine einzige Datei packst und mit background-positition arbeitest, wäre das optimal)
Warum ist ausgerechnet so optimal
Kannst Du mal diese Technik genauer erläutern.. habe dasGefühl, dass selbst die Offizielle Seite von jQuery das so macht.. ich verscuhe ein wenig diese Seite zu analysieren um so professionell wie moglich das style sheat nächstes mal zu gestallen. und da ist mir das aufgefallen.. dass der hintergrund der Navi 82px hoch ist, aber die Navi an sich nur 41px...
darüberhinuas verstehe ich den status "scroll" bei einem backgroundbild nicht...
M
Maik
Hi,
das Stichwort lautet "CSS Sprites". Weitere Artikel kannst du den Suchergebnissen von google entnehmen.
Der Vorteil dieser Technik liegt ganz klar auf der Hand: Der Browser hat nur eine Grafikdatei zu laden, die er mittels der background-position-Eigenschaft im Anzeigebereich der einzelnen Elemente ausrichtet, und der Server-Traffic so drastisch heruntergeschraubt wird.
Daher fällt die Grafikdatei auch größer (höher, breiter) aus, wie das Element selbst, das sie als Hintergrund ausschmückt.
In meinem CSS-Tutorial CSS-Rollover und CSS-Rollover - Teil 2 stelle ich diese Methode in den Abschnitten "CSS-Rollover mit background-image" im kleinen Maßstab auf die einzelnen Menüpunkte bezogen vor. In der produktiven Praxis würden alle Hintergrundzustände der einzelnen Menüpunkte in eine einzige Grafikdatei fließen.
Ein weiterer Pluspunkt gegenüber dem Tauschen zweier oder dreier Grafikdateien, die "Hover"-Grafiken flackern beim allerersten Aufruf nicht mehr kurz auf, wenn der Browser sie in diesem Moment erst in seinen Cache lädt.
Hier im Forum nutzen wir die Technik auch an diversen Stellen:
... um mal eine kleine Auswahl an Anwendungsbeispielen zu nennen, die sich nicht ausschließlich auf Navigationsmenüs beschränken.
mfg Maik
das Stichwort lautet "CSS Sprites". Weitere Artikel kannst du den Suchergebnissen von google entnehmen.
Der Vorteil dieser Technik liegt ganz klar auf der Hand: Der Browser hat nur eine Grafikdatei zu laden, die er mittels der background-position-Eigenschaft im Anzeigebereich der einzelnen Elemente ausrichtet, und der Server-Traffic so drastisch heruntergeschraubt wird.
Daher fällt die Grafikdatei auch größer (höher, breiter) aus, wie das Element selbst, das sie als Hintergrund ausschmückt.
In meinem CSS-Tutorial CSS-Rollover und CSS-Rollover - Teil 2 stelle ich diese Methode in den Abschnitten "CSS-Rollover mit background-image" im kleinen Maßstab auf die einzelnen Menüpunkte bezogen vor. In der produktiven Praxis würden alle Hintergrundzustände der einzelnen Menüpunkte in eine einzige Grafikdatei fließen.
Ein weiterer Pluspunkt gegenüber dem Tauschen zweier oder dreier Grafikdateien, die "Hover"-Grafiken flackern beim allerersten Aufruf nicht mehr kurz auf, wenn der Browser sie in diesem Moment erst in seinen Cache lädt.
Hier im Forum nutzen wir die Technik auch an diversen Stellen:
- http://style.tutorials.de/v6/images/37/map_.png
- http://style.tutorials.de/v6/images/37/map_poll_.png
- http://style.tutorials.de/v6/images/37/map_y_.png
- http://style.tutorials.de/v6/images/37/map_box_.png
- http://style.tutorials.de/v6/images/37/map_btn_.png
- http://style.tutorials.de/v6/images/37/map_menu_.png
... um mal eine kleine Auswahl an Anwendungsbeispielen zu nennen, die sich nicht ausschließlich auf Navigationsmenüs beschränken.
mfg Maik
Ok Danke ziehe mir gleich diese CSS-Sprites und deine CSS Rollover rein...
Doch damit kann man ja nicht, den hover effekt mit einem "rüberfaden" machen oder?
Also jQuery...
noch eine kurze oftopic Frage.. ich habe dein Tutorial gelesen dreispalter layout.. und muss sagen, dass ich diese backgound-image im div wrapper selber schonmal ausgedacht habe.. wusste garnicht dass es sogar ein Namen trägt. Kommen wir zu meiner Frage das stellst du die Klasse clearfix vor. wo kann man darüber diskutieren oder kannst du es nochmal erklären? vieleicht auch an anderer Stelle? dachte ein clear:left;: würde reichen..
Doch damit kann man ja nicht, den hover effekt mit einem "rüberfaden" machen oder?
Also jQuery...
noch eine kurze oftopic Frage.. ich habe dein Tutorial gelesen dreispalter layout.. und muss sagen, dass ich diese backgound-image im div wrapper selber schonmal ausgedacht habe.. wusste garnicht dass es sogar ein Namen trägt. Kommen wir zu meiner Frage das stellst du die Klasse clearfix vor. wo kann man darüber diskutieren oder kannst du es nochmal erklären? vieleicht auch an anderer Stelle? dachte ein clear:left;: würde reichen..
M
Maik
Der Ursprung der clearfix-Klasse findet sich in dem Artikel How To Clear Floats Without Structural Markup.noch eine kurze oftopic Frage.. ich habe dein Tutorial gelesen dreispalter layout.. und muss sagen, dass ich diese backgound-image im div wrapper selber schonmal ausgedacht habe.. wusste garnicht dass es sogar ein Namen trägt. Kommen wir zu meiner Frage das stellst du die Klasse clearfix vor. wo kann man darüber diskutieren oder kannst du es nochmal erklären? vieleicht auch an anderer Stelle? dachte ein clear:left;: würde reichen..
Diese CSS-Technik erspart dem Seitenautor ein, oder je nach Komplexitität der Seitenstruktur, mehrere inhaltsleere HTML-Elemente, die im Markup lediglich die Aufgabe übernehmen, eine Floatumgebung mit der clear-Eigenschaft abzubrechen.
Aus diesem Konstrukt:
Code:
<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>wird dann kurzerhand:
Code:
<div class="clearfix"> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
</div>Sollten dir noch weitere Fragen unter den Nägeln brennen, ist hierfür das CSS-Forum der passende Ort, denn mit diesem Thema hier hat dies alles ja nicht viel gemeinsam, und es soll hier ja schließlich bei einer kurzen "Off-Topic"-Frage bleiben, die dir an dieser Stelle auch gestattet sei.
mfg Maik
Ich weiß ja echt nicht wie oft ich Dir danken soll..
zwar verstehe ich noch nicht ganz warum man dasn machen muss.. aber In den letzten Tagen hast Du mir echt sehrviel geholfen.,
Vielcht stell ich echt im CSS Forum noch einige Fragen.. Aber es kein Design Forum hiergitb also webdesign.. nicht css, html, javscript php sondern Usability und eine Art Style Guide..
Vielen Dank nochmal und ich werde morgen oder übermorgen.. warscheinlich berichten ob es mit den Methoden hier klappt oder nicht.. Aber ich denke nicht, dass man mit den CSS Sprites einen Fade Effekt mit hilfe von jQuery erzeieln kann..
zwar verstehe ich noch nicht ganz warum man dasn machen muss.. aber In den letzten Tagen hast Du mir echt sehrviel geholfen.,
Vielcht stell ich echt im CSS Forum noch einige Fragen.. Aber es kein Design Forum hiergitb also webdesign.. nicht css, html, javscript php sondern Usability und eine Art Style Guide..
Vielen Dank nochmal und ich werde morgen oder übermorgen.. warscheinlich berichten ob es mit den Methoden hier klappt oder nicht.. Aber ich denke nicht, dass man mit den CSS Sprites einen Fade Effekt mit hilfe von jQuery erzeieln kann..
