Hallo,
habe nur eine kleine Frage als Anfänger:
Wie kann man bei einem reinem TMENU für ein Untermenü einen Positionierungs-Abstand zum Obermenü durchführen?
+ Obermenü
--- Untermenü (diesen Abstand davor also padding-left: 10px)
Wenn ich dieses im CSS angebe sieht es danach so aus
10px + Obermenü
10px ---- Untermenü (also Abstand trotz verschiedener class gleich)
Mein Code:
#Menu 1 cObject
temp.menu_1 = HMENU
temp.menu_1.wrap = <table bgcolor="#D6E3E7" cellpadding="0" cellspacing="0"> | </table>
temp.menu_1.1 = TMENU
temp.menu_1.1 {
NO{
allWrap = <tr>|</tr>
linkWrap = <td height="20" class="menu1-level1-no">|</td>
beforeImg = fileadmin/template/main/images/nav_pf_h.gif
beforeWrap = <td height="20" class="menu1-level2-no">|</td>
}
ACT = 1
ACT{
allWrap = <tr>|</tr>
linkWrap = <td height="20" class="menu1-level1-act">|</td>
beforeImg = fileadmin/template/main/images/nav_pf_h.gif
beforeWrap = <td height="20" class="menu1-level2-no">|</td>
}
}
temp.menu_1.2 = TMENU
temp.menu_1.2 {
NO{
allWrap = <tr>|</tr>
linkWrap = <td width="20" class="menu1-level2-no">|</td>
beforeImg = fileadmin/template/main/images/nav_pf_s.gif
beforeWrap = <td height="20" class="menu1-level2-no">|</td>
}
ACT = 1
ACT{
allWrap = <tr>|</tr>
linkWrap = <td width="20" class="menu1-level2-act">|</td>
beforeImg = fileadmin/template/main/images/nav_pf_s.gif
beforeWrap = <td height="20" class="menu1-level2-no">|</td>
}
Wer kann mir einen Tip geben
Gruß
Stefan
Probier mal im CSS:
display: block
oder realisiere das Menü in CSS mit ul/li
Jochen Weiland
display: block;
hatte ich zwar schon drin nur im Untermenü-Css hatte ich es vergessen, Danke für deinen Tip.
Nun kommt es aber zu folgendem Problem:
Schaut einfach mal selbst:
http://www.cegedim.de/navi.gif
(Nur ein Foto, da Typo im Intranet liegt)
Meine Navi-CSS
/* menue linke seite */
#menu a {display: block;
background-color:#D5E0E6;
color:#000080;text-decoration:none;font-family:verdana, sans-serif; font-size: 9pt; width:120px;
border-bottom:solid 1px #d5e0e6;
padding-left: 4px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
}
#menu a:visited{background-color:#D5E0E6;
color:#000080;text-decoration:none;font-family:verdana, sans-serif; font-size: 9pt; width:120px;
border-bottom:solid 1px #d5e0e6;
padding-left: 4px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
display: block;
}
#menu a:active{background-color:#D5E0E6;
color:#000080;text-decoration:none;font-family:verdana, sans-serif; font-size: 9pt; width:120px;
border-bottom:solid 1px #d5e0e6;
padding-left: 4px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
display: block;
}
#menu a:hover {background-color:#ffffff;
color: #004080;
text-decoration:none ;font-family:verdana, sans-serif; font-size:9pt;
width:120px;
border-bottom:dotted 1px #000000;
padding-left: 4px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
display: block;
}
#menu .menu1-level1-no{
border-bottom: 1px dottedt #e6e6e6;
font-size: 11px;
padding-top: 0px;
padding-left: 0px;
display: block;
}
#menu .menu1-level1-act{
border-bottom: 1px dottedt #e6e6e6;
font-weight:bold;
font-size: 11px;
padding-top: 0px;
padding-left: 0px;
padding-right:0px;
filter:alpha(opacity='70', style='0');
display: block;
}
#menu .menu1-level1-act A{
padding-right:0px;
}
#menu .menu1-level2-no{
font-size: 10px;
padding-top: 0px;
padding-left: 10px;
display: block;
}
#menu .menu1-level2-act{
font-size: 10px;
font-weight:bold;
padding-top: 0px;
padding-left: 10px;
}
#menu .table{
margin-left:0px;
display: block;
}
/* menütitel */
.rubrik {background-image:url(images/balken.jpg); font-weight:bold;
color: black; text-decoration:none ;font-family:verdana, sans-serif; font-size: 10pt;width:140px;
border-bottom:solid 1px #000000;
height:22px;
}
Hallo zusammen!
Ich möchte keineswegs über CSS herziehen, jedoch habe ich schreckliche Erfahrung gemacht, was Navigations-Abstands-Gebastel mit CSS und unterschiedlichen Browsern angeht.
Löse das ganze doch schon während dem Menu-Wrap, in deinem TypoScript! Du kannst je für temp.menu_1.1 und auch Level2 pro Menüpunkt dies machen:
linkWrap = <td height="1" width="10"><img src="directory/spacer.gif" height="1" width="10" border="0"></td><td height="20" class="menu1-level1-no">|</td>
beforeImg = fileadmin/template/main/images/nav_pf_h.gif
beforeWrap = <td height="1" width="40"><img src="directory/spacer.gif" height="1" width="40" border="0"><td height="20" class="menu1-level2-no">|</td>
Ich habe Dir jeweils ein weiteres <td> vor <td class="menu1-level1-no">, etc. reingepackt. Wenn du für Level1- und Level2- Menüpunkte jeweils mein reingepacktes <td> mit dem img-Tag variierst, sind die Zellen deiner Menütabelle in TypoScript unterschiedlich gross.
Was auch möglich wäre, ist dies:
allWrap = <tr>|</tr>
linkWrap = <td height="20" class="menu1-level1-no">|</td>
beforeImg = fileadmin/template/main/images/nav_pf_h.gif
beforeWrap = <td height="20" class="menu1-level2-no">|</td>
Sei Dir einfach bewusst, dass Du deine HTML-Tabelle als Menü zu nutze machen kannst.
Falls obiges nicht klappt, benutze mehrere <td>-Tags, und verknüpfe sie mit "colspan".
Greez Toyde
Der Trend geht generell weg von dem Tabellen-Missbrauch als Layout-Hilfe hin zu reinen CSS Seiten (u.a. für barrierefreies Design).
Es ist sehr wohl möglich, auch komplexe Menüs mit CSS für alle möglichen Browser zu realisieren.
Jochen Weiland
Deswegen wollte ich ja alles komplett in CSS realisieren, da
ich das Layout gerne alleine für alles anpasse.
Nur weißt Du wie ich das Problem mit CSS beseitigen kann ?
Ich müsste mir das mal im Detail anschauen, dazu fehlt mir nur momentan die Zeit.