Drop Down Menü

Saphira

Hallo,

ich bin neu hier. Habe mich angemeldet, weil ich langsam verzweifle Ich lese nun schon seit Wochen alles, was ich in Google finden kann und komme trotzdem nicht weiter. So bin ich im Übrigen auch auf dieses Forum gekommen.

Das Problem ist, dass ich für meine Homepage zur besseren Übersicht ein Drop Down Menü basteln möchte (ihr wisst schon, wenn man über die Überschrift fährt, öffnet sich eine Latte mit Links ). Das Problem: Tja, wenn ich das wüsste. Ich habe nun schon auf einigen Seiten beispiele mit Codes gefunden, doch nie hat es funktioniert. Mit Sicherheit mache ich irgend etwas falsch und deshalb möchte ich mich jetzt persönlich an euch wenden.

Könnte mir vielleicht irgend jemand nen Code geben, der tatsächlich bei mir funktionieren könnte? Vielleicht sogar speziell etwas zurecht basteln für mich? Ich weiß langsam echt nicht mehr weiter, zum Verzweifeln!

Danke im Voraus, ich hoffe auf zahlreiche Antworten.

Liebe Grüße
Saphira

The User

Das Problem ist immer: Sie laufn entweder nicht im IE oder brauchen JS und machen eventuell sogar das CSS dadurch nicht valide.
Paar Vorschläge:
http://drweb.de da sind ein paar Versionen, wenn du suchst

Konkrete Beispiele, wo du Code kopieren kannst:
http://devil-driver.de (ziemlich gut, unser Co-Admin)
http://eisenholz.bplaced.net (nur CSS, relativ einfach, von mir)
http://goerres.de (Seite meiner Schule, ganz wenig JavaScript und dadurch nicht valides CSS, ansonsten aber recht gut)

Saphira

Hallo,

danke für die schnelle Antwort. Ich habe das ganze mal aus dem devil-driver Link herauskopiert und in ein neues html Dokument gesetzt, zum ausprobieren. Aber bei mir wird das nach wie vor nicht angezeigt. Ich kenne mich damit auch nicht genug aus, um da jetzt irgend etwas dran verändern zu können (bezüglich IE oder was auch immer).

Ach und dummerweise benutze ich den IE Vielleicht auch ein Grund warum bei mir nichts läuft.

Hast du irgendwie einen Tip für mich, wie ich das gebacken kriegen könnte? Eigentlich fast genau wie diese devil-driver Seite möchte ich meine Homepage auch machen, vom Aussehen her. Es will nur nicht klappen *seufz* Was mache ich falsch?

Gruß Patricia

Dodo

Also ich würde es so machen:

---------------------------------------------------------------

Wenn du mit CSS umgehen kannst:

1) Von hausaus das Menü verstecken per CSS per display:none;

2) Am Schwierigsten: Menü richtig darunter positionieren

3) Beim Öffner-Link und beim Zu Öffnenden Bereich ein :hover, der es sichtbar macht mit display:block;

4) Kleine Einstellungen machen, damit wirklich link an link grenzt und es zu keinen Fehlern kommt.

The User

Bei dem Driver da steht so etwa im Quellcode <link rel..., da ist eine url, die Seite öffnen, den Code kopieren und dann in deiner Datei im head:

Code

<style type="text/css">
//Der Code von der Seite, die mit <link> angegeben ist
</style>

Viele liebe Grüße
The User

Saphira

Hallo,

Dodo: Nein, ich habe keine Ahnung Deswegen bin ich doch so überfordert.

The User:

da sind mehrere dieser Codes:

Zitat

<link rel="stylesheet" href="style.css" type="text/css" />
<link href="driver.css" type="text/css" rel="stylesheet" media="all" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="ie.css" />

Ich habe mal style.css und ie.css beide reinkopiert, aber funktionieren tut da immer noch nichts (abgesehen davon dass sich jetzt der Style eben angepasst hat).

/Edit: Hatte dieses <!--[if lte IE 6]> vergessen, habs jetzt rein gemacht und jetzt wird garnix mehr angezeigt

Verzweifelte Grüße
Patricia

The User

http://devil-driver.de/driver.css
Und das vom if IE musst du auch übernehmen (inklusive dem if)

Offtopic:
Irland ist im Autoball-EM-Finale! Hoffentlich fliegt Deutschladn raus.

Saphira

Das konnte ich nicht öffnen. Bei mir wird da angezeigt, dass es die Datei nicht öffnen kann. Bei den beiden anderen hats einwandfrei geklappt

The User

Och, ich seh gerad, das ie ist gar nicht so wichtig, nur für die Transparenzen.
Wichtig ist nur driver.css, ich kann das problemlos öffnen.
Das kann ich von da heraus kopieren, also füg das in den <head> ein:

Code

<style type="text/css">
@charset "utf-8";
/* CSS Document */
/* ================================================================ 
This copyright notice must be untouched at all times.


The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */


.menu { text-align:center; width:770px;margin:0 auto; padding-top:20px;}


/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}


/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}


/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:32px;
}


.menu td {
font-family:courier new;
font-size:0.8em;
font-weight:bold;
}


/* style all the links */
.menu a, .menu :visited {
display:block;
width:72px;
padding:7px 0;
color:#000; 
text-decoration:none;
text-align:center;
background-image:url(buttongr1.png);
font-family:courier new;
font-size:1.2em;
font-weight:bold;
}


/* style the links hover */
.menu :hover{color:#444;
background-image:url(buttonbl1.png);
}


/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:72px;
height:0;
}


/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


.puffer {
background-image:url(buttongr1.png);
float:right;
width:266px;
height:34px;
padding:0px;
margin:0px;
}
</style>

Alles anzeigen

Saphira

Hallo,

super danke Ich habe mir gerade den Firefox herunter geladen, da funktioniert es jetzt.. Nur im IE, da wird zwar mittlerweile das Menü angezeigt, aber öffnen tut sich nichts. Woran kann das jetzt noch liegen?

Ich habe jetzt nur den einen von dir eingestellten Code drin. In beiden Browsern wirds angezeigt, aber im IE öffnet sich das Menü nicht. Wenn ich alle drei Codes rein mache, funktionierts im Fire Fox immernoch einwandfrei und im Internetexplorer wird gar nichts angezeigt.

Erst einmal danke, dass ich überhaupt soweit bin aber wie krieg ich das jetzt noch für den IE hin?

Lg

The User

Ich habe da ehrlich gesagt nicht so viel Ahnung von diesem CSS-Code.
Schau vielleicht auch mal da, wo es herkommt. (http://www.cssplay.co.uk/menus/basic_dd.html)
Aber eigentlich macht IE generell Problem und es würde mich wundern, wenn es da ohne JS klappt, aber irgendwie sind auf Drivers Seite keine JS-Sachen.

Saphira

/Edit: Ich habs geschafft geschafft geschafft Bedanke mich für eure Hilfe!! Vielen Dank!

Wenns erneut Fragen gibt weiß ich ja, an wen ich mich wenden kann

Gruß Patricia

driver

oh, grad erst gesehen dass ich ja passiv mit meiner hp mitgeholfen
habe *hehe * - naja, warum nicht. übrigens des "puffer"-teil wird
nicht zwingend benötigt (is bei mir die leere fläche hinten).

auch wenns zu spät is, hier wär noch ne ganz gute css-dropdown-version
die ich auf meiner alten homepage verwendet hab:
http://barrierefrei.e-workers.de/workshops/tricks/menues.php

Saphira

Oh, dann muss ich meinen ganz besonders großen Dank wohl an dich richten Also auch dir vielen Dank. Ich werd mal sehen wie sich das ganze so editieren lässt, wie ich es gerne hätte.

Ich denke es kommen noch einige Fragen auf euch zu

Gruß Patricia

Saphira

Hallo,

ich nochmal.. Das ganze in dieser Tabellenform zu machen wie auf dem Link war eigentlich mein Ziel (http://barrierefrei.e-workers.de/workshops/tric…te/dropdown.txt). Ich habe deshalb zum testen das ganze doch noch einmal ausprobiert und es hat tatsächlich geklappt. Das Problem: Es funktioniert doch tatsächlich mit dem IE Nur mit Fire Fox nicht mehr..

Was mach ich falsch? *g*

The User

Vielleicht nicht alle CSS-Dateien eingebunden?

Saphira

Hm keine Ahnung. Ich hab den kompletten Code von der verlinkten Seite übernommen...

Tags