Wie kann ich ein Menü realisieren so wie hier bei Typo3.net?
Also die erste Ebene z. B. 12px gross und die zweite nur 10px.
Bisher hab ich das über ein css gemacht, aber das gilt ja gleich für die ganze Tabelle.
Hier mal mein Menü:
#menue
lib.mainMenu = HMENU
lib.mainMenu.special.value = 1
lib.mainMenu.1 = TMENU
lib.mainMenu.1.expAll = 0
lib.mainMenu.1 {
NO.allWrap = >> | <br>
ACT = 1
ACT.allWrap =<b> >> | </b> <br>
}
lib.mainMenu.2 = TMENU
lib.mainMenu.2 {
NO.allWrap = -| <br>
ACT = 1
ACT.allWrap = <b> -|</b> <br>
}
Danke!! 😃
lib.mainMenu = HMENU
lib.mainMenu {
1 = TMENU
1 {
wrap = <ul class="level-1"> | </ul>
NO.allWrap = <li> | </li>
ACT = 1
ACT.allWrap = <li class="current"> | </li>
}
2 = TMENU
2 {
wrap = <li><ul class="level-2"> | </ul></li>
NO.allWrap = <li> | </li>
ACT = 1
ACT.allWrap = <li class="current"> | </li>
}
}
Das passende CSS:
ul.level-1 {
font-size: 12px;
margin: 0;
padding: 0;
}
ul.level-2 {
background: #eee;
font-size: 10px;
margin-left: 16px;
}
li.current {
font-weight: bold;
}
CSS ist schon der richtige Weg!!!
Danke!
Das funktioniert soweit ganz gut, nur das Untermenü, also Ebene 2 ist zu weit nach rechts verschoben. Wie bekomme ich das weiter links?
Hier mal mein CSS:
body {
background-color: #888888;
}
.Stil1 {font-family: Verdana, Arial, Helvetica, sans-serif}
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #F8AE17;}
a:active {color: #FFAF03;}
ul.level-1 {
font-size: 12px;
margin-left: 40px;
padding: 0;
}
ul.level-2 {
font-size: 10px;
margin-left: 1px;
}
li.current {
font-weight: bold;
}
// * {
// font-family: Verdana, Arial, Helvetica, sans-serif;
// font-size: 12px;
// color: #000000;
// }
Ich habe mein "* {" mal deaktiviert weil mir das die obrigen Einstellungen zerstört.
Wie kann ich das Menü so mit CSS definieren, aber den kompletten Rest nur 12px / Verdana?
Danke!
Füge einfach ein "padding: 0" in ul.level-2 ein.
Ich bin einfach mal davon ausgegangen, dass Du CSS kennst. Falls nicht findest Du unter http://de.selfhtml.org/css/eigenschaften/listen.htm mehr Informationen zum formatieren von Listen mit CSS.
MfG, Lars Thalheim
Ja das dachte ich auch, aber das hat nix gebracht...
Versuche es mal damit. Das sollte alle Ränder eliminieren.
ul {
border: none;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
boreder: none;
margin: 0;
padding: 0;
}
Ansonsten poste mal eine URL, wo man sich das ansehen kann. Oder Du postest TYPOSCRIPT, gerendertes HTML (den Browser Quelltext) und CSS.
Danke, jetzt siehts besser aus.
Leider sind die Punkte vor dem Menü nun weg, aber das bekomme ich schon irgenwie hin.
Danke Dir! 😃
Für die Punkte am Listenrand ist die Eigenschaft "list-style-type" zuständig. Wenn Du das raus nimmst, dann sind die Punkte wieder da. Du kannst auch eine andere Form (Viereck, Kreis, Scheibe, eigene Grafik, etc.) definieren.
Mit "list-style-position: inside" kannst Du festlegen, daß der Punkt (das Zeichen) sich innerhalb der <li>-Box befindet, statt ausserhalb.