[Luzifer2004]

hey jungs

also ich sammel derzeit so meine ersten größeren css erfahrungen beim versuch ein horizontales css menü zu entwickeln.

http://luzifer2oo4.lu.funpic.de/eu-tests/

es ist soweit auch ganz funktionstüchtig aber da gibts noch 1, 2 problemchen:

1. die hauptpunkte des menüs passen sich der breite der unterpunkte an. ich hab overflow:visible an 2 stellen des menüs probiert aber es brachte keinen erfolg. weiß einer wo genau das rein muss?
wichtig ist, dass später laange unterpunkte da stehen können wie z.b. "organization and structure" unter dem hauptpunkt "news", das muss gehen. dass sich also das untermenü wie bei ibm.com (z.b.) den platz nach rechts einfach nimmt.

2. die unterpunkte sind links und rechts je 1pc kleiner als der oberpunkt. kann ich die je 1px größer machen, dass der weiße border durchgängig wird und keine kleine abstufung hat?

danke schonmal

btw: findet ihr die punkte des menüs zu klein, sollten sie etwa so groß werden wie bei http://luzifer2oo4.lu.funpic.de/eu-projekt/?

[kampfgnom]

ich glaube für punkt 1 musst du dem eltern list element float left geben.
Dann müsste das mE nach gehen

2: müsste gehen

Aber: Der IE kann immer noch nicht :hover für andere elemente auser "a" interpretieren.
D.h. dein Menü wird nicht im IE gehen. da musste mit JS ran

[Luzifer2004]

zu punkt 1: nein float left hat leider nicht geholfen. bleibt bis jetzt so. zumindest hab ich das float in firebug überall mal ausprobiert.

zu punkt 2: und wie mach ich das je 1 pixel an beiden seiten breiter?

thema IE: is echt kacke, hab nich gewusst das die lusche das hover nicht bringt... werd wohl auf JS umsteigen aber auch das hat doch nicht jeder im browser aktiviert/erlaubt, oder? dann wär wohl ein menü ohne dropdown besser um eine gute dissemination zu gewährleisten?

hab hier grad folgende seite gefunden: http://www.cssplay.co.uk/menus/drop_down.html
da steht im quelltext dieser block:

<style type="text/css">
.menu {display:none;}
#noniemenu {position:absolute;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursorointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
</style>

<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#noniemenu {display:none;}
.menu {display:block; position:absolute;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
/*]]>*/
</style>
<![endif]-->

der untere teil interessiert mich... geht es doch irgendwie im IE? müsste ich dann nur die kommentarklammern wegnehmen und halt anpassen? oder was bedeutet dieser block?

[kampfgnom]

Ja, aber glaube nur weil der IE auch ne weitere regel misachtet. nämlich das ein link tag keine block elemente enthalten darf...oder so ähnlich war das.
Kommst glaub ich ganz gut wenn du das nimmst.

Ich hab aber mal iwo ein artikel gelesen da würde ein CSS basierendes Dropdown menü vorgestellt. das für den IE per JS diese Hover funktion hinzufügt.

finde es leider nicht.

[Luzifer2004]

hey cool sowas geht ja echt, :hover imitieren.
hab mir da ma die ersten par google treffer angeguckt. was hälstn von den 2 beispielen?

.beispiel {
background: #d7dfb6;
}
.beispiel:hover, .beispielhover {
background: #eff0e0;
}

Der IE brauch dann per Conditional Comment noch folgendes:

.beispiel {
background-color: expression(
this.onmouseover = new Function("this.className += ' beispielhover';"),
this.onmouseout = new Function("this.className = this.className.replace('beispielhover', '');")
);
}

http://www.kk-works.de/2005/10/15/ho...alle/#more-126

oder noch leichter:

http://www.entwickler-blog.de/archiv...-Tabellen.html

sieht richtig machbar aus oder? glaub das test ich bei nächster gelegenheit mal. aber glaub auch dass ich vor sonntag abend keine zeit dafür haben werde..

[MrNiceGuy]

Vielleicht auch sehr interessant an dieser Stelle die aktuelle Ausgabe des PHP-Journal. Ich habe sie mir vor ein paar Tagen gekauft und den Artikel ab Seite 86 über Navigationsmenüs mit CSS schonmal angelesen. Sehr interessant und wahrscheinlich auch sehr passend an dieser Stelle. Allerdings etwas zu komplex, um es hier jetzt alles rein zu schreiben.

Die 15 Euro haben sich jedenfalls gelohnt und das nicht nur für den Artikel. Ergo: Meine Empfehlung für dich vielleicht auch diese Ausgabe zu ergattern, solange sie noch am Kiosk erhältlich ist.

Leider gibt es keine eBook-Variante zum Download, die wäre sicher günstiger...

[Ben]

Und bist du nun zu einem Ergebnis gekommen?
Die letzte Meldung

Zitat von Luzifer2004

glaub das test ich bei nächster gelegenheit mal. aber glaub auch dass ich vor sonntag abend keine zeit dafür haben werde..

liegt ja schon etwas zurück.