hi,
ich möchte ein bestehendes Listenmenu mit Hintergrundfarbe und Linien zwischen den Menupunkten erstellen.
Hauptpunkte sollen einen Rahmen haben und die Hintergrundfarbe x. Wenn es ein Untermenu gibt, dann soll ein before-Image vorhanden sein.
Die Submenupunkte sollen eine andere BG-Farbe haben und auch einen Rahmen.
Hat jemand sowas <für mich=""> oder eine Anleitung?
Gruß Andres
etwas zum stöbern:
http://css.fractatulum.net/beispiele.htm
http://css.maxdesign.com.au/listamatic/
Hallo Steffenk,
danke für die Info.
Habe ich dann auch gemacht und ein Menu gebaut, dass im IE läuft, aber nicht im Firefox.
Ein Listenmenu mit unsortierter Liste und Untermenus.
Die Menupunkte haben eine Hintergrundfarbe und einen Rand.
Der Firefox ignoriert
1. die Breite der einzelnen Menupunkte: die Hintergrundfarbe mit dem Rahmen ist nur so breit, wie das Textelement.
2. die Höhenangaben (padding)
3. den Aktivzustand der Hauptmenupunkte.
Hier der Auszug aus dem CSS:
/* Positionierung des Menus, seitliche Navigation*/
.menu {
display: block;
background-color: #FFFFFF;
position: absolute;
top: 210px;
left: 35px;
width: auto;
}
/*Klasse für die seitliche Navigation, 1. Ebene: mit Rand und Hintergrundfarbe*/
.menu_main{
color: #555656;
width: 100px;
background-color: #B3B0A1;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-color: #00B9F3;
padding: 3px;
}
}
/*Klasse für die seitliche Navigation, 1. Ebene, Aktiv*/
.menu_mainact {
color: #555656;
width: 100px;
background-color: #B3B0A1;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-color: #00B9F3;
padding: 3px;
}
/*Klasse für die seitliche Navigation, 1. Unter-Ebene*/
.menu_sub {
color: #555656;
width: 100px;
background-color: #DBD8C9;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-color: #00B9F3;
padding: 3px 3px 3px 10px;
}
/*Klasse für die seitliche Navigation, 1. Unter-Ebene, Aktiv*/
.menu_subact {
list-style-position: outside;
color: #555656;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
width: 100px;
background-color: #DBD8C9;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration:none;
padding: 3px 3px 3px 10px;
}
Hier das Setup
marks.MENU = HMENU
#excludeUIDList soll Seiten aus dem Menu entfernen
#Evtl. problematisch, weil das Menu2 vielleicht nicht barrierefrei ist.
#marks.MENU.excludeUidList =
marks.MENU.entryLevel = 0
marks.MENU {
1 = TMENU
1 {
wrap = <ul> | </ul>
entryLevel = 1
noBlur = 1
NO {
WrapItemAndSub = <li> | </li>
after = <br />
ATagParams = class = "menu_main"
#StdWrap.case = lower
#beforeImg = fileadmin/Franz/images/pix-punkt-t.gif
RO = 1
#beforeROImg = fileadmin/Franz/images/pix-punkt.gif
}
ACT < .NO
ACT.ATagParams = class = "menu_mainact"
ACT = 1
}
2 = TMENU
2 {
wrap = <ul> | </ul>
#entryLevel = 0
noBlur = 1
NO {
AllWrap = class = "menu_sub"
after = <br />
ATagParams = class = "menu_sub"
#StdWrap.case = lower
RO = 1
}
ACT < .NO
ACT.ATagParams = class="menu_subact"
ACT = 1
}
Was mache ich falsch,
kannst du mir helfen?
Gruß
Andrea
Der css-validator http://jigsaw.w3.org
sagt:
* Zeile: 26 Kontext : .menu_main
Die Eigenschaft font-color existiert nicht : #00b9f3
* Zeile: 31Parse error - Unrecognized : }
* Zeile: 44 Kontext : .menu_mainactDie Eigenschaft font-color existiert nicht : #00b9f3
* Zeile: 61 Kontext : .menu_subDie Eigenschaft font-color existiert nicht : #00b9f3
Wenn da bei Abtippen in das Posting keine Fehler entstanden sind, bessere das zuerst mal nach.
Weiterhin würde ich es eher so ausdrücken: der IE ist weniger pingelig als der FF (der hält sich sehr an die Standards).
Korrektes CSS/(X)HTML stellt der FF korrekt dar, während man extra für den IE irgendwelche "Hacks" einbauen muss.
Ich habe da noch einen Link mehr:
http://www.xhtmlforum.de
[/url]
Hallo Arnem,
vielen Dank,
der Fehler Nr. 3 ist gelöst.
Es war die doppelte } in Zeile 44 des main_act Bereiches.
Die Font-Farben habe ich korrigiert.
Jetzt habe ich nur noch die beiden ersten Probleme:
1. die Breite der einzelnen Menupunkte: die Hintergrundfarbe mit dem Rahmen ist nur so breit, wie das Textelement.
2. die Höhenangaben zwischen den einzelnen Menüpunkten. Die Menupunkte laufen ineinander, also überlapppen sich.
Wenn ich das gelöst bekomme...
:p :p :p
Gruß
Andrea
Hallöchen,
ich nähere mich an.
Durch den display: block;
habe ich die Hintergrunde korrekt ausrichten können.
Aber jetzt habe ich zwischen den einzelnen Menüpunkten einen Abstand, der "Gott sei dank" in beiden Browsern gleich groß ist.
Das dumme ist nur, dass ich gar keinen Abstand möchte.
Jetzt komme ich nicht weiter.
Gruß
Andrea
Huch, jetzt habe ich den Faden verloren. Ich dachte erst, du willst die Blöcke voneinander absetzen und eine Lücke dazwischen haben.
Dann wäre z.B. margin: 2px 0px 2px 0px; eine Lösung gewesen. Ich habe das mal auf die schnelle in meine Spielwiese eingebaut (och ja, ich bin ein altes Spielkind). Kannst du dir mal anschauen.
Durch die grauen Ränder hast du quasi einen Abstand. Was genau willst du denn haben? Vielleicht verstehe ich es auch einfach nicht.
Gruß
Erwin
Ich empfehle Dir mit dem Firefox und der WebDeveloper-Extension zu arbeiten. Da kannst Du mit edit CSS das ganze live austesten. Wenn es dort korrekt läuft, ist es auch syntaktisch in Ordnung.
Dann kannst Du Dich dem IE widmen und u.U. ein paar Hacks einbauen, damit auch der IE wieder richtig rechnet.
Vielleicht hast Du einen Online-Link, dann kann ich mir das auch mal anschauen.
Hallöchen,
Steffen, dir habe ich einen Link geschickt.
Erwin, sag mir doch mal die URL der Spielwiese, dann kann ich nachsehen.
Aber es geht genau darum, dass ich keinen Abstand zwischen den Menüpunkten haben möchte.
Hier mal das CSS - funktioniert in IE und FF
/*<!-- Linkeigenschaften -->*/
A:link, A:visited, A:active {
color: #555656;
text-decoration:none;
font: normal normal 12px Arial, Verdana, Tahoma;
font-weight:bold;
}
A:hover {
color: #686355;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-weight:bold;
}
/* Positionierung des Menus, seitliche Navigation*/
.menu {
display: block;
background-color: #FFFFFF;
position: absolute;
top: 210px;
left: 35px;
width: auto;
}
/*Klasse für die seitliche Navigation, 1. Ebene: mit Rand und Hintergrundfarbe*/
.menu_main {
display: block;
color: #555656;
width: 9em;
background-color: #B3B0A1;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
padding: 5px;
margin: 0px 0px 0px 0px;
}
/*Klasse für die seitliche Navigation, 1. Ebene, Aktiv*/
.menu_mainact {
display: block;
color: #555656;
width: 9em;
background-color: #B3B0A1;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
padding: 5px;
margin: 0px 0px 0px 0px;
}
/*Klasse für die seitliche Navigation, 1. Unter-Ebene*/
.menu_sub {
display: block;
color: #555656;
width: 9em;
background-color: #DBD8C9;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
padding: 5px 0px 5px 10px;
}
/*Klasse für die seitliche Navigation, 1. Unter-Ebene, Aktiv*/
.menu_subact {
display: block;
list-style-position: outside;
color: #555656;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
width: 9em;
background-color: #DBD8C9;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
text-decoration:none;
padding: 5px 0px 5px 10px;
}
und hier das Setup
marks.MENU = HMENU
#excludeUIDList soll Seiten aus dem Menu entfernen
#Evtl. problematisch, weil das Menu2 vielleicht nicht barrierefrei ist.
#marks.MENU.excludeUidList =
marks.MENU.entryLevel = 0
marks.MENU {
1 = TMENU
1 {
wrap = <ul> | </ul>
entryLevel = 1
noBlur = 1
NO {
WrapItemAndSub = <li> | </li>
after = <br />
ATagParams = class = "menu_main"
#StdWrap.case = lower
#beforeImg = fileadmin/Franz/images/pix-punkt-t.gif
RO = 1
#beforeROImg = fileadmin/Franz/images/pix-punkt.gif
}
ACT < .NO
ACT.ATagParams = class = "menu_mainact"
ACT = 1
}
2 = TMENU
2 {
wrap = <ul> | </ul>
#entryLevel = 0
noBlur = 1
NO {
AllWrap = class = "menu_sub"
after = <br />
ATagParams = class = "menu_sub"
#StdWrap.case = lower
RO = 1
}
ACT < .NO
ACT.ATagParams = class="menu_subact"
ACT = 1
}
Viele Grüße
Andrea
#angry# #angry# #angry# #angry# #angry#
Hallo ihr :o :o :o ,
nun, ja, also - es war im Setup das <br />.
Jetzt geht es wunschgemäß.
Vielen Dank für alle Unterstützung. Wer das Menü brauchen kann, alles nötige in der obigen Post. Aber bitte nicht mit dem bar wrapen.
Viele Grüße
Andrea :p
Ach ja, noch eine Frage:
durch die border Elemente habe ich einen kleinen Schönheitsfehler:
Die Linien zwischen den einzelnen Elementen sind natürlich doppelt breit.
Nehme ich border-bottom raus, fehlt unten eine Abschlusslinie.
Setze ich den Bottom in das DIV .menu, dann ist die Linie nicht lang genug.
Irgendwelche Ideen?
Wäre toll.
Gruß
Andrea
optionSplit 🙂
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Functions/OptionSplit.html
ATagParams = |*||*| class = "a" || class = "b"
In Klasse a nimmst du den border-bottom raus und in Klasse b lässt Du ihn drin.
Grummel,
gerade habe ich alles so schön eingestellt. Jetzt kann ich alles noch mal schreiben, weil dieses Forum meine Post gefressen hat. #evil#
So, jetzt die Lösung, die ich mit eurer Hilfe - besonders Steffen und Erwin - hinbekommen habe.
Probleme waren:
Browseransichten in IE und FF
Damit der IE es auch korrekt anzeigt, habe ich den einzelnen Menupunkten eine feste Höhe verpasst (Küsschen :-)).
Linienbreite zwischen den Menupunkten
Da zwischen den Menupunkten kein Abstand sein soll, ist natürlich die Linienbreite doppelt dick, da immer ein border-top auf ein bottom traf.
Lösung dazu ist: dem LI-Element einen Border nach allen vier Seiten zu geben und den Menuklassen nur oben, links und rechts.
Für alle, die es brauchen können, hier setup und CSS.
Viele Grüße
Andrea
/* Positionierung des Menus, seitliche Navigation. Linie ist für den unteren Rand des Menus*/
.menu {
display: block;
background-color: #FFFFFF;
position: absolute;
top: 220px;
left: 10px;
width: auto;
border-bottom: 1px #686355 solid;
}
/*Klasse für die seitliche Navigation, 1. Ebene: mit Rand und Hintergrundfarbe. Feste Höhe der einzelnen Punkte ist wichtig für den IE. */
/*Nur drei Border, sonst sind die Linien doppelt dick. S. auch das LI Element*/
.menu_main {
display: block;
color: #555656;
width: 150px;
background-color: #B3B0A1;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
/*border-bottom: 1px #686355 solid;*/
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
padding: 5px;
margin: 0px ;
height:20px;
}
/*Klasse für die seitliche Navigation, 1. Ebene, Aktiv*/
.menu_mainact {
display: block;
color: #555656;
width: 150px;
background-color: #B3B0A1;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
padding: 5px;
margin: 0px ;
height:20px;
}
/*Klasse für die seitliche Navigation, 1. Unter-Ebene*/
.menu_sub {
display: block;
color: #555656;
width: 150px;
background-color: #DBD8C9;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
padding: 5px 0px 5px 10px;
margin: 0px;
height:20px;
}
/*Klasse für die seitliche Navigation, 1. Unter-Ebene, Aktiv*/
.menu_subact {
display: block;
list-style-position: outside;
color: #555656;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
width: 150px;
background-color: #DBD8C9;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
text-decoration:none;
margin: 0px;
padding: 5px 0px 5px 10px;
height:20px;
}
/*Klasse für die seitliche Navigation, 2. Unter-Ebene*/
/*<!-- Menu2 / spezielle Linkfarbe für die oberere horizontale Navi-->*/
.menu2 a:link {
color: #000000;
text-decoration: ;
}
.menu2 a:hover {
color: #A3A092;
}
.menu2act a:active {
color: #00B9F3;
}
/*<!-- Hauptbereich -->*/
/*Positionierung Oberes Menü, Links ohne Untermenu*/
.menu2 {
float:left;
position: relative;
top: 172px;
left: 0px;
padding:0px;
padding-left: 35px;
width:auto;
}
/* 1. Abstand oben 2. Abstand rechts 3. Abstand unten 4. Wert sorgt für eine Einrückung - IE und FFOX (Abstand links)*/
ul {
margin: 0px;
padding: 0px 0px 0px 0px;
}
/* Border für den Rand um das gesamte Menu. WICHTIG*/
li {
margin: 0px;
padding: 0px 0x 0px 0px;
list-style-type: none;
width: 150px;
border-top: 1px #686355 solid;
border-left: 1px #686355 solid;
border-right: 1px #686355 solid;
border-bottom: 1px #686355 solid;
}
marks.MENU = HMENU
#excludeUIDList soll Seiten aus dem Menu entfernen
#Evtl. problematisch, weil das Menu2 vielleicht nicht barrierefrei ist.
#marks.MENU.excludeUidList =
marks.MENU.entryLevel = 0
marks.MENU {
1 = TMENU
1 {
wrap = <ul> | </ul>
entryLevel = 1
noBlur = 1
NO {
WrapItemAndSub = <li> | </li>
#after = <br />
ATagParams = class = "menu_main"
#StdWrap.case = lower
#beforeImg = fileadmin/Franz/images/pix-punkt-t.gif
#RO = 1
#beforeROImg = fileadmin/Franz/images/pix-punkt.gif
}
RO < .NO
RO.ATagParams = class = "menu_mainhover"
RO = 1
ACT < .NO
ACT.ATagParams = class = "menu_mainact"
ACT = 1
}
2 = TMENU
2 {
wrap = <ul> | </ul>
#entryLevel = 0
noBlur = 1
NO {
AllWrap = class = "menu_sub"
#after = <br />
ATagParams = class = "menu_sub"
#StdWrap.case = lower
RO = 1
}
ACT < .NO
ACT.ATagParams = class="menu_subact"
ACT = 1
}
}
marks.MENU2 = HMENU
marks.MENU2.entryLevel = 0
marks.MENU2.special = list
marks.MENU2.special.value = 787, 788, 789
marks.MENU2 {
1 = TMENU
1 {
wrap = <ul> | </ul>
NO {
WrapItemAndSub = <li> | </li>
after = |
ATagParams = class="menu_2"
StdWrap.case = lower
}
ACT < .NO
ACT.ATagParams = class="menuact"
ACT = 1
}
}
}
Hallo zusammen,
wenn alles klappt hat man noch weitere Wünsche.
Jetzt möchte ich allen Menupunkten die Untermenus haben ein Icon voransetzen.
Das klappt aber nicht.
Ich glaube, dass sich hier Template Setup und CSS hauen.
Ich habe dem Zustand IFSUB eine Klasse zugewiesen und im CSS diese Klasse wie die Hauptmenuklasse definiert und zusätzlich eine URL zu dem Bildchen gesetzt. Mhhh.
Dann habe ich versucht dem Zustand IFSUB ein beforeImg zu geben.
Das wird auch ignoriert.
Auf der vorigen Seite sind mein Setup und CSS zu finden.
Kann mir jemand sagen, wie ich das über CSS hinkriege?
Gruß
Andrea