Hallo erstmal.
Trotz verzweifelter Internetsuche, hab ich nichts gefunden, was mir zeigt wie ich ein TMENU mit div nebeneinander in IE einrichten kann..
Meine Vorgehensweise:
<div class="menu1_NO">###MENU1### </div>
MENU1 = HMENU
MENU1 {
target = _self
special = directory
special.value = 43
entryLevel = 1
height=20
1 = TMENU
1.NO = 1
1.NO.linkWrap = <span class="menu1_NO"> | </span>
1.ACT = 1
1.ACT.linkWrap = <span class="menu1_ACT"> | </span>
}
In CSS:
.menu1_NO {
width:900px; font:12px Verdana; color:#FFFFFF; text-align:right;
background-image:url(../fileadmin/images/menues/m1bg.gif);
background-repeat:repeat-x; background-position:bottom;
}
.menu1_NO a {
padding-left:5px; padding-right:5px; padding-top:3px; padding-bottom:0px;
font:12px Verdana; color:#FFFFFF; text-decoration:none;
border-right:1px #AAAAAA solid; border-top:1px #AAAAAA solid;
border-left:1px #AAAAAA solid; border-bottom:1px #BCBCBC solid;
background-image:url(../fileadmin/images/menues/m1bgN.gif);
background-repeat:repeat-x; background-position:bottom;
}
.menu1_NO a:hover {color:#636363; text-decoration:none; border-top:1px #AAAAAA solid;}
.menu1_NO a:focus {color:#FFFFFF;}
.menu1_NO a:active {color:#FFFFFF;}
.menu1_ACT {font:12px Verdana; color:#000000; text-align:right; width:900px;
border-right:0px #FFFFFF solid; border-top:0px #FFFFFF solid;}
.menu1_ACT a {
padding-left:5px; padding-right:5px; padding-top:3px;
padding-bottom:0px; font:12px Verdana; color:#000000;
text-decoration:none; border-right:1px #AAAAAA solid;
border-top:1px #AAAAAA solid; border-left:1px #AAAAAA solid;
border-bottom:1px #F7F7F7 solid;
background-image:url(../fileadmin/images/menues/m1bgA.gif);
background-repeat:repeat-x; background-position:bottom;
}
.menu1_ACT a:hover {color:#636363; border-top:1px #AAAAAA solid;}
.menu1_ACT a:focus {color:#636363;}
.menu1_ACT a:active {color:#636363;}
Das schönste dabei mit Mozilla Firefox funktioniert alles ohne irgendein Problem. Doch IE 7 macht es nicht. 🙁 Da erscheinen mir meine ganzen Menüpunkte untereinander, was ich überhaupt nicht bezwecke.
Ich würd mich sehr freuen wenn mir da jemand weiter helfen könnte 😉 danke schon mal.
mit display: inline; oder float: left; kannst du auch DIV Container nebeneinander andordnen.
PS: Menüs würde ich mit Listen und nicht mit DIV machen
danke für die rasche antwort, doch leider funktionert das in ie nicht. firefox lässt auf jeden merken dass ich da was ändern will.. o.O
Lami schrieb
danke für die rasche antwort, doch leider funktionert das in ie nicht. firefox lässt auf jeden merken dass ich da was ändern will.. o.O
Klar funktioniert das - wenn die DIV Container nicht zu breit sind - damit diese nebeneinander passen
die breite hab ich geändert auf ins gesamt 700px. ie macht das trotzdem nicht. ich schließe mal dieses thema und werd von div auf table umsteigen. da funktioniert es zumindest.. #paralyzed#
Lami schrieb
und werd von div auf table umsteigen
Willkommen im letzten Jahrhundert 😃
*g* naja, bleibt mir zumindest so zuverlässig, dass jeder browser nach meine nase tanzt #giggle#
werd mich trotzdem noch neben bei damit spielen um die ie übersetzungsweise besser verstehen zu können.. #paralyzed#
Hallo.
Ich konnt es nicht lassen und hab es mit div doch noch geschafft 🙂
Ich hab einfach nur vergessen in index.html <ul>###Menu1###</ul> einzugeben und in TS von <div> in <li> umändern.. :o
dann macht auch der ie so wie es verlangt wird.
meine Änderungen also:
<div class="menu" id="menu1_NO"><ul>###MENU1###</ul></div>
.menu ul {
width:500px;
font:12px Verdana;
color:#FFFFFF;
text-align:right;
background-image:url(../fileadmin/images/menues/m1bg.gif);
display: block;
list-style-type: none;
background-repeat:repeat-x;
background-position:bottom;
}
#menu1_NO {
width:500px;
font:12px Verdana;
color:#FFFFFF;
text-align:right;
background-image:url(../fileadmin/images/menues/m1bg.gif);
display: inline;
list-style-type: none;
background-repeat:repeat-x;
background-position:bottom;
}
#menu1_NO a {
font:12px Verdana;
color:#FFFFFF;
text-decoration:none;
float:left;
display: block;
list-style-type: none;
border-right:1px #AAAAAA solid;
border-top:1px #AAAAAA solid;
border-left:1px #AAAAAA solid;
border-bottom:1px #BCBCBC solid;
background-image:url(../fileadmin/images/menues/m1bgN.gif);
background-repeat:repeat-x;
background-position:bottom;
}
#menu1_NO a:hover {color:#636363; text-decoration:none; border-top:1px #AAAAAA solid;}
#menu1_NO a:focus {color:#FFFFFF;}
#menu1_NO a:active {color:#FFFFFF;}
#menu1_ACT {
font:12px Verdana;
color:#000000;
text-align:right;
width:500px;
display: block;
list-style-type: none;
border-right:0px #FFFFFF solid;
border-top:0px #FFFFFF solid;
}
#menu1_ACT ul li {
font:12px Verdana;
color:#000000;
text-align:right;
width:500px;
display: block;
list-style-type: none;
border-right:0px #FFFFFF solid;
border-top:0px #FFFFFF solid;
}
#menu1_ACT a {
font:12px Verdana;
color:#000000;
text-decoration:none;
float:left;
list-style-type: none;
display: block;
border-right:1px #AAAAAA solid;
border-top:1px #AAAAAA solid;
border-left:1px #AAAAAA solid;
border-bottom:1px #F7F7F7 solid;
background-image:url(../fileadmin/images/menues/m1bgA.gif);
background-repeat:repeat-x;
background-position:bottom;
}
#menu1_ACT a:hover {color:#636363; border-top:1px #AAAAAA solid;}
#menu1_ACT a:focus {color:#636363;}
#menu1_ACT a:active {color:#636363;}
# Das Textmenü oben erstellen
MENU1 = HMENU
MENU1 {
target = _self
special = directory
special.value = 43
entryLevel = 1
height=20
1 = TMENU
1.NO = 1
1.NO.linkWrap = <li class="menu1_NO">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="menu1_ACT">|</li>
}
Es sind vielleicht für einen zu viele unbrauchbare angaben, doch damit funktioniert es.