CSS und DIV zum erstellen von Grafischen Menues
M@rk
- css
Hallo Cracks,
ich habe gestern ein Nav-menue mit css und DIV's aufgebaut, das wunderbar funktioniert. Jetzt wollte ich noch bei anklicken der Buttons ein Submenue anlegen, indem ich per css eine neue class
angelegt habe... aber igendwie funktioniert das ganze nicht so wie ich will und ich kann so auch keine Fehler feststellen. Es ist so, daß der mouse-over Effekt bei jedem besuchten Link verschwindet...
Zu sehen unter http://www.badhotelwernau.de
Jetzt noch ne weitere Frage, die von den cracks auch wahrscheinlich ganz schnell beantwortet werden kann. Wie kann ich hier ebenfalls erreichen, daß wenn ich mit dem Mauszeiger drauf gehe diese kleine Fenster aufgeht (ich denke es heisst alt-Attribut)
Ich hoffe mich richtig ausgedrückt zu haben, sodaß es verstanden wird... Da ich auch erst ein Newbee bin verzeiht mir bitte wenn ich mich vielleicht auch nicht korrekt ausgedrückt habe...
Hier der Quelltext...
<div class="menue"><a href="index.htm">Startseite</a></div>
<div class="menue"><a href="hotel.htm">Hotel</a></div>
<div class="submenue"><a href="Ausstattung.htm">Ausstattung</a></div>
<div class="submenue"><a href="Zimmer.htm">Zimmer</a></div>
<div class="menue"><a href="konferenzen.htm">Konferenzen</a></div>
<div class="menue"><a href="urlaub.htm">Urlaub</a></div>
<div class="menue"><a href="restaurant.htm">Restaurant</a></div>
<div class="menue"><a href="karierre.htm">Jobs + Karierre</a></div>
<div class="menue"><a href="service.htm">Service</a></div>
<div class="menue"><a href="kontakt">Kontakt</a></div></td>
Style.css, externe css Datei
div.menue { background: url(pics/button.jpg);
width:130px; height:22px; margin:0px;
}
div.menue a { padding-left:22px; display:block; width:100%;
}
div.menue a:link, div.menue a:visited {
padding-top: 4px;
background:transparent;
FONT-SIZE: 10px;
WIDTH:100%;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #FFFFFF;
text-decoration:none
}
div.menue a:hover { color:#FFFFFF;
background: url(pics/button_over.jpg); text-decoration:none;
width:130px; height:22px; margin:0px;
}
div.menue a:active { color:#FFFFFF; font-weight:bold;
background:transparent; text-decoration:none;
}
div.submenue { background:transparent;
width:130px; height:22px; margin:0px;
}
div.submenue a { padding-left:22px; display:block; width:100%;
}
div.submenue a:link, div.menue a:visited {
padding-top: 4px;
background:transparent;
FONT-SIZE: 10px;
WIDTH:100%;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #FFFFFF;
text-decoration:none
}
div.submenue a:hover { color:#620020;
background: transparent; text-decoration:none;
width:130px; height:22px; margin:0px;
}
div.submenue a:active { color:#620020; font-weight:bold;
background:transparent; text-decoration:none;
}
hi,
Zu sehen unter http://www.badhotelwernau.de
falls du noch nicht bei deinen beiträgen in den letzten tagen darauf hingewiesen wurdest, lass dir nochmals einen blick in die </faq/> empfohlen sein, um nachzulesen, wie du hier einen URL verlinkst.
Wie kann ich hier ebenfalls erreichen, daß wenn ich mit dem Mauszeiger drauf gehe diese kleine Fenster aufgeht (ich denke es heisst alt-Attribut)
nein, dafür ist das title-attribut gedacht. dies kannst du in so gut wie jedem html-tag einsetzen.
gruss,
wahsaga
Hallo wahsaga,
vielen Dank für Deine schnelle Antwort.
Mit dem verlinken werd ich mir mal anschauen, sorry...
Zu sehen unter http://www.badhotelwernau.de
falls du noch nicht bei deinen beiträgen in den letzten tagen darauf hingewiesen wurdest, lass dir nochmals einen blick in die </faq/> empfohlen sein, um nachzulesen, wie du hier einen URL verlinkst.
Das mit dem title geht auch, ich dachte nur, daß es das alt-Attribut war... kommt Zeit, kommt Wissen...
Wie kann ich hier ebenfalls erreichen, daß wenn ich mit dem Mauszeiger drauf gehe diese kleine Fenster aufgeht (ich denke es heisst alt-Attribut)
nein, dafür ist das title-attribut gedacht. dies kannst du in so gut wie jedem html-tag einsetzen.
aber hast du mal das Problem mit dem Menue gesehen, das ich hab?
Gruß M@rk
hi,
Das mit dem title geht auch, ich dachte nur, daß es das alt-Attribut war... kommt Zeit, kommt Wissen...
das denken viele - weil der internet explorer alt teilweise genauso interpretiert wie title - es ist aber trotzdem nicht korrekt.
aber hast du mal das Problem mit dem Menue gesehen, das ich hab?
nein, da bin ich durch deine formulierung und dein beispiel leider nicht durchgestiegen, was du überhaupt meinst.
gruss,
wahsaga
Hi,
Das mit dem title geht auch, ich dachte nur, daß es das alt-Attribut war... kommt Zeit, kommt Wissen...
das denken viele - weil der internet explorer alt teilweise genauso interpretiert wie title - es ist aber trotzdem nicht korrekt.
Stimmt - und in diesem Fall bingt das alt-Attribut ohnehin (auch im IE) nichts, da es sich um ein Hintergrundbild handelt.
Nötig ist aber auch title hier eigentlich nicht, es sei denn, man möchte hiermit den Linktext noch genauer beschreiben.
aber hast du mal das Problem mit dem Menue gesehen, das ich hab?
nein, da bin ich durch deine formulierung und dein beispiel leider nicht durchgestiegen, was du überhaupt meinst.
Hab' ich Mark zwar eben schon auf seine (dringende!) email beantwortet, aber falls es noch jemanden interessiert und vielleicht für's Archiv:
Der Code zum hinterlegen von grafischen (Leer-)Buttons stammt von http://www.1ngo.de/web/buttons.html und Mark braucht für seine auch schon mal vorgestellte Seite zusätzlich Submenüs ohne hinterlegte Grafiken.
In der hierzu neu angelegten Klasse hat er dabei nur leider in der Zeile
div.submenue a:link, div.menue a:visited { ... }
übersehen, daß hier der Klassenname für zwei Zustände steht und geändert werden muß.
freundliche Grüße (aus Düsseldorf;-)
Ingo
Hallo Ingo,
hatte es gefunden..., danke daß du auch noch geantwortet hast, jetzt gehts...
Vielen Dank an Alle und Grüße von der Schwäbischen Alb
M@rk
Hallo,
Das mit dem title geht auch, ich dachte nur, daß es das alt-Attribut war... kommt Zeit, kommt Wissen...
Das kannst du dir unter http://jendryschik.de/wsdev/einfuehrung/xhtml/bodyelemente.html#img holen, wenn du magst.
Gruß,
MI