Jörg Kruses Webmaster-Forum > HTML und CSS

menu via css oder ähnlichem erstellen [3]

21 tobi

das komma war in der tat zu viel. was so ein kleines zeichen alles bewirken kann
positon stimmt jetzt dann.

die größe der box des untermenüs allerdings nicht bzw wo kann ich die verändern?

EDIT: die Größe hab ich jetzt ändern können.

22 tobi

die Größe hab ich jetzt ändern können.
aber ich hinterlege ja wenn ihc über einen link fahre dein link mit einer hingrundfarbe und einer box, die box ist viel zu groß udn ich weiß nicht wo ich diese ändern kann

damit es ein wenig verständlich ist, habe ich einen screen:
http://ttc-tobi.bplaced.net/neues_design_1/screen_neues_design_1.JPG

23 Jörg Kruse

aber ich hinterlege ja wenn ihc über einen link fahre dein link mit einer hingrundfarbe und einer box

Wie sieht der Codeabschnitt aus, in dem du diese Eigenschaften definiert hast?

24 tobi

mein css sieht mittlerweile so aus:

.preload2 {background: url(grafiken_navi/button4.gif);}
.menu2 {padding:0 0 0 4px; margin:0; list-style:none; height:35px; background:#fff url(grafiken_navi/button1a.gif) repeat-x; position:relative; font-family:arial; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:1.0em; font-weight:bold; padding:0 0 0 9px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 17px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(grafiken_navi/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(grafiken_navi/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(grafiken_navi/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(grafiken_navi/button4a.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(grafiken_navi/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(grafiken_navi/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(grafiken_navi/button4a.gif) no-repeat right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:auto; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:auto;}
.menu2 :hover ul.sub li a {display:block; font-size:14px; height:20px; width:auto; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_mannschaften {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:83px; height:auto;}
.menu2 :hover ul.sub_mannschaften li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_mannschaften li a {display:block; font-size:1.2em; height:20px; width:77px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_mannschaften li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_mannschaften li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_mannschaften li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_mannschaften li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_turniere {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:197px; height:auto;}
.menu2 :hover ul.sub_turniere li {display:block; height:20px; position:relative; float:left; width:197px;}
.menu2 :hover ul.sub_turniere li a {display:block; font-size:1.2em; height:20px; width:190px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_turniere li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 180px 7px no-repeat;}
.menu2 :hover ul.sub_turniere li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_turniere li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 180px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_turniere li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 180px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_jugend {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:150px; height:auto;}
.menu2 :hover ul.sub_jugend li {display:block; height:20px; position:relative; float:left; width:150px;}
.menu2 :hover ul.sub_jugend li a {display:block; font-size:1.2em; height:20px; width:144px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_jugend li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 133px 7px no-repeat;}
.menu2 :hover ul.sub_jugend li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_jugend li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 133px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_jugend li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 133px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_termine {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:192px; height:auto;}
.menu2 :hover ul.sub_termine li {display:block; height:20px; position:relative; float:left; width:190px;}
.menu2 :hover ul.sub_termine li a {display:block; font-size:1.2em; height:20px; width:186px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_termine li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_termine li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_termine li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_termine li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_presse {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:244px; height:auto;}
.menu2 :hover ul.sub_presse li {display:block; height:20px; position:relative; float:left; width:244px;}
.menu2 :hover ul.sub_presse li a {display:block; font-size:1.2em; height:20px; width:238px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_presse li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_presse li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_presse li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_presse li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_1950bisheute {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:301px; height:auto;}
.menu2 :hover ul.sub_1950bisheute li {display:block; height:20px; position:relative; float:left; width:301px;}
.menu2 :hover ul.sub_1950bisheute li a {display:block; font-size:1.2em; height:20px; width:295px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_1950bisheute li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 284px 7px no-repeat;}
.menu2 :hover ul.sub_1950bisheute li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_1950bisheute li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 284px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_1950bisheute li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 284px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_aktivitaeten {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:167px; height:auto;}
.menu2 :hover ul.sub_aktivitaeten li {display:block; height:20px; position:relative; float:left; width:167px;}
.menu2 :hover ul.sub_aktivitaeten li a {display:block; font-size:1.2em; height:20px; width:161px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_aktivitaeten li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_aktivitaeten li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_aktivitaeten li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_aktivitaeten li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_verein {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:122px; height:auto;}
.menu2 :hover ul.sub_verein li {display:block; height:20px; position:relative; float:left; width:122px;}
.menu2 :hover ul.sub_verein li a {display:block; font-size:1.2em; height:20px; width:116px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_verein li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_verein li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_verein li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_verein li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul.sub_sonstiges {left:2px; top:35px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:95px; height:auto;}
.menu2 :hover ul.sub_sonstiges li {display:block; height:20px; position:relative; float:left; width:95px;}
.menu2 :hover ul.sub_sonstiges li a {display:block; font-size:1.2em; height:20px; width:89px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}
.menu2 :hover ul.sub_sonstiges li a.fly {background:#E3E3E3 url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_sonstiges li a:hover {background:#666666; color:#fff;}
.menu2 :hover ul.sub_sonstiges li a.fly:hover {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_sonstiges li:hover > a.fly {background:#666666 url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:200px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:149px; z-index:200; height:auto;}

.menu2 :hover ul.sub_turniere :hover ul
{left:191px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:101px; z-index:200; height:auto;}
.menu2 :hover ul.sub_turniere :hover ul :hover ul
{left:191px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:101px; z-index:200; height:auto;}
.menu2 :hover ul.sub_turniere :hover ul :hover ul :hover ul
{left:191px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:101px; z-index:200; height:auto;}
.menu2 :hover ul.sub_turniere :hover ul :hover ul :hover ul :hover ul
{left:191px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:101px; z-index:200; height:auto;}

.menu2 :hover ul.sub_jugend :hover ul,
.menu2 :hover ul.sub_jugend :hover ul :hover ul
{left:144px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:103px; z-index:200; height:auto;}
.menu2 :hover ul.sub_jugend :hover ul :hover ul :hover ul,
.menu2 :hover ul.sub_jugend :hover ul :hover ul :hover ul :hover ul
{left:144px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:103px; z-index:200; height:auto;}

.menu2 :hover ul.sub_1950bisheute :hover ul,
.menu2 :hover ul.sub_1950bisheute :hover ul :hover ul
{left:295px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:148px; z-index:200; height:auto;}
.menu2 :hover ul.sub_1950bisheute :hover ul :hover ul :hover ul,
.menu2 :hover ul.sub_1950bisheute :hover ul :hover ul :hover ul :hover ul
{left:295px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:80px; z-index:200; height:auto;}

25 Jörg Kruse

Ich meinte damit, in welcher Codezeile du diesen Hintergrund definiert hast?

26 tobi

hab jetzt auf die schnelle mal nur 2 rausgesucht, denn ich bin bei der arbeit. dass müßte es eigentlich seien, wenn ich mich nicht täusche:

.menu2 :hover ul.sub_verein li a {display:block; font-size:1.2em; height:20px; width:116px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}

.menu2 :hover ul.sub_sonstiges li a {display:block; font-size:1.2em; height:20px; width:89px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #E3E3E3; border-width:0 0 0 3px;}

27 Jörg Kruse

Du vererbst die Angaben auf die unteren Ebenen. Wenn du für ".menu2 :hover ul.sub_verein li a" eine Breite von 116px definierst, dann gilt das auch für die Links in tieferen Ebenen dieses Submenus.

Du musst diesen Wert also auch nochmal getrennt definieren. Ich frage mich aber, ob deine Vorgehensweise überhaupt so sinnvoll ist. Dieser CSS-Code war wohl eher für gleiche Breiten etc. ausgelegt und nicht für individuell gestaltete Boxen. Wenn du für jedes Submenu einen eigenen CSS-Selektor anlegst, erhältst du einen aufgeblähten Code, wo du selbst schon gar nicht mehr durchsteigst. Ich würde deswegen überlegen, ob du individuellen Werte wie für die Breite nicht besser direkt im HTML-Code definierst (so wie ich das in Beitrag 16 auch schon ml vorgeschlagen hatte)

28 tobi

möglich dass der code für gleiche breiten war. der css code geht somit ins unendliche und durchzusteigen fällt dann auch schwer, da muß ich dir recht geben.

und was schlägst du nun vor wie man dass am besten realisieren kann?
bzw welche angaben ich in den html code plazieren sollte?

<ul class="irgendwas" style="width:66px">

29 Jörg Kruse

Die Angaben, die du individuell gestalten möchtest - also die Breite - oder änderst du noch andere Formate?

Ich glaube, mein Vorschlag ist aber auch nicht zielführend, da nicht nur die <ul> eine eigene Breite erhalten, sondern auch <li> und <a> - diese zeigen den Hintergrund beim Hover

Du könntest den Code aber dadurch übersichtlicher gestalten, dass du nur die individuellen Werte (die vom Standard abweichen) nochmal extra aufführst.

also das hier:

.menu2 :hover ul.sub_1950bisheute :hover ul,
.menu2 :hover ul.sub_1950bisheute :hover ul :hover ul
{left:295px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:148px; z-index:200; height:auto;}
.menu2 :hover ul.sub_1950bisheute :hover ul :hover ul :hover ul,
.menu2 :hover ul.sub_1950bisheute :hover ul :hover ul :hover ul :hover ul
{left:295px; top:-4px; background: #E3E3E3; padding:3px 0; border:2px solid #000; white-space:nowrap; width:80px; z-index:200; height:auto;}

... auf das Notwendige kürzen:

.menu2 :hover ul.sub_1950bisheute :hover ul
{ width:148px; }
.menu2 :hover ul.sub_1950bisheute :hover ul :hover ul :hover ul
{ width:80px; }

Und dann machst du das gleiche nochmal für die <li>s und <a>s

30 tobi

hallo,

ich hab mir nun was neues gesucht und angepasst.

http://ttc-tobi.bplaced.net/test_menu/

firefox plaziert das menu in dem div schön mittig, einzig der ie plaziert das menu links, woran kann dass liegen?

außerdem hab ich einen validator test gemacht, und bekomme 3 errors, ich weiß leider nicht wie ich diese beheben kann.
http://validator.w3.org/check?uri=http%3A%2F%2Fttc-tobi.bplaced.net%2Ftest_menu%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

EDIT: die drei errors hab ich beheben können

Seite 1 234

nach oben weiter >