Shop-Hilfe.com
-


Hinweise


Antwort
 
LinkBack Themen-Optionen Thema durchsuchen Thema bewerten
Alt 22.01.2008, 13:43   #1
TP-Senior
 
Registriert seit: Feb 2005
tipe macht alles soweit korrekt

rundes Layout für Navigationsleiste-Wie?


Hallöchen,
habe mal wieder eine kleine Frage...
Für eine Website möchte ich das runde Logo des Kunden benutzen, um es als Navigationsleiste in die Seite zu integrieren. Im Anhang findet ihr einen ersten enwurf, so oder so ähnlich soll es aussehen..
nun meine Frage:
ich würde gerne die einzelnen Buttons als Rollover-effekt haben, das, was aktiv ist,soll weiss werden, der rest dunkelgrün bleiben..
wie stelle ich aber sowas in einem RUNDEN Layout und mit Dreamweaver her? mit layern gehts ja nicht, die kann man ja nicht drehen, und wenn ich die maps benutze, weiss ich nicht,wie ich da einen Rollovereffekt hinbekommen soll...
Muss ich doch auf Flash zurückgreifen? würde ich gerne vermeiden...oder geht das irgendwie mit Javascript? hmhm.da kenne ich mich nicht wirklich gut aus..hätte einer einen Tipp für mich, wie man sowas angehen könnte?
Vielen Dank schonmal im Voraus!!
Miniaturansicht angehängter Grafiken
rundes-layout-f-r-navigationsleiste-navi.jpg  
tipe ist offline   Mit Zitat antworten


Alt 22.01.2008, 14:00   #2
TP-Veteran
 
Benutzerbild von jayjay
 
Registriert seit: May 2003
Ort: krefeld
jayjay bringt sich richtig einjayjay bringt sich richtig ein
maps und css könnte es tun, dabei müsste wahrscheinlich jeder button eigene klasse haben
__________________
computer tun nur das was man ihnen sagt, meistens
jayjay ist offline   Mit Zitat antworten
Alt 22.01.2008, 14:44   #3
TP-Senior
 
Registriert seit: Feb 2005
tipe macht alles soweit korrekt
hallo Jayjay, erstmal vielen dank für deine schnelle antwort...
also, ich hab mal angefangen, es auszuprobieren, komme aber noch nicht wirklich weiter; als erstes hab ich mal um den button von "home" eine map angelegt, mit der id=home. soweit,sogut,die Map "schneidet" ja sozusagen aus dem hintergrund den anklickbaren button aus.wie baue ich aber nun via CSS den rollovereffekt ein, ohne ein bild zu verwenden und die schrägheit und grösse des buttons einzuhalten? sprich, der css-code muss sich nur auf die Map beziehen..
wenn ich aber zum beispiel <style type="text/css">
#home a {
margin:0px;
}
#home a:hover {
background-color:#ffffff;
}
</style>
einfüge, passiert gar nichts...ausserdem will ich ja auch dass sich die schrift von hell nach dunkel umändert beim "drüberrollen", aber da ich ja in dreamweaver keine schrägen schriften einfügen kann, muss ich also doch ein zweites bild als rollover einfügen???nur wie??
danke!!!
tipe ist offline   Mit Zitat antworten
Alt 22.01.2008, 15:35   #4
TP-Veteran
 
Benutzerbild von jayjay
 
Registriert seit: May 2003
Ort: krefeld
jayjay bringt sich richtig einjayjay bringt sich richtig ein
schrift schräg wird wohl nicht gehen. ich würde versuchen alles über bildchen auszutauschen...
__________________
computer tun nur das was man ihnen sagt, meistens
jayjay ist offline   Mit Zitat antworten
Alt 22.01.2008, 15:54   #5
TP-Senior
 
Registriert seit: Feb 2005
tipe macht alles soweit korrekt
hm..hab ich schon versucht...irgendwie hab ich ein brett vor dem kopf.also, wenn ich das mit bildchen mache, dnan sind die doch auch rechteckig, und nicht in der form der imagemap....dann könnte ich es ja auch mit lauter ebenen machen, die sich aber hoffnungslos überlagern würden..hmmm..könntest du mir eventuell ein beispiel senden? ich kriegs einfach nicht hin...ansonsten wohl auf sowas zurückgreifen?
http://www.deutschland-webcam.de/webcams/
tipe ist offline   Mit Zitat antworten
Alt 22.01.2008, 16:28   #6
TP-Veteran
 
Benutzerbild von jayjay
 
Registriert seit: May 2003
Ort: krefeld
jayjay bringt sich richtig einjayjay bringt sich richtig ein
genau, zb über maps und dann verhalten.
wo baust du deine grafik? viele programme wie fw oder imageready können sowas schon mal so grob exportieren, inkl aller images und code. dann bisschen hand anlegen und gut ist.
__________________
computer tun nur das was man ihnen sagt, meistens
jayjay ist offline   Mit Zitat antworten
Alt 22.01.2008, 16:38   #7
TP-Senior
 
Registriert seit: Feb 2005
tipe macht alles soweit korrekt
hm, ja, dann versuch ich das mal, werde dafür wohl fireworks benutzen...dachte, es ginge eben über die maps und css direkt in dreamweaver!!...
tipe ist offline   Mit Zitat antworten
Alt 22.01.2008, 16:47   #8
TP-Veteran
 
Benutzerbild von jayjay
 
Registriert seit: May 2003
Ort: krefeld
jayjay bringt sich richtig einjayjay bringt sich richtig ein
kann man maps über css steuern?
habs nie gebraucht, aber interessant ist das. gibts nen link zur entwicklungsseite?
__________________
computer tun nur das was man ihnen sagt, meistens
jayjay ist offline   Mit Zitat antworten
Alt 22.01.2008, 16:55   #9
TP-Senior
 
Registriert seit: Feb 2005
tipe macht alles soweit korrekt
maps und css könnte es tun, dabei müsste wahrscheinlich jeder button eigene klasse haben

hmm...ich hatte das durch deine erste antwort so verstanden und ausprobiert, es aber ja nicht hinbekommen....!!
d.h. dann muss ich wohl auf diese Fireworks-Geschichte zurückgreifen...oder doch besser Flash?
einen link gibt es noch nicht, da ich erst in der layoutphase bin, mir aber schon gedanken um den programmierungsumfang machen will
ps: bin auch kein wirklicher freak in sachen css, ich hab gehofft dass diese idee mit den maps und css schonmal jemand ausprobeirt hat und es klappt!? ich weiss einfach nicht wirklich wie ich an die sache herangehen soll und bin auch zu keinem ergebnis gekommen...mal sehen.
tipe ist offline   Mit Zitat antworten
Alt 22.01.2008, 16:58   #10
TP-Veteran
 
Benutzerbild von jayjay
 
Registriert seit: May 2003
Ort: krefeld
jayjay bringt sich richtig einjayjay bringt sich richtig ein
dann zeig code, wie weit bist du gekommen?
__________________
computer tun nur das was man ihnen sagt, meistens
jayjay ist offline   Mit Zitat antworten
Alt 22.01.2008, 17:09   #11
TP-Senior
 
Registriert seit: Feb 2005
tipe macht alles soweit korrekt
siehe oben: eine variante war diese:
eine map um den button "home" mit namen "home" und im head bereich:
<style type="text/css">
#home a {
margin:0px;
}
#home a:hover {
background-image:img.src='bild2.jpg'
}
</style>

die zweite variante war es , der map einen mouse-over befehl zuzuweisen, mit dem 'bild2.jpg'
aber auch das hat nicht funktioniert.
ausserdem wäre das bild dann ja wie gesgt wieder rechteckig und viel zu gross und würde sich nicht an die form und grösse der map anpassen.....
tipe ist offline   Mit Zitat antworten
Alt 23.01.2008, 08:12   #12
TP-Veteran
 
Benutzerbild von jayjay
 
Registriert seit: May 2003
Ort: krefeld
jayjay bringt sich richtig einjayjay bringt sich richtig ein
hab fw mal ausprobiert, hier das ergebnis, unbearbeitet
Angehängte Dateien
Dateityp: zip rund.zip (63,3 KB, 12x aufgerufen)
__________________
computer tun nur das was man ihnen sagt, meistens
jayjay ist offline   Mit Zitat antworten
Alt 23.01.2008, 11:41   #13
TP-Senior
 
Benutzerbild von th2409
 
Registriert seit: Feb 2007
th2409 ist auf einem guten Weg
Ich würde empfehlen, das mit Fireworks zu machen. Die Unterstützung ist wirklich optimal. Du kannst 2 Ebenen erzeugen - 1 originale und eine zweite, in welcher der "hover"-Zustand steckt. Dann nimmst Du das Polygon-Segmentierwerkzeug von FW und schneidest einzelne Polygone zurecht. Anschließende bestimmst Du das Verhalten jedes einzelnen Polygons (was nun die Schaltfläche ist) mit "Bild austauschen von Frame 2", und schon hast Du eine prima funktionierende Lösung. Per Export in HTML und Bilder schaffst Du eine in DW einsetzbare Lösung.
Ehrlicherweise müsste man gestehen, dass der geschaffene Quelltext heute nicht mehr als das Wahre angesehen wird - denn er kreiert eine Tabelle!. Aber mir ist für so stark strukturierte Bilder auch noch nichts anderes eingefallen. Bastelei per CSS wäre ein gewaltiger Aufwand, da kommen mehrere Dutzend Klassen zusammen - und das alles bei manueller Rechnerei/ Positioniererei, die einem FW so abnimmt.
Ich habe so mal ein Flugzeugcockpit gemacht und durfte anschließend 4000(!) Dateien uploaden...

Ich habe mal in FW eine Datei gemacht, die 2 Schaltflächen in der angedachten Form hat und wie geplant funktionert. Du kannst die Datei in FW öffnen und von dort aus im Browser anzeigen lassen, dann siehst Du es.
Miniaturansicht angehängter Grafiken
rundes-layout-f-r-navigationsleiste-1.png  
__________________
Thomas
th2409 ist offline   Mit Zitat antworten
Alt 23.01.2008, 11:44   #14
TP-Senior
 
Benutzerbild von th2409
 
Registriert seit: Feb 2007
th2409 ist auf einem guten Weg
Ja, der Anhang ... wurde leider gleich als Grafik durchgedrückt. Hier nochmal.
Angehängte Dateien
Dateityp: zip buttons.zip (82,4 KB, 9x aufgerufen)
__________________
Thomas
th2409 ist offline   Mit Zitat antworten
Alt 23.01.2008, 11:51   #15
TP-Veteran
 
Benutzerbild von jayjay
 
Registriert seit: May 2003
Ort: krefeld
jayjay bringt sich richtig einjayjay bringt sich richtig ein
also wie ich schon mal grob angelegt habe
__________________
computer tun nur das was man ihnen sagt, meistens
jayjay ist offline   Mit Zitat antworten
Antwort

  Aktuelles Thema
  TP Hilfe Forum > Web-Editoren & Coding > Dreamweaver
rundes Layout für Navigationsleiste-Wie? rundes Layout für Navigationsleiste-Wie?
« Tabellengröße ändern aber wie? | Mailadresse als Link ausgeben »

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine 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 an
Gehe zu


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:43 Uhr.

Powered by: vBulletin Version 3.7 (Deutsch)
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd. / Search Engine Friendly URLs by vBSEO 3.2.0 ©2008, Crawlability, Inc.
Traum-Projekt.com | Suchen | Archiv | Impressum | Kontakt | | | Nach oben |



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67