Dropline Menüs über mehrere Divitis

[aereo]

Hallo Liebe Community.

Ich habe eine Frage, da ich gerade dabei bin meine Webseite neu aufzusetzen und ein neues, übersichtlicheres Design zu schreiben kommt mir ein Frage auf.
Ich möchte ein Dropline-Menü erstellen, wobei die Menüpunkte, über der man Fährt (hover) im Divitis (Div) #menu liegen, die Dropline aber im Divitis #dropline liegen soll.
Zusätzlich möchte ich mein Konzept anhängen, um gegebenenfalls Fragen damit zu beantworten.

P.S.: Falls es hier Freizeitpark-Fans gibt, die Artikel da oben nicht ernst nehmen, das sind nur Platzhalter ;)

 

[threadi]

Divitis kenne ich nur als eine Bezeichnung für die krankhafte Verwendung von <div>-Elementen. Falls Du diese nutzt, würde ich dir als allererste davon abraten - insbesondere für Menüs. Menüs baut man mit <ul>-Listen auf und lassen sich dann auch viel leichter Stylen.

So wie Du schreibst, scheinst Du ja schon Quellcode zu haben. Wieso zeigst Du den nicht? Oder besser einen Link zur betreffenden Seite?

 

[aereo]

Ich habe bisher nur die Struktur des oberen Teiles mithilfe der Divitis definiert, natürlich hatte ich vor, die Menüs mit einer <ul> zu bauen, aber ich habe keine wie ich es schaffe, dass die Dropline-Elemente dann im unteren grauen Bereich auftreten.

Aufrufen kann man das ganze über Launchzone.de wo dann selbstverständlich auch der Quellcode vorhanden ist.

 

[threadi]

Nochmal: gewöhne dir die Verwendung von <div>-Elementen ab. Denn genau das nennt man dann "Divitis" - die übermäßige Verwendung von <div>-Elementen.

Ich vermute gerade, dass Du eigentlich nach einem Aufklappmenü suchst. Dazu gibt es viele Vorlagen die dann auch beliebig gestaltet werden können. Schau dir diese hier z.B. mal an:
Horizontales Dropdown-Menü
CSS-Tutorial: Aufklappmenü (Drop-Down Menü) | www.silent-fran.de
Drop-Down-Menü mit CSS und (fast) ohne Javascript

Bau doch erstmal überhaupt ein Menü auf, soweit wie Du es mit der Gestaltung schaffst. Das könnte man sich dann ja anschauen.

 

[aereo]

Mhh ich habe das Gefühl, dass Sie nicht verstehen, was ich meine.

 

[aereo]

Quadratische Navigationselemente mit Pfeil

Hallo Liebe Community,
ich bin es nochmal. Nachdem ich mit meiner letzten Frage leider keine Erfolg hatte probiere ich es heute nocheinmal mit der selben Webseite und der selben Navigation aber mit einer anderen Frage.

Da ich lange kein CSS mehr benutzt habe bin ich etwas eingerostet - wer rastet, der rostet - deswegen komme ich einfach nicht mehr drauf, wie man quadratische Navigationselemente macht. Dabei soll dann noch ein Hover-Effekt eingebaut werden und zwar, wie auf dem Bild zu sehen ist ein Pfeil, der auch auf diesem Navigationspunkt bei active bleibt.

Würde mich sehr über eine hilfreiche Antwort oder sogar über einen CSS-Code freuen.

 

[aereo]

Da es gar nicht mehr um das Dropline-Menü ging fand ich das jetzt ziemlich unnötig, das neu erstellte Thema hierrein zu verschieben, da es ja nicht mehr um das Dropline-Menü geht, sondern um die Navigationselemente, dann bitte vielleicht das Thema anpassen.

 

[threadi]

Es geht in jedem Fall um dein Menü (egal wie Du es nun gestaltest), und du postest auch weiterhin keine Quellcodes anhand deren man dir helfen könnte. :(

 

[aereo]

Es geht mir ja nur darum, dass ich gerne quadratische Navigationslemente hätte. Da ich mittlerweile aber nicht mehr weiß wie diese gehen würde ich mich freuen wenn mir das jemand erklären würde, oder mir sogar den Code schreibt.

        * {            margin: 0;            padding: 0;        }                #logo {            width: 25%;            float: left;            height: 80px;            background-color: #fbfbfb;        }        #menu {            width: 75%;            float: right;            height: 80px;            background-color: #fbfbfb;        }        #branding {            width: 100%;            height: 10px;            background-color: #d4d4d4;            float: left;        }                #padding {            width: 25%;            height: 45px;            float: left;            background-color: #e6e7e7;        }                #dropdown {            width: 75%;            height: 45px;            float: right;            background-color: #e6e7e7;         }

Zur bessern Ansicht: http://offline.launchzone.de/css/style.css

 

[aereo]

Ich brauche dringend Hilfe, da die Webseite in 7 Wochen launchen soll, ich noch das ganze PHP schreiben muss und sich dies nur auf das fertige Template ausrichten lässt. Ich würde mich über eine Antwort wirklich seehr freuen.

 

[threadi]

Damit kann man wenig anfangen zumal der HTML-Code fehlt und auch nicht ersichtlich ist wie Du das Menü überhaupt aufgebaut hast. Wenn Du Menüpunkte nebeneinander haben willst, musst Du die <li>-Elemente (die du hoffentlich verwendest) oder die Links selbst formatieren.

Beispiel:

#menu li {
 display: block;
 float: left;
 height: 120px;
 width: 120px;
}

oder

#menu li { display: inline; }

#menu li a {
 display: block;
 height: 120px;
 width: 120px;
}

 

[aereo]

Ok, vielen Dank die qudratischen Boxen habe ich jetzt da stehen. Jetzt noch die Frage wie zentriere ich die Schrift und wie kann ich dieses pinken Pfeil bei hover und active und in der Mitte machen?

 

[threadi]

Ich brauche dringend Hilfe, da die Webseite in 7 Wochen launchen soll, ich noch das ganze PHP schreiben muss und sich dies nur auf das fertige Template ausrichten lässt. Ich würde mich über eine Antwort wirklich seehr freuen.

Ernsthaft: du lässt dir einen Auftrag geben zu etwas was Du alleine nicht schaffst? Und erwartest hier auch noch kostenfreie Hilfe dabei? Mit dieser Aussage von dir wird sich wohl kaum noch jemand hier dazu bequemen dir zu helfen.

Ok, vielen Dank die qudratischen Boxen habe ich jetzt da stehen. Jetzt noch die Frage wie zentriere ich die Schrift und wie kann ich dieses pinken Pfeil bei hover und active und in der Mitte machen?

Keine Ahnung was und wie du den pinken Pfeil erstellst. Ich rate einfach mal, dass es eine Grafik ist. Und die kann man mit background-position ausrichten.

 

[aereo]

Die Webseite ist für mich, danach habe ich aber kaum noch Zeit daher habe ich mir als festes Ziel den 31. März. Ich hätte notfalls zwar länger Zeit aber ich bin perfektionistisch.

Okay auch hier nocheinmal vielen Dank.

P.S.: Sie sind ja eh der einzige, der mir geholfen hat. Aufträge darf ich ja nichteinmal aufnhemen bin gerade Mal 15 Jahre alt und mache schon seit Jahren gerne Webdesign, in den letzten Jahren hat sich aber wenig Zeit ergeben, dadurch habe ich Leider so gut wie alles vergessen, nur um Ihren ersten Punkt zu erläutern.