von was sprichst du denn? am mittwoch wird nicht geraten 😃
Menu CSS li/lu in typo einbinden
lol 😃
ich meine ich sehe keine veränderung ...
😢
also ich muss doch ts so konfigurieren das der Inhalt der li elemente mit dynamischen inhalt gefüllt werden.
was ich schonmal nicht verstehe ist das in einem Buchbeispiel(typo3-kai laborenz)
eigentlich unnötig viele markups im htmlcode eingefügt wurden:
Zitat:
<td id="menu_1">
<div class="menu1-level1-no"><a href="#">Menu item 1</a></div>
<div class="menu1-level1-no"><a href="#">Menu item 2</a></div>
<div class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></div>
<div class="menu1-level2-no"><a href="#">Level 2 item</a></div>
<div class="menu1-level2-no"><a href="#">Level 2 item</a></div>
<div class="menu1-level2-act"><a href="#">Level 2 item (act)</a></div>
<div class="menu1-level1-no"><a href="#">Menu item 2</a></div>
</td>
hätten da nicht einfach zwei von diesen Zeilen gereicht..??
Mit meinen li Elementen wäre es doch jetzt das selbe Spiel:
ich habe die li und ul elemente per css gestylet, und jetzt muss ich doch nur noch den Inhalt der li's füllen(dazu wrap ich wie indem Bspl.)
Jetzt wäre doch noch zu klären wenn einer der menupunkte aktiv ist also 'act'
und das sich auf einen klick von einem menu ein submenu öffnet.
also bei der div Variante kann ich das ja noch einigermaßen nachvollziehen, aber bei dem listenmenu nicht mehr.
Vorallem wer bestimmt den wo ein li und wo ein ul element erzeugt wird, typo doch wohl, aber warum definiere ich sie dann in der html-file ..?
Oder dienen die wirklich nur der reinen formatierung?
Alles in allem ein großes Fragezeichen....
Hilfe!!!
Lg
Jenny
hallo...
kann mir keiner etwas helfen... 😢
lg
jenny
page.10.marks.MENU
page.10.marks.MENU {
special = directory
special.value = 5
1 = TMENU
1 {
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
wie binde ich denn hier den act zustand mit ein ??
Lg
Jenny
Lad dir die deutsche Einsteiger-Doku runter:
http://www.typo3.net/literatur_zu_typo3/
da wirds einfach und klar erklärt...
hi
kopier dir mal meine navi rein. ich hab drei horizontale und eine verschachtelte vertikale.
horizontal 1:
temp.mainnavi = HMENU
temp.mainnavi.special = directory
temp.mainnavi.special.value = 16
temp.mainnavi.entryLevel = 1
temp.mainnavi.1 = TMENU
temp.mainnavi.1 {
wrap = <ul id="mainnavi">|</ul>
# Normalzustand
NO {
wrapItemAndSub = <li>|</li>
stdWrap.case = lower
}
ACT < .NO
ACT{
wrapItemAndSub = <li id="mainnavi_aktiv">|</li>
}
ACT = 1
horizontal zwei bzw. die subnavi von der ersten:
temp.mainnavi_sub = HMENU
temp.mainnavi_sub.entryLevel = 2
temp.mainnavi_sub.1 = TMENU
temp.mainnavi_sub.1.wrap = <ul id="mainnavi_sub">|</ul>
# Normalzustand
temp.mainnavi_sub.1.NO.wrapItemAndSub = <li>|</li>
#Aktivzustand
temp.mainnavi_sub.1.ACT = 1
temp.mainnavi_sub.1.ACT.wrapItemAndSub = <li id="mainnavi_sub_aktiv">|</li>
jetzt die dritte navi links bei mir:
temp.subnavi_h0 = HMENU
temp.subnavi_h0.special = list
temp.subnavi_h0.special.value = 14
temp.subnavi_h0.maxItems = 1
temp.subnavi_h0.1 = TMENU
temp.subnavi_h0.1 {
# Normalzustand
NO {
ATagParams = class="subnavigation"
linkWrap = <div id="subnavi_dot1"><img src="fileadmin/template/bilder/dot.jpg" alt="" border="0" /></div><div id="subnavi_h0">|</div>
}
ACT < .NO
ACT{
ATagParams = class="subnavigation_aktiv"
linkWrap = <div id="subnavi_dot1"><img src="fileadmin/template/bilder/dot_aktiv.jpg" alt="" border="0" /></div><div id="subnavi_h0">|</div>
}
ACT = 1
und jetzt die verschachtelte vertikale navi:
temp.subnavi_sub = HMENU
temp.subnavi_sub.entryLevel = 2
temp.subnavi_sub.1 = TMENU
temp.subnavi_sub.1.wrap = <ul id="subnavi_sub">|</ul>
# Normalzustand
temp.subnavi_sub.1.NO.wrapItemAndSub = <li>|</li>
#Aktivzustand
temp.subnavi_sub.1.ACT = 1
temp.subnavi_sub.1.ACT.wrapItemAndSub = <li id="subnavi_sub_aktiv">|</li>
temp.subnavi_sub.2 = TMENU
temp.subnavi_sub.2.wrap = <ul id="subnavi_sub_sub">|</ul>
# Normalzustand
temp.subnavi_sub.2.NO.wrapItemAndSub = <li>|</li>
#Aktivzustand
temp.subnavi_sub.2.ACT = 1
temp.subnavi_sub.2.ACT.wrapItemAndSub = <li id="subnavi_sub_sub_aktiv">|</li>
ich hoffe du kommst damit klar
gruß
achso mein css sieht so aus:
/*-----------------------------Mainnavi-----------------------------------------------*/
#mainnavi_pos {
position: absolute;
z-index: 65;
height: 21px;
width: 759px;
left: 215px;
top: 138px;
background-color:#fdf1b2;
}
ul#mainnavi {
margin: 0px; padding: 0px;
text-align: left;
border: 0px;
}
ul#mainnavi li {
list-style: none;
display: inline;
margin: 0px; padding: 0px;
padding-left:11px;
padding-top:5px;
padding-right:11px;
height:21px;
}
ul#mainnavi li a{
color:#c91315;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}
ul#mainnavi li a:hover{
color:#000000;
}
ul#mainnavi li#mainnavi_aktiv {
background-color:#fad200;
list-style: none;
margin: 0px; padding: 0px;
padding-left:11px;
padding-bottom:2px;
padding-right:11px;
}
* html ul#mainnavi li#mainnavi_aktiv {
background-color:#fad200;
list-style: none;
display: inline;
margin: 0px; padding: 0px;
height:21px;
padding-left:11px;
padding-top:5px;
padding-right:11px;
}
ul#mainnavi li#mainnavi_aktiv a{
color:#000000;
}
/*-----------------------------------Mainnavi_SUB--------------------------*/
#mainnavi_sub_pos {
position: absolute;
z-index: 60;
height: 21px;
width: 788px;
left: 215px;
top: 159px;
background-color: #fad200;
}
ul#mainnavi_sub {
margin: 0px; padding: 0px;
text-align: left;
border: 0px;
}
ul#mainnavi_sub li {
list-style: none;
display: inline;
margin: 0px; padding: 0px;
padding-left:11px;
padding-right:11px;
padding-top:5px;
height:21px;
}
ul#mainnavi_sub li a{
color:#c91315;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}
ul#mainnavi_sub li a:hover{
color:#000000;
}
ul#mainnavi_sub li#mainnavi_sub_aktiv {
background-color:#fad200;
list-style: none;
display: inline;
margin: 0px; padding: 0px;
height:21px;
padding-left:11px;
padding-top:5px;
padding-right:11px;
}
ul#mainnavi_sub li#mainnavi_sub_aktiv a{
color:#000000;
}
/*------------------------------Subnavi-----------------------------------------------*/
#subnavi_dot1{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 15px;
top: 167px;
}
#subnavi_dot2{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 52px;
top: 167px;
}
#subnavi_dot3{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 88px;
top: 167px;
}
#subnavi_dot4{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 125px;
top: 167px;
}
#subnavi_dot5{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 162px;
top: 167px;
}
#subnavi_h0 {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 16px;
top: 167px;
}
#subnavi_2m {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 50px;
top: 167px;
}
#subnavi_n {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 92px;
top: 167px;
}
#subnavi_tt {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 126px;
top: 167px;
}
#subnavi_z {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 167px;
top: 167px;
}
a.subnavigation, a.subnavigation:hover, a.subnavigation:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
}
a.subnavigation_aktiv, a.subnavigation_aktiv:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color: #000000;
font-weight:bold;
text-decoration:none;
}
/*------------------------------------------Subnavi_SUB---------------------------------*/
#subnavi_sub_pos{
position: absolute;
z-index: 95;
left: 0px;
top: 237px;
}
ul#subnavi_sub {
font-size: 10px;
float: left; width: 209px;
margin: 0px;
padding: 0px;
border: 0px;
/*backcolor-color: #c91315;*/
}
ul#subnavi_sub li {
list-style: none;
margin: 0px; padding: 0px;
margin-bottom: 2px;
}
ul#subnavi_sub li a {
display: block;
padding-left: 22px;
padding-top:2px;
font-weight: bold;
background-color: #f9ce00;
text-decoration:none;
color: #c91315;
font-size: 10px;
height: 17px;
}
ul#subnavi_sub li a:hover {
color: #c91315; background-color: #fdf1b2;
padding-left:22px;
}
ul#subnavi_sub li#subnavi_sub_aktiv a {
display: block;
padding-left: 22px;
padding-top:2px;
font-weight: bold;
background-color: #fdf1b2;
text-decoration:none;
color: #000000;
font-size: 10px;
height: 17px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub {
display: block;
padding:0px;
margin:0px;
padding-top:2px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub li a{
display: block;
padding-left: 33px;
padding-top:2px;
font-weight:normal;
background-color: #f9ce00;
text-decoration:none;
color: #c91315;
font-size: 10px;
height: 17px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub li#subnavi_sub_sub_aktiv a{
display: block;
padding-left: 33px;
padding-top: 2px;
font-weight:normal;
background-color: #f9ce00;
text-decoration:none;
color: #000000;
font-size: 10px;
height: 17px;
background-image: url(../bilder/subnavi_pfeil.gif);
background-repeat: no-repeat;
background-position: 22px 6px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub li a:hover{
color: #c91315;
background-image: url(../bilder/subnavi_pfeil.gif);
background-repeat: no-repeat;
background-position: 22px 6px;
}
#subnavi_verlauf{
position: absolute;
z-index: 90;
left: 0px;
top: 237px;
}
Danke,
habe mir die Dokumentation durchgelesen, aber auf den ACT wird nicht wirklich eingegangen.
Ich habe aber ein neues Problem:
Und zwar werden meine Unterpunkte nicht ausgegeben.
Bevor ich die Seiten weiter verschachtelt habe, wurden die Untermenupunkte noch angezeigt.(entylevel=1)
Hier mal mein Seitenbaum:das template ist im 'root'
Bild: film-akademie.com/test.gif
Nun habe ich folgendes TS:
page = PAGE
page.typeNum = 0
page.includeCSS{
file1 = menu*.css
file2 = css_mod*.css
}
[browser = msie]
page.includeCSS{
file3 = ie*.css
[GLOBAL]
page.bodyTag = <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" id="bg">
page.10 = TEMPLATE
page.10{
template = FILE
template.file=eqt*.html
workOnSubpart = DOCUMENT_BODY
subparts.CONTENT < styles.content.get
subparts.CONTENT.wrap = <div style="padding:5px"> | </div>
subparts.MODULE < styles.content.getRight
subparts.MODULE.wrap = <div style="padding:5px"> | </div>
subparts.MAIN_MENU = HMENU
subparts.MAIN_MENU{
special = directory
special.value = 14
entryLevel = 0
1 = TMENU
1 {
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
ACT.allWrap = <li class="active">|</li>
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
marks.PATHWAY = TEXT
marks.PATHWAY.field = subtitle//title
subparts.FOOTER_MENU = HMENU
subparts.FOOTER_MENU.wrap = <div class="footer">|</div>
subparts.FOOTER_MENU.1 = TMENU
subparts.FOOTER_MENU.1.NO.linkWrap = | | |*| | | |*| |
subparts.FOOTER_MENU.1.NO.ATagParams = class="links"
}
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes{
P.style = class = txt}
Es wäre echt supernett wenn mir jemand helfen könnte...
Lg
Jenny
vielleicht was mit dem entryLevel falsch??
war jetzt nur so ne Vermutung....
Greetz
versuch es mal über dein autoparser template bzw. dort zu steuern wo du den suppart einbindest über ne id abfrage:
[PIDinRootline = 16]
temp.mainTemplate.subparts.mainnavi_sub < temp.mainnavi_sub
[GLOBAL]
Oh Gott...
ich glaube ich verstehe nicht ganz was du meinst, vielleicht kannst dus mir als newbie etwas einfacher sagen..?
Lg
jenny