Hallo,
bin Anfänger mit typo 3 und versuche ein horizontales menu zu basteln. Es wird allerdings immer vertikal dargestellt.
Hier der Code im template
seite = PAGE
seite{
typeNum = 0
bodyTag = <body bgColor = "#FFFFFF">
stylesheet = fileadmin/basic.css
meta.DESCRIPTION = Beschreibung
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/index.html
10.workOnSubpart = DOKUMENT
10.marks{
mitte_header = TEXT
mitte_header.value = Guten Tag!
menu_links = IMAGE
menu_links.file = fileadmin/images/artist_1.gif
menu_oben = HMENU
menu_oben.special = directory
menu_oben.special.value = 9
menu_oben.1 = TMENU
menu_oben.1.NO = 1
menu_oben.1.ATagParams = id="menu ul li "
menu_oben.1.NO.allWrap =<ul><li> | </li></ul>
}
}
Hier der Codes aus der HTML- Datei:
<body><!-- ###DOKUMENT### begin -->
<div id="header"><div id="logo"><a href="./index.html"><img alt="home" src="./fileadmin/images/logo.gif" border="0" /></a></div></div>
<div id="menu">
###menu_oben###
</div>
<div id="frame">
<div id="ch">###mitte_header###</div>
<div id="lc">###menu_links###</div>
<div id="cc">
###mitte_content### </div>
<div id="rci">
###box_content###
</div>
</div>
<br clear="all" />
</div>
<!-- ###DOKUMENT### end-->
</body>
</html>
Und hier aus dem stylesheet:
#menu {
border: #c0c0c0 1px solid;
padding: 3px 0px 3px 0px;
position: relative;
background-color: #879186;
font-size: 12px;
}
#menu ul {
margin: 0px;
padding: 0px 0px 23px 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height:1.2em;
list-style-type: none;
text-align: center;
}
#menu ul li {
margin: 2px 0px;
border-right: #000 2px solid;
padding: 1px 0px 1px 7px;
font-weight: bold;
width: 10em;
float: left;
}
#menu ul li.last {
border-right-style: none;
}
#menu ul li a.first {
background: url(./images/zeiger_h_u.gif) no-repeat;
background-color: #879186;
color: #fff;
padding: 1px 0px 1px 25px;
float: left;
display: block;
text-decoration: none;
}
Wenn einer ne Idee hat bitte ich um eine Rückmeldung.
hallo,
ich würde statt <ul> und <li> einfach <span class="..">
schreiben
Hi,
erst einmal Vielen Dank!! Habe es inzwischen selbst rausgefunden: Habe das ul Tag einfach in die index.html gepackt.(s.u.)
html-quelltext:
<div id="menu"><ul>###menu_oben###</ul></div>
<div id="frame">
<div id="ch">###mitte_header###</div>
<div id="lc">###menu_links###</div>
<div id="cc">
###mitte_content### </div>
<div id="rci">
###box_content###
</div>
</div>
css-angaben (aus dem stylesheet):
#menu {
border: #c0c0c0 1px solid;
padding: 3px 0px 3px 0px;
position: relative;
background-color: #879186;
font-size: 12px;
}
#menu ul {
margin: 0px;
padding: 0px 0px 23px 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height:1.2em;
list-style-type: none;
text-align: center;
}
#menu ul li {
margin: 2px 0px;
border-right: #000 2px solid;
padding: 1px 0px 1px 7px;
font-weight: bold;
width: 10em;
float: left;
}
#menu ul li.last {
border-right-style: none;
}
#menu ul li a.first {
background: url(./images/zeiger_h_u.gif) no-repeat;
background-color: #879186;
color: #fff;
padding: 1px 0px 1px 25px;
float: left;
display: block;
text-decoration: none;
}
#menu ul li a {
background: url(./images/zeiger_h_r_t.gif) no-repeat;
color: #fff;
background-color: #879186;
padding: 1px 0px 1px 25px;
float: left;
text-decoration: none;
}
#menu ul li a.first:hover {
background: url(./images/zeiger_h_u.gif) no-repeat;
background-color: #879186;
color: #fff;
padding: 1px 0px 1px 25px;
float: left;
}
#menu ul li a:hover {
background: url(./images/zeiger_h_r.gif) no-repeat;
}
Typo3-script:
seite = PAGE
seite{
typeNum = 0
bodyTag = <body bgColor = "#FFFFFF">
stylesheet = fileadmin/basic.css
meta.DESCRIPTION = Beschreibung
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/index.html
10.workOnSubpart = DOKUMENT
10.marks{
mitte_header = TEXT
mitte_header.value = Guten Tag!
menu_links = IMAGE
menu_links.file = fileadmin/images/artist_1.gif
menu_oben = HMENU
menu_oben.special = directory
menu_oben.special.value = 9
menu_oben.1 = TMENU
menu_oben.1.NO = 1
menu_oben.1.NO.allWrap = <li> | </li>
mitte_content = CONTENT
mitte_content {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}
}
}
Ergebnis: http://p6127.typo3server.info/index.php?id=8
Es bleibt aber zwei Probleme:
1. Der letzte (durch css deiniert) senkrechte Strich muss weg (im CSS durch #menu ul li.last {
border-right-style: none;}
2. Bei der Seite Leistungen zb (und bei allen anderen sollte nach Aufruf ein permanentes Dreieck erscheinen. Im Css durch das #menu ul li a.first abgedeckt. Aber wie kann ich das für jede Seote dynamisch erzeugen??
Für jede Antwort bin ich Euch dankbar!!
Hallo balboa,
versuche mal, im CSS einen Eintrag fürs Menü mit ":active" (statt ":hover") zu ergänzen, in dem deine Grafik definiert ist.
Was den senkrechten Strich angeht, schau dir mal den Abschitt "Option Split" (Neue Doku von Robert Meyer, S. 69) an. Das müsste dir weiterhelfen.
Ich hoffe, dass es hilft. 🙂
Gruß,
Marcus