zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdown Menü mit Hintergrundbild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.05.2011, 18:57
a3e a3e ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2011
Beiträge: 25
a3e zeigte ein beschämendes Verhalten in der Vergangenheit
Standard Dropdown Menü mit Hintergrundbild

Hallo Leute,

ich habe zwar ein kleines bisschen schon mit CSS zu tun, aber das hab ich noch nie gemacht und alles was ich dazu finden konnte war entweder mit JavaScript oder mit top, bottom, left und right grafiken die angebunden gelöst und jetzt stellt sich für mich die Frage, geht das evtl gar nicht ?

So viel zur Vorgeschichte und jetzt im Klartext:

ich möchte ein Dopdown Menü machen für meine seite und zwar soll eine kleine Kugel unten in der mitte auf der seite sein und wenn man mit der maus drauf geht, soll nach oben eine große halbtransparente Kugel erscheinen und da drinnen drei vier links (untereinander aufgelistet).

Alles was ich bisher in bezug auf Dropdown Navi / Menü ect. gefunden habe ist entweder ganz ohne Hintergrundgrafik oder wie schon oben erwähnt entweder mit js oder mit diesen seitenrändern.

Gibt es keine Möglichkeit das ganze mit einer einzigen Grafik als Hintergrundbild und dann einfach die Links?


Ich wäre echt froh und dankbar wenn ihr mir da einen Tipp geben könntet
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.05.2011, 21:27
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Das geht.








Nimm Dir mal den Code eines simplen CSS-Dropdownmenüs (google) vor, die "Mechanik" ist da ganz gut sichtbar. Du hast ein "verstecktes" Element das erst sichtbar ist/wird, wenn jemand mit der Maus über das Elternelement drüber geht oder durchtabbt. (Es gibt noch andere Möglichkeiten... aber das soll erstmal reichen)

In diesem Element, z.b. einem Div, ist dein "größeres" Hintergrundbild drin und in das div kommt die Liste nach deinen Wünschen. Wenn das Ding nach oben gehen soll, ist es dann eigentlich ein Dropup-Menü. Damit musst Du den sichtbar werdenden Teil "nach oben" schieben, das geht mit negativen Werten für die "top" Positionierung.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.05.2011, 06:35
a3e a3e ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2011
Beiträge: 25
a3e zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Danke für die Antwort das es möglich sei - das ermutigt mich weiter zu machen und zu tüfteln, aber das was google betrifft, ich habe schon gesucht ohne ende (stundenlang) und wie ich schon erwähnt habe, waren das alles entweder komplett ohne Grafik (also nur Text-Links), mit der border(left,right,top,bottom) Technik oder mit JS.

- Textbasiert kann ich nicht nutzen, weil es zu der fast schon komplett fertiggestalteten Seite nicht passt - würde nicht harmonieren

- Border-Technik kann ich nicht nutzen, da es um so vieles auffwändiger wäre, da die Grafik Transparenz- und Verlaufsflächen hat

- JavaScript will ich nicht nutzen, da ich nicht so arrogant sein will zu sagen, dass alle die js aktiviert haben bzw. die Möglichkeit dazu haben (man denke nur an Firmen wo standardmäßig js aus is), können oder dürfen die Seite vollständig betrachten / besuchen und alle anderen sollen hin wo der Pfeffer wächst - das wäre weder sozial noch sinnig


Ich hab schon einen einigermaßen annähernd in die Richtung funktionierenden code getüfftelt, aber ich kriegs nicht hin, dass die Links die erst mit diesem Art Hover-Effekt eingeblendeten Fläche erst erscheinen. Entweder sind sie IMMER da oder samt der Hover-Effekt-Fläche NICHT da - ich verzweifle langsam.

Geändert von a3e (07.05.2011 um 06:38 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 12.05.2011, 23:12
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ok, dann brauchts CODE und zwar lauffähigen.

Idealerweise ein Testcase mit DEINEM Stand. Darauf kann man aufbauen.
So aus dem hohlen Bauch heraus wird es sonst schwierig.
(Freehoster gibt es genug für eine einzelne Testseite)
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 12.05.2011, 23:22
a3e a3e ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2011
Beiträge: 25
a3e zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Nun ja, wie soll ich es sagen?

Ich hab sehr viel herumgetüftelt und erst gestern die Sache gelöst - es funzt - aber hab ich daraus was lernen können? NEIN, da die Lösung nicht das geringste mit Logik zu tun hat - ich musste mit unnötigen floats, margins, paddings, z-index und und und arbeiten (also die ganze Palette was CSS bietet für ein Dopdown hergenommen).

Naja, es bleibt mir nur das so zu akzeptieren - wer weiss, vielleicht wird diese Angelegenheit ja mit HTML5 und den folgenden CSS Versionen besser (vorallem logisch nachvollziehbarer und evtl. endlich mit Farbverläufen und ja mit runden ecken )


Somit ist mein Anliegen geklärt und Thread kann geclosed werden
Mit Zitat antworten
  #6 (permalink)  
Alt 12.05.2011, 23:24
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Würde mich trotzdem interessieren, deine Lösung
CSS ist nicht einfach obwohl ich mal das Gegenteil behauptet habe...
aber das überlasse ich Dir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 12.05.2011, 23:32
a3e a3e ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.05.2011
Beiträge: 25
a3e zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Kein Problem, ich kann dir ja das drumherum weglassen und den rest samt css in eine html reinsetzen und dann den code hier reinsetzen - aber das mache ich morgen, heute kann ich kein code mehr sehen - sonst schmeiss ich mein monitor vom balkon runter!

Ich bin so froh wenn ich endlich bald meine SolidStateDisc und 8GB RAM - dann ist das auch erträglicher.

Ich poste es morgen dann mal rein ok
Mit Zitat antworten
Antwort

Stichwörter
css, dropdown, nav, navi, navigation, navigationsmenü

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
CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist Sp33dy G0nz4l3s CSS 2 12.06.2010 17:38
Darstellungsproblem flohpapa CSS 3 16.12.2009 08:55
DropDown Menü verschwindet andre-ne CSS 2 18.11.2009 10:44
dropdown menü einbauen PatrickM CSS 6 07.01.2008 16:13
Mysteriöses in CSS Dropdown Menü ph!L CSS 3 21.07.2006 12:31


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