CSS - Menü, Positionierungsproblem

[peschmae]

Ich bin gerade dran ein Menü mit CSS zu basteln. Geht fast alles recht gut ausser:

Beim hoovern über dem Menü wird beim Anzeigen des Untermenüs jeweils der Menüpunkt so breit wie das Untermenü breit ist. (Untermenü bisher nur bei "Scripts")

Die unter-untermenüs Machen ein Loch in das Untermenü. Kann mir jemand da helfen das zu beheben?
(Unteruntermenü ist der zweitunterste Menüunkt bei "Scripts")

Das Menü funktioniert soweit mit Mozilla und Konqueror.

Die Page (http://home.pages.at/peschmae/menu/index.html) - Das Stylesheet (http://home.pages.at/peschmae/menu/style.css)

MfG Peschmä

[peschmae]

Hab noch n bisschen gebastelt - aber irgendwie krieg ichs nicht hin :o

Die Probleme jetzt:
- Die Einträge im Popup-Menü bei "Script" sind nicht alle gleich breit (sollen so breit sein wie das breiteste Element (hier das letzte))
- Das Untermenü beginnt neben Menüpunkt 4, sollte aber neben Menüpunkt 3 (und nicht unterhalb) stehen, also eine Zeile weiter oben

MfG Peschmä

[peschmae]

Original geschrieben von Claudine
Is zwar schon ne Weile her dass ich ne Seite geschrieben habe
aber ich kann ja mal meine Erdbeeren dazu zu geben.

Danke für die Hinweise :)



1.) Unabhängig davon, solltest Du die Seite mit mehreren Browsern,
während der Entwicklung dir anschauen.


Habe ich - bisher zwar nur Gecko/Mozilla und Konqueror, aber Opera kommt auch noch dazu (hab ich noch nicht installiert ;)



2.) Ich würde die Schriftfarbe einen Tick heller setzten, das liest
sich leichter.

Die Schriftfarbe war eigentlich schwarz, nicht dieses Blau (oder was auch immer) - das ist nur weil ichs auskommentiert hab.



Muß es ein XML Header sein?
<?xml version="1.0" encoding="UTF-8"?>

Wieso nicht? Schliesslich ist das XHTML und damit XML. Oder spricht was dagegen?



Würde auch die Zeilenumbrüche überall identisch setzten.
(Browservorsicht ist besser als Browsernachsicht.;-))
...


Mach ich :)
Aber macht das wirklich einen Unterschied? Ein Zeilenumbruch ist ja ein Whitspace und somit herzlich gleich.



Kommentare in HTML sehen doch ein wenig anders aus.
! margin-left: 0;
Kenn ich nich, kann aber sein das irgendeine Browserversion
irgeneines Hersteller das ünterstützt.


k.A. - das ist ja auch kein HTML sondern ein CSS-File. Die HTML-Kommentare funktionieren da so nicht - und das ! am Zeilenanfang hab ich mir mal irgendwo abgeschrieben.
Auf jeden Fall geht es mit Mozilla und Konqueror (1.6 und 3.2.2) - von dem her ists vermutlich Standard oder zumindest weit verbreitet.
Die Kommentare hab ich eh nur um rauszufinden, an was genau das hängt dasses nicht so tut wie ich will.



ul#menu > li {
kenne aber keinen. Ist ja keine BAsh.


Das verste ich nicht. Sprichst du da immer noch von den Kommentaren? Das ist keiner, das # ist der Trenner für die ID-Angabe - also alle uls mit id="menu".



Farben zu Sicherheit immer vollständig angeben
#fff
also #ffffff oder in diesem Fall auch white.


k.A. wies im Standard steht - aber das ist eigentlich auch weit verbreitet - halt ne Farbangabe auf 16er Basis und nicht auf 255er. Naja, mal gucken was der Validator und die Browser dazu sagen...



glaube eine Angabe reicht.
padding: 2px 10px;


Je nach dem - nach da (http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap08.html#heading-8.4%A0)


Ist nur ein einziger Wert angegeben, gilt er für alle Seiten. Sind zwei Werte angegeben, werden die untere und die obere Polsterung auf den ersten Wert, die rechte und die linke Polsterung auf den zweiten Wert gesetzt.

gilt Wert 2px für oben/unten und 10px für links/rechts



melvogel is doch unser CSS Spezialist. Frag den doch mal.
Dann bekommt deine Seite den letzten Pfiff.

http://www.mrunix.de/forums/showthread.php?s=&threadid=34893

Ok. Der soll bitte mal vorbeigucken :)

Ansonsten bastle ich halt noch ein bisschen (auch wenns doch mal das machen dürfte, was ich will :rolleyes:

MfG Peschmä

[bischi]

Beim hoovern über dem Menü wird beim Anzeigen des Untermenüs jeweils der Menüpunkt so breit wie das Untermenü breit ist. (Untermenü bisher nur bei "Scripts")
Tönt verdächtig nach Tabelle... Andere Variante: Schau dir mal die Nav auf meiner HP an, da sind alle schön gleich breit...


Die unter-untermenüs Machen ein Loch in das Untermenü. Kann mir jemand da helfen das zu beheben?
(Unteruntermenü ist der zweitunterste Menüunkt bei "Scripts")

Wie wärs mit nem Screenshot? Ich seh ein "Loch" zwischen den Menü-Einträgen (da die Untermenüeinträge zu breit sind) und sonst eigentlich keines...

MfG Bischi

Edit: Die Menüs auf meiner HP funzen im IE nicht so richtig....

[peschmae]

Ich hab ein paar Sachen geändert seit dem Originalpost. Die Probleme sind:

- Die Menüeinträge "Script1, Script2, Script3, Script4 - blablablabla" (der letzte ist lang) sollten alle gleich breit mit der Hintergrundfarbe hinterlegt sein (sonst siehts doof aus)

- Das Untermenü aus asd und aöjdfaöd ist das Untermenü zum Menüpunkt Script3 - es erscheint aber neben dem Menüpunkt "Script4 - blablablabla" - also zu weit unten

MfG Peschmä

[peschmae]

Das ist noch egal - die Stylesheet-Sachen diesbezüglich hab ich abgeschaltet. Deshalb gelten die Default-Einstellungen des Browsers für die Farben (ausser die Hintergrundfarben) der Links.

MfG Peschmä

[Pingu]

Original geschrieben von peschmae
Habe ich - bisher zwar nur Gecko/Mozilla und Konqueror, aber Opera kommt auch noch dazu (hab ich noch nicht installiert ;)
Ich sage nur: Im Safari (Mac OS 10.2.8) sehe ich kein Menü welches sich aufklappt. Es ist alles schon "offen".


Original geschrieben von peschmae
Mach ich :)
Aber macht das wirklich einen Unterschied? Ein Zeilenumbruch ist ja ein Whitspace und somit herzlich gleich.
Für den Browser nicht, aber für uns - damit wir es besser lesen können.


Original geschrieben von peschmae
k.A. - das ist ja auch kein HTML sondern ein CSS-File. Die HTML-Kommentare funktionieren da so nicht - und das ! am Zeilenanfang hab ich mir mal irgendwo abgeschrieben.
Auf jeden Fall geht es mit Mozilla und Konqueror (1.6 und 3.2.2) - von dem her ists vermutlich Standard oder zumindest weit verbreitet.
Die Kommentare hab ich eh nur um rauszufinden, an was genau das hängt dasses nicht so tut wie ich will.
Es gibt einen Standard, siehe SelfHTML: http://selfhtml.teamone.de/css/formate/einbinden.htm#kommentare
Alles andere wird als Fehler gewertet.


Original geschrieben von peschmae
Das verste ich nicht. Sprichst du da immer noch von den Kommentaren? Das ist keiner, das # ist der Trenner für die ID-Angabe - also alle uls mit id="menu".
Bitte ordentlich arbeitet. D. h. "id" nicht mit "class" verwechseln. Eine "id" darf nur einmal im gesamten (X)HTML Dokument auftauchen. Alles andere ist falsch. Eine Klasse ("class") darf mehrfach auftauchen. siehe SelfHTML Formate für Klassen (http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen) vs. Individualformate (http://selfhtml.teamone.de/css/formate/zentrale.htm#individualformate)


Original geschrieben von peschmae
k.A. wies im Standard steht - aber das ist eigentlich auch weit verbreitet - halt ne Farbangabe auf 16er Basis und nicht auf 255er. Naja, mal gucken was der Validator und die Browser dazu sagen...
Trotzdem, im sauber und ordentlich arbeiten. Da sich bei unordentlicher Arbeit schnell Flüchtigkeitsfehler einschleichen, die die Fehlersuche nur unnötig erschweren da sie teilweise auch schwer zu lokalisieren sind.


Pingu

[bischi]

Original geschrieben von peschmae
- Die Menüeinträge "Script1, Script2, Script3, Script4 - blablablabla" (der letzte ist lang) sollten alle gleich breit mit der Hintergrundfarbe hinterlegt sein (sonst siehts doof aus)


Wie gesagt: Tabelle statt Liste...



- Das Untermenü aus asd und aöjdfaöd ist das Untermenü zum Menüpunkt Script3 - es erscheint aber neben dem Menüpunkt "Script4 - blablablabla" - also zu weit unten
Machs wie bei den anderen: <li> noch nicht schliessen, bevor das unteruntermenü kommt (wohl übersehen, bei dem Rest hast dus richtig gemacht...)

MfG Bischi

[Pingu]

Original geschrieben von peschmae
- Die Menüeinträge "Script1, Script2, Script3, Script4 - blablablabla" (der letzte ist lang) sollten alle gleich breit mit der Hintergrundfarbe hinterlegt sein (sonst siehts doof aus)

- Das Untermenü aus asd und aöjdfaöd ist das Untermenü zum Menüpunkt Script3 - es erscheint aber neben dem Menüpunkt "Script4 - blablablabla" - also zu weit unten
Das geht nicht dynamisch. Das muß festgelegt werden, z. B. in dem die <li> Element al Blockelemente definiert werden, dann kann auch eine Breite und Höhe festgelegt werden, die dann von allen Elementen eingehalten wird. Nimm am besten Beispiele zur Hand, z. B. von A List Apart (http://www.alistapart.com).

Pingu

[peschmae]

Original geschrieben von Pingu
Ich sage nur: Im Safari (Mac OS 10.2.8) sehe ich kein Menü welches sich aufklappt. Es ist alles schon "offen".

Ja. Weil ichs im Stylesheet auskommentiert habe. Offenbar schluckt auch deiner die !'s



Für den Browser nicht, aber für uns - damit wir es besser lesen können.


Ok :)



Es gibt einen Standard, siehe SelfHTML: http://selfhtml.teamone.de/css/formate/einbinden.htm#kommentare
Alles andere wird als Fehler gewertet.


Hehe, wobei gerade das Beispiel die Variante zeigt nicht ein CSS-Kommentar ist sondern ein Kompatibilitätsmodus. Darunter stehts zwar aber reichlich klein ;)



Bitte ordentlich arbeitet. D. h. "id" nicht mit "class" verwechseln. Eine "id" darf nur einmal im gesamten (X)HTML Dokument auftauchen. Alles andere ist falsch...
Axo. Hab mich schon gefragt wieso es da zwei Varianten für ein und dasselbe gibt. :D

Wo ist da nur die Strenge der Browser im Umgang mit XML geblieben :confused:

MfG Peschmä

[peschmae]

Original geschrieben von bischi
Wie gesagt: Tabelle statt Liste...

@pingu: Schade, scheint mir aber auch das einzige zu sein was noch bleibt.



Machs wie bei den anderen: <li> noch nicht schliessen, bevor das unteruntermenü kommt (wohl übersehen, bei dem Rest hast dus richtig gemacht...)


Von was sprichst du? :confused:

MfG Peschmä

[Claudine]

Original geschrieben von peschmae


Von was sprichst du? :confused:


Mit jedem Koch wird Brei besser.:D

[Pingu]

Ach übrigens zum Thema Menüs mit CSS habe ich noch einen Artikel hier: http://www.kangooz.com/design/Pages/menuskins.html

Pingu

[bischi]

Original geschrieben von peschmae
@pingu: Schade, scheint mir aber auch das einzige zu sein was noch bleibt.


Seit wann heiss ich Pingu?! ARGH!


Von was sprichst du?
Guckfehler meinerseits... Hab eines der <li> übersehen... Sorry für die Konfusion (wow - was für ein Wort!)

MfG Bischi

PS: Was mir noch einfällt: <dvi> nehmen, bei denen kannst du die Breite und die Abstände angeben - funzen wie Layer.

[peschmae]

Original geschrieben von bischi
Seit wann heiss ich Pingu?! ARGH!

Du hältst dich für viel zu wichtig. Ich meinte Pingu :p



PS: Was mir noch einfällt: <dvi> nehmen, bei denen kannst du die Breite und die Abstände angeben - funzen wie Layer.

Die Breite kann man auch sonst angeben - aber nur in Einheiten. Was ich aber möchte ist, dass das Menü automatisch genau so breit ist (für alle Menüeinträge) wie der breiteste Eintrag breit ist.

Bin gerade am Tabelle Basteln. Haut auch noch nicht 100%ig hin, aber ist schon mal ein Anfang.

Danke @Pingu.

MfG Peschmä

[peschmae]

So. Hab jetzt beschlossen, dass ich keine Unteruntermenüs brauche - nur Popup-Dinger
(Naja, vor allem weil die nicht gehen ;))

Könnt ihr die mal angucken?

Getestet hab ichs bisher auf Mozilla und Konqueror.
Der IE - naja, der kann nicht einmal den >-Scope Operator von CSS. Aber mittlerweile zeigt er die Hauptmenüleiste richtig an. Popup kann er allerdings nicht.
Opera streikt noch - will die Hauptmenüleiste nicht horizontal sondern vertikal anzeigen.

Die Page (http://home.pages.at/peschmae/menu/index.html) - Das Stylesheet (http://home.pages.at/peschmae/menu/style.css)

MfG Peschmä

[peschmae]

Original geschrieben von Claudine
Pop up + Banner sind out!

Pop up - Menüs meine ich :)


Normalerweise macht das umgekehrt, daher die li in die Tabelle und nich
il und ul, ol usw außen herum bauen.

Warum? Weil das in eine Sackgasse führt, na der schwarzen Kugel.


Wie? Die Tabelle habe ich nur damit alle Popup-Menü-Einträge gleich breit sind
Inwiefern sollte ich was umgekehrt machen?



Wenn es schnell gehen soll, und Du keine Lust mehr hast, schreib doch
deinen Krams in PDF und biete es zum Download an.
Google sucht auch in PDF. Du kannst also auch damit weltweit bekannt
werden.

Nenee, kommt nicht in Frage.
Wollte nur mal eben ne Webseite basteln - und da ich gesehen hab das Menüs nur mit CSS und ohne JavaScript gehen hab ich gedacht, das muss jetzt her. :)

MfG Peschmä

P.S. Weltweit bekannt bin ich schon. Es weiss es nur noch keiner :D

[peschmae]

Original geschrieben von Claudine
Eine Tabelle dient dazu eine Seite aufzuteilen.
Stell dir ein Schachbrett vor, Dame geht auch!

li,ul, usw. Tags dienen zur Formatierung von Text (Aufzählungen).

1.) Also, Seite mit Tabelle(n) aufteilen.
2.) Danach suchst Du dir irgeneinen <td> Tag aus, und fügst dort
deine Liste ein.

So was steht aber in jeden HTML Buch? Hoffe ich zumindest.


Keine Ahnung, ich hab noch nie ein HTML-Buch gelesen. Allerdings bin ich gar nicht der Meinung das man Tabellen fürs Seitenlayout benutzen sollte. Dafür hat man ja schliesslich CSS :D
Die Tabelle hab ich an dieser Stelle nur verwendet, weil das die einzige Möglichkeit war, die ich sah, um sämtliche Menüpunkte gleich breit mit Hintergrundfarbe zu hinterlegen, ohne fix die Menübreite festlegen zu müssen.
Ich halte Grundsätzlich die Trennung von Layout/Formatierung und Inhalt für eine sehr gute Sache. (Deshalb hab ich auch vorher noch ein bisschen mit Website-DTD gespielt, aber das dann schliesslich doch verworfen)
Wie ich festgestellt habe sind validierte Webseiten doch noch in der Minderheit - von dem her gibts nicht all zu viel Studienmaterial. Und alles abschreiben werde ich sowieso nicht ;)

MfG Peschmä

[Claudine]

Tja, dann kann ich dir nur viel Glück wünschen.