Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 28-08-2010, 19:04   #1 (permalink)
questions++;
 
Registriert seit: Jul 2010
Beiträge: 51
Navigation mit Parallelogrammen

Der Titel sagt eh schon fast alles. Ich (eig. ein Kunde, der das Design seiner alten Visitenkarte auf die Website umgelegt haben möchte) würde gerne eine Navigation à la:
...._________________
.../........../........../........../
../........../........../........../
./____ /_____/ _____/

bauen (zu meinen "Zeichenkünsten" dürft ihr mir nachher gratulieren ).

Frage: Wie würdet ihr das lösen (es gibt ja leider nur rechteckige Bilderformate ^^), außerdem soll es einen Hover-Effekt (beim Bild, nicht beim daraufliegenden Text) geben, der das Bild ändert.

Ich dachte vllt mit DOM, also einfach Bilder (vllt als bg von div-Bereich mit Text drüber ?) und dann Abstand nach links halt festlegen (bin mir aber bei der Lösung bezüglich HoverEffekt nicht so sicher, da sich die Bilder da ja dann zwangsläufig überlagern, erzeugt ein MouseOver bei einem transparenten Teil eines GIFs auch eine Reaktion?)

Meine zweite Lösung wäre ganz primitiv aber auch unglaublich umständlich und nicht gerade flexibel: einfach in Rechtecke aufteilen:
______
.../
../
./_____

so in etwa, ist aber ziemlich kompliziert wenn ich Bilder ändern will, da ich ja dann immer 2 ändern muss und auch dementsprechend mehrere Varianten der Bilder brauche.

Hat jemand noch weitere Lösungsansätze zu dieser Problematik? (bzw Information bez. DOM-Lösung, Browser-Kompatiblität und MouseOver bei transparenten/sich überlagernden Bildabschnitten)

Wäre sehr dankbar für jeden hilfreichen Beitrag

PS.: Punkte dienen nur als Platzhalter
__________________
Ich spreche Deutsch, Englisch, Französisch, Latein und Russisch... nur mit AS will's nicht so ganz hinhauen.

Geändert von peat-ar (28-08-2010 um 19:09 Uhr)
peat-ar ist offline   Mit Zitat antworten
Alt 30-08-2010, 08:23   #2 (permalink)
Neuer User
 
Registriert seit: Aug 2009
Ort: Berlin
Beiträge: 271
Verweis-sensitive Grafiken definieren
Für MouseOver kannst du dann extra Grafiken positionieren.

Hier ein Map-Beispiel:
SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)
__________________
MfG toosten

IDE: Adobe® Flex® Builder™ 3, Adobe® Flash® Builder™ 4
toosten ist offline   Mit Zitat antworten
Alt 30-08-2010, 08:45   #3 (permalink)
in the boondocks
 
Benutzerbild von shin10
 
Registriert seit: Feb 2006
Ort: Augsburg
Beiträge: 4.421
hi peat-ar,

du kannst dir mal das hier ansehen. das hab ich vorletzte woche gemacht. zwei/drei bilder sind nicht optimal ...

wegen der schrift wurde jeder menüpunkt einzeln als bild gesetzt. kann man natürlich auch mit einem bild und text drüber machen, wenn es die schrift erlaubt. (empfehlenswert!)

das dumme an der sache mit der transparenz ist, dass der ie6 mit transparenten pngs nicht klar kommt; noch ein grund, warum wir jedes einzeln haben, da sich die wellenlinie mit dem menü überschneidet. also eigentlich haben wir gar keine transparenz, auch wenn es so aussieht.

schau's dir einfach mal an. wenn du fragen hast, nur raus damit. aber eines vorweg: sag ihm, dass das nicht so billig wird, wegen des extraaufwands...
da kannst schon ein paar stunden mehr rechnen

mfg

sx
__________________

flintfabrik.de

Geändert von shin10 (30-08-2010 um 08:46 Uhr)
shin10 ist offline   Mit Zitat antworten
Alt 02-09-2010, 17:23   #4 (permalink)
questions++;
 
Registriert seit: Jul 2010
Beiträge: 51
@shon10: Was genau finde ich hier? (bez. Parallelogrammen) muss ich mich da bei Demos eintragen?

@toosten: werde ich auf jeden Fall in Erwägung ziehen...MouseOver mit Sprites?

@Alle: Was haltet ihr von der CSS3 Eigenschaft "skrew"? Wie verbreitet ist CSS3 schon? Hab gehört der IE hinkt da ziemlich hinterher, aber den kann man ja aufgrund seiner Marktanteile nicht einfach so vernachlässigen
__________________
Ich spreche Deutsch, Englisch, Französisch, Latein und Russisch... nur mit AS will's nicht so ganz hinhauen.
peat-ar ist offline   Mit Zitat antworten
Alt 02-09-2010, 17:56   #5 (permalink)
in the boondocks
 
Benutzerbild von shin10
 
Registriert seit: Feb 2006
Ort: Augsburg
Beiträge: 4.421
ne, nix eintragen.

da findest du mein letztes css-dropdown-menü in aktion. das ist alles. wenn du dir mal den quellcode und die css dateien dazu ansiehst, kannst du dir in etwa vorstellen, was auf dich zukommt. wobei du dann jeden unterpunkt noch so anpassen musst, dass er auch seitlich verschoben wird.

css-dateien:
menu.css
menu_ie6.css

vorteil an der sache ist, dass es bis ie6 abwärtskompatibel ist. nachteil, dass der bereich des schattens noch zum menü dazugehört und es dort noch nicht wieder zuklappt. von den ganzen einzelfällen mal abgesehen.


btw: skew nicht skrew
__________________

flintfabrik.de
shin10 ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
css, dom, html, navigation

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 sind an
Pingbacks sind an
Refbacks sind an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Button Navigation - ZoomIn / ZoomOut Navigation mit Unschärfe-Filter Corettino ActionScript 3 4 15-11-2009 11:19
Help me! ::Navigation:: Ramones Flash 8 0 02-03-2007 09:13
Tree-Navigation: Navigation und Inhalt in einer XML-Datei? theimann Flex allgemein 0 10-11-2006 09:09
navigation in moviclip in navigation cashisha Flash Einsteiger 5 20-02-2006 21:55
Rollout bei Navigation bzw. verlassen der Navigation Snoogle Flash MX 1 15-09-2003 10:20


Alle Zeitangaben in WEZ +1. Es ist jetzt 13:01 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele