mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 23:38 Benutzername: Passwort: Auto-Login

Thema: [css] Navigation mit schrift und Bild roll over vom 25.11.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> [css] Navigation mit schrift und Bild roll over
Seite: Zurück  1, 2, 3  Weiter
Autor Nachricht
graphicsandunity

Dabei seit: 22.11.2004
Ort: Berlin
Alter: 33
Geschlecht: Männlich
Verfasst Sa 27.11.2004 11:51
Titel

Antworten mit Zitat Zum Seitenanfang

joESmither hat geschrieben:
http://wellstyled.com/css-nopreload-rollovers.html

da hast du das konventionelle beispiel mit css (die backgrounds werden getauscht) und das beispiel eines css-rollovers für das keine grafiken preloaded werden müssen, da man pro rollover nicht zwei oder drei grafiken sondern nur eine nutzt die man per "background-position:" verschiebt.



Eine sehr unorthodoxe Lösung.
Aber scheinbar ist es die brauchbarste.

Damit ich das richtig verstehe:

Wenn ich eine <ul> anlege, deren <li>'s ein image als list-style haben, dann sehe ich anfangs nur den einen teil des bildes.
und wenn ich dann drüber fahre sehe ich dannd en anderen teil?
wie das gemacht wird, hab ich verstanden.
aber ist es denn gemacht, dass ich da nicht das ganze bildchen sehe?
beschränkt sich dieses list-style-image auf eine maximale größe?
außerdem geht das doch gar nicht als bakcground-image zu setzen. ich meine der list-style ist doch "at the front"...

GaU
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
matt

Dabei seit: 06.05.2003
Ort: Köln
Alter: 35
Geschlecht: Männlich
Verfasst Sa 27.11.2004 12:04
Titel

Antworten mit Zitat Zum Seitenanfang

Die Lösung ist super!

Entweder gibts Du dem <li> feste Größenangaben bzw. dem <a href> dadrin, denn wenn ich mich jetzt recht erinnere, klappt das mit dem :hover bei dem <li> nicht (IE), also muss man die ganze Geschichte in den Link bauen, kann mich aber auch täuschen.

Jedenfalls ist es bei fester Größenangabe natürlich leichter und man kann mit kleineren Bildern arbeiten, wenn man nicht weiß wie groß das ganze wird, wegen eventuell verstellbarer Schriftgröße, dann macht man sich einfach ein größeres Hintergrundbild und verschiebt es eben mehr.

Was meinst Du mit "at the front"? Dass das "Bild" links vor dem Text steht? Dazu baut man dann einfach noch padding-left mit rein.


Zuletzt bearbeitet von matt am Sa 27.11.2004 14:01, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
graphicsandunity

Dabei seit: 22.11.2004
Ort: Berlin
Alter: 33
Geschlecht: Männlich
Verfasst Sa 27.11.2004 13:18
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hätte wohl lieber top statt front schrieben sollen. *grinsel*

Meinte damit, dass ich nich ganz verstanden hab, wie das mit dem list-style-image funzen soll, wo doch dieses image nicht im hintergrund liegt, sondern in der gleichen tiefenebene wie der text des <li>.


Zuletzt bearbeitet von graphicsandunity am So 28.11.2004 04:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
matt

Dabei seit: 06.05.2003
Ort: Köln
Alter: 35
Geschlecht: Männlich
Verfasst Sa 27.11.2004 14:04
Titel

Antworten mit Zitat Zum Seitenanfang

Achso ... ja ähm, Du baust es nicht als list-style-image ein, sondern als background-image. Denn von dem list-style-image kannst Du auch gar nicht die Position ändern. Kann man schon mit list-style-position, aber das ist was anderes, da gibts ja auch nur inside und outside.
  View user's profile Private Nachricht senden
graphicsandunity

Dabei seit: 22.11.2004
Ort: Berlin
Alter: 33
Geschlecht: Männlich
Verfasst Sa 27.11.2004 14:32
Titel

Antworten mit Zitat Zum Seitenanfang

Ächso. Lächel

Oki alles klar.

Werd ich mal ausprobieren.

Danke für die Infos

(Komische Situation, da ich den Thread gar nich eröffnet habe Grins )

Grüßle

GaU


Zuletzt bearbeitet von graphicsandunity am So 28.11.2004 04:29, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
stevenx

Dabei seit: 18.06.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 27.11.2004 16:11
Titel

Antworten mit Zitat Zum Seitenanfang

ich mache meine bild navigation auch immer so Lächel mit bg verschieben Lächel

und die läuft auf allen gängigen browsern....

seiten die sowas im einsatz haben zum beispiel:

http://www.ciao.de/Digitalkameras_583492_
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Sa 27.11.2004 19:02
Titel

Antworten mit Zitat Zum Seitenanfang

wir ham sone navi jetzt bei 4 projekten eingesetzt, und bisher hat sich kein kunde beschwert das irgendwas nich funktioniert hat.
wir hams im büro in IE5, 5.5, 6, firefox0.9 & 1, opera 7.irgenwdas getestet, und es hat einwandfrei funktioniert.
auch im safari glaub ich.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
graphicsandunity

Dabei seit: 22.11.2004
Ort: Berlin
Alter: 33
Geschlecht: Männlich
Verfasst Sa 27.11.2004 23:11
Titel

Antworten mit Zitat Zum Seitenanfang

Also dieser Lösungsweg klingt wirklich sehr gut.
Tolle Methode um JavaScript zu umgehen! Lächel

Werde das mal ausprobieren.

Schönen Abend noch.

GaU
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Navigation mit Bild-Over-Effekt in Dreamweaver CS6
CSS Mouse over
css > roll-over > bei bilder ..
css menue problem -> mouse over
Textinfo bei „Mouse over“ bei einem verlinken Bild anzeigen
[CSS] Probleme mit CSS-Navigation und Rolloverbildern
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3  Weiter
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.