nicht angemeldet
horizontales Menue mit Buttons in Tabelle
Hallo,
ich bin am verzweifeln. Seit 2 Wochen suche ich nach einem Skript für eine Navigation, die folgende Bedingungen erfüllt:
1. die Hauptmenuepunkte sind als Bilder dargestellt
2. bei mouseover öffnet sich ein Untermenue
3. Einbindung in eine Tabelle
Alle Skript, die ich gefunden habe, sind entweder mit css als Text dargestellt oder sie sind an absolute Positionen gebunden.
Ich möchte aber, daß sich beim Überfahren der Buttons (gif-Bilder) mit der Maus pulldown-Untermenues öffnen ohne klicken oder so und wenn die Maus weg ist, sind die Untermenues auch weg.
Wer kann mir helfen? Ich wäre echt dankbar.
Sabine
-
Hallo,
Alle Skript, die ich gefunden habe, sind entweder mit css als Text dargestellt oder sie sind an absolute Positionen gebunden.
hast du es schon mal auf http://www.dynamicdrive.com versucht?
chao rrw
-
Danke für den Tipp, habe gerade reingeschaut, aber nichts passendes gefunden. Es ist entweder mit css oder absolute Positionen.
Langsam frage ich mich, ob ich mich nicht in etwas verrannt habe.
Welche horizontale Navigation ist denn sonst so "in"?
-
Hi,
Langsam frage ich mich, ob ich mich nicht in etwas verrannt habe.
vielleicht. und vielleicht ist es Dir ja doch nicht ganz egal, wenn Besucher und Suchmaschinen ausgesperrt werden?
Welche horizontale Navigation ist denn sonst so "in"?
Definiere "in". ;-)
Beliebt ist die Zusammenstellung unter http://css.maxdesign.com.au/listamatic/.
Reine CSS-Menüs, die z.T. auch grafische Elemente beinhalten können.freundliche Grüße
Ingo-
Hallo Ingo,
es ist ja alles gut und schön mit css Programmierung, aber nach einer Diskussion mit mir selbst finde ich, daß eine optische ansprechende Navigation dem "gewöhnlichen User" besser gefällt, als ein optimal für alle Browser programmiertes Menue. Daher bleibe ich wohl auf dem Problem sitzen, wie ich graphische Buttons in eine Tabelle einbaue, die ein horizontales Menue mit pulldown Effekt darstellt, oder?
Ich bin auf Deine Antwort gespannt,
Sabine
-
Hi,
daß eine optische ansprechende Navigation dem "gewöhnlichen User" besser gefällt, als ein optimal für alle Browser programmiertes Menue.
Und wieso meinst Du, daß sich diese beiden Dinge ausschließen bzw. eine optisch ansprechende Navigation nicht allein mit CSS möglich wäre?
freundliche Grüße
Ingo-
Hallo Ingo,
ich arbeite gerne mit graphisch aufbereiteten Buttons. (siehe z.B. www.die-helwigs.de ). Mit css ist das nicht möglich, da kann man nur eine Fläche und die Shcrift ändern. Sonst nichts.
Aber ich denke, ich muß wohl mit css arbeiten, wenn ich bei meiner Menuevorstellung bleibe.
Dabei habe ich aber ein Problem, bei dem Du mir, glaube ich, helfen kannst. Denn auf Deiner HP hast Du Navigation und Text relativ gesetzt. Und ich weiß nicht, wie man Bilder relativ positioniert. Ich kann das nur absolut.
Für Deine Hilfe wäre ich Dir dankbar,
Sabine
-
Hi,
ich arbeite gerne mit graphisch aufbereiteten Buttons. (siehe z.B. www.die-helwigs.de ). Mit css ist das nicht möglich, da kann man nur eine Fläche und die Shcrift ändern. Sonst nichts.
aber sicher doch: bei der "Fläche" kann es sich doch auch um eine Hintergrundgrafik handeln. Das Menü auf dieser Seite ließe sich über CSS mit 2 gemeinsamen Grafiken für alle Buttons über Textlinks realisieren.
ich weiß nicht, wie man Bilder relativ positioniert. Ich kann das nur absolut.
Hierzu benötigst Du keine position-Angabe. Beschäftige Dich mit float.
freundliche Grüße
Ingo-
Gutem Morgen!
ich arbeite gerne mit graphisch aufbereiteten Buttons. (siehe z.B. www.die-helwigs.de ). Mit css ist das nicht möglich, da kann man nur eine Fläche und die Schrift ändern. Sonst nichts.
aber sicher doch: bei der "Fläche" kann es sich doch auch um eine Hintergrundgrafik handeln. Das Menü auf dieser Seite ließe sich über CSS mit 2 gemeinsamen Grafiken für alle Buttons über Textlinks realisieren.Das ist eine gute Idee. Danke!
ich weiß nicht, wie man Bilder relativ positioniert. Ich kann das nur absolut.
Hierzu benötigst Du keine position-Angabe. Beschäftige Dich mit float.Aber float beziegt sich doch nur auf den Textumfluß. Wenn aber Bilder dabei sind, kann ich das doch nicht mehr mit float machen, oder?
Bis demnächst,
Sabine
-
Hi,
Aber float beziegt sich doch nur auf den Textumfluß. Wenn aber Bilder dabei sind, kann ich das doch nicht mehr mit float machen, oder?
Wie kommst Du nur darauf? Du kannst beliebige Elemente mit float ausrichten. Was natürlich zutrifft ist, daß nur inline-Content (wozu aber auch Bilder gehören) ein floatendes Element umfliessen können. Gut zu sehen ist das, wenn man den Elementen Rahmen zuweist, z.B.:
<p style="float:left; width:3em; border:1px dotted black;">x</p>
<p style="border:1px dashed black;">rechts<br />rechts<br />rechts<br />rechts<br /></p>
/------------------------\ |... rechts |
|.x. rechts |
|... rechts |
|rechts |
------------------------/
Der Rahmen des Block-Elements umschließt das floatende Element, der Inline-Inhalt überlagert es jedoch nicht, sondern wird daneben bzw. darunter gesetzt.Spiel mal ein bisschen mit meinem css-Lacout - hier wird zur Positionierung ausschließlich float und margin eingesetzt.
freundliche Grüße
Ingo-
Hallo Ingo,
ich bin dank Dir schon viel weiter, aber noch nicht ganz fertig. Ich habe noch mal eine Frage, besser gesagt ein Problem. Dank % und float habe ich das Menue schon ziemlich angepaßt, jedoch "floated" der background der Untermenuepunkte um den Text. Und ich finde nicht den Fehler in folgendem css-Skript:
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}div.menu {
position: absolute;
width: 85%;
top: 102px;
left: 15%;
z-index: 3;
}
div.menu li {
float: left;
width: 14%;
}div.menu a {
margin: 0 1px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #FFFFFF;
background: #000D66;
}div.menu a:hover {
color: #000000;
width: 14%;
background: #ccc;
border: 0px solid gray;
}#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
display: none;
float: left;
width: 14%;
font-size: 11px;
}
#smenu1 a, #smenu2 a,#smenu3 a, #smenu4 a,#smenu5 a,#smenu6 a {
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #141414;
padding: 5px;
border: 0px solid gray;
}.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #141414;
}
a {text-decoration: none;
color: #141414;
}Kannst DU mir bei der Fehlersuche helfen?
Danke, Sabine
-
Hallo Ingo,
ich habe den Fehler schon gefunden.
Trotzdem danke,
Sabine
-
Hallo,
jetzt brauche ich doch noch mal Hilfe.
Ich habe folgendes css-Skript:
ul, li {
list-style-type: none;
font-family: Arial,Verdana, Helvetica, sans-serif;
vertical-align: center;
margin: 0;
padding: 0;
}div.menu {
position: absolute;
width: 100%;
top: 105px;
left: 15.5%;
z-index: 3;
}
div.menu li {
float: left;
width: 14%;
}div.menu a {
margin: 0 1px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #FFFFFF;
background: #000D66;
}div.menu a:hover {
color: #000000;
background: #ccc;
border: 0px solid gray;
}#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
display: none;
font-size: 10px;
}
#smenu1 a, #smenu2 a,#smenu3 a, #smenu4 a,#smenu5 a,#smenu6 a {
border-top: 0 none;
width: 110px;
}Mein Problem dabei ist nun, daß ich gerne den Block bei menu a gerne zentriert unter dem Menuepunkt haben möchte, bei mir ist er aber immer linksbündig. Wo liegt mein Fehler?
Danke schon jetzt für die Antwort,
Sabine
-
Hi,
ul, li {
list-style-type: none;gilt nur für li
vertical-align: center;
gilt nur für inline Elemente
position: absolute;
width: 100%;
left: 15.5%;das macht 115% !
div.menu li {
float: left;das richtet die Listenpunkte links aus.
div.menu a:hover {
border: 0px solid gray;das dürfte bei korrektem Box-Modell ganz schön zappeln.
Mein Problem dabei ist nun, daß ich gerne den Block bei menu a gerne zentriert unter dem Menuepunkt haben möchte, bei mir ist er aber immer linksbündig. Wo liegt mein Fehler?
dann wirst Du wohl display:inline für die li (und a) nehmen müssen.
freundliche Grüße
Ingo-
Hallo,
das klappt nicht. Mein pulldown-menü ist immernoch linksbündig. Dabei habe ich display: inline; an allen von Dir angegebenen Stellen eingesetzt. Hast Du eine Idee, was ich noch machen könnte?
Ach noch etwas: Sind die graphische Ansätze bei IE und Netscape unterschiedlich? Bei mir verschieben sich nämlich alle Bilder nach unten. Weißt Du, wie man das umgehen kann?
Ich bin auf Deine ANtwort gespannt.
Danke,
Sabine
-
Hi,
das klappt nicht. Mein pulldown-menü ist immernoch linksbündig. Dabei habe ich display: inline; an allen von Dir angegebenen Stellen eingesetzt. Hast Du eine Idee, was ich noch machen könnte?
nicht ohne eine Beispielseite gesehen zu haben - am besten mit ausgeklapptem Menü.
Ach noch etwas: Sind die graphische Ansätze bei IE und Netscape unterschiedlich? Bei mir verschieben sich nämlich alle Bilder nach unten. Weißt Du, wie man das umgehen kann?
Der IE hat diverse Bugs und insb. ein anderes Box-Modell im quirks mode.
freundliche Grüße
Ingo-
Hallo,
okay, jetzt muß ich mich wohl outen als Mitarbeiterin eines MdLs.
Die Seite, die ich bearbeite, findest Du unter
http://www.volkmarklein.de/test .Ich hoffe, Du hast einen IE, denn mit dem Netscape sieht das Menue nicht mehr so prickelnd aus.
Ich finde den pulldown-Effekt gut, besser wäre es, wenn das Menue zentriert wäre.
Mach Dir doch bitte selbst ein Bild und ich freue mich schon auf Deine Hilfe.
Danke,
Sabine
-
Hi,
Ich hoffe, Du hast einen IE
habe ich, aber mit dem könnte ich die aufklappenden Menüpunkte gar nicht sehen, da er im Netz kein Javascript interpretieren darf. Dir ist klar, daß Du so sämtliche CSS-fähige Browser aussperrst, die Javascript deaktiviert haben?
denn mit dem Netscape sieht das Menue nicht mehr so prickelnd aus.
nicht nur das Menü - die Seite ist auch viel zu breit, aber das hatte ich zum Code ja schon angemerkt.
Die aufklappenden Menüpunkte dürfen natürlich nicht inline definiert werden. Und die Kombination von position:absolute und float dürfte auch nicht ganz unproblematisch sein.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-
-
-
-
-
-
-