Hallo zusammen,
ich hoffe hier kann mir jemand helfen.
Ich soll in ein bestehendes Projekt ein Dropdownmenü einbauen.
Als Newbie in Sachen Typo und Co ist das schwerer als gedacht.
Hier mal meine Quellcodes:
HTML:
<div class="btn1">
<div class="left_btn_panel"></div>
<div class="btn_mid">
<div class="mattblacktabs">
<ul>
<!-- ###NAVIGATION### -->
###NAVIGATION###
<!-- ###NAVIGATION### -->
</ul>
</div>
</div>
CSS:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#all {
width: 780px;
}
#main {
margin-top:20px;
border: 1px solid #333333;
width: 780px;
pofloat: left;
}
#main_all {
float: left;
width: 737px;
padding-top: 0px;
padding-right: 18px;
padding-bottom: 18px;
padding-left: 25px;
}
#bnr {
float: left;
height: 212px;
width: 722px;
margin-bottom: 10px;
}
#logo {
float: left;
height: 100px;
width: 50px;
margin-top: 35px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.com_name {
padding-top: 0px;
float: right;
height: 40px;
width: 500px;
margin-top: 15px;
padding-top: 15px;
padding-left: 50px;
font-family: arial;
font-size: 12px;
font-weight: bold;
color: #808080;
}
.btn {
float: left;
height: 40px;
width: 255px;
margin-top: 40px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
font-family: arial;
font-size: 12px;
color: #000000;
}
.left_upper {
float: left;
height: 10px;
width: 212px;
background-image: url(images/upper.jpg);
font-size: 8px;
}
.left_lower {
float: left;
height: 10px;
width: 212px;
background-image: url(images/lower.jpg);
margin-bottom: 15px;
}
.left_mid {
float: left;
width: 210px;
font-family: arial;
font-size: 8px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #b2b2b2;
border-left-color: #b2b2b2;
}
.news_hd {
float: left;
height: 25px;
width: 190px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-family: arial;
font-size: 16px;
color: #006699;
}
.news_matter {
float: left;
width: 190px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.btn1 {
float: left;
height: 30px;
width: 722px;
margin-bottom: 10px;
}
.about_matter{
float: left;
width: 682px;
margin-bottom: 10px;
margin-top: 10px;
font-family: arial;
font-size: 12px;
color: #000000;
line-height: 18px;
padding-right: 20px;
padding-left: 20px;
}
.btn_mid {
float: left;
height: 34px;
width: 678px;
background-color: #808080;
}
.left_btn_panel {
background-image: url(images/left_bt.jpg);
float: left;
height: 34px;
width: 22px;
}
.right_btn_panel {
background-image:
url(images/right.jpg);
float: left;
height: 34px;
width: 22px;
}
.mattblacktabs{
width: 100%;
overflow: hidden;
}
.matter {
float: left;
height: 35px;
width: 702px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.left_content {
float: left;
width: 212px;
padding-left: 0px;
margin-right: 20px;
margin-top: 0px;
}
.about_content {
float: left;
width: 430px;
padding-left: 20px;
margin-right: 0px;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 18px;
padding-right: 20px;
}
.right_content {
float: left;
width: 430px;
height: 450px;
overflow:auto;
padding-left: 20px;
font-family: arial;
font-size: 12px;
color: #000000;
line-height: 18px;
padding-right: 15px;
}
.date {
font-family: arial;
font-size: 16px;
color: #006699;
float: left;
width: 100%;
height: 14px;
font-weight: bold;
margin-bottom: 5px;
}
.news {
font-family: arial;
font-size: 12px;
color: #000;
float: left;
width: 100%;
margin-bottom: 20px;
line-height: 20px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #808080;
}
.mattblacktabs ul{
margin: 0;
padding-left: 15px;
font: 14px arial;
padding-top: 0;
padding-bottom: 0;
}
.footer {
float: left;
height: 8px;
width: 95%;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-family: arial;
font-size: 12px;
color: #000000;
background-color: #808080;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
color: white;
background: #808080;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 9px;
padding-left: 25px;
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: #333333;
display:block;
}
TYPO3:
#Default PAGE object
page = PAGE
page.typeNum = 0
#CSS Datei integrieren
page.includeCSS.file1 = fileadmin/style.css
#page.includeJS.file1 = fileadmin/mausover.js
#Template einbinden
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/index.html
}
#CONTENT1-Marker definieren
page.10.marks.CONTENT< styles.content.get
#Text Menü im NAVIGATION-Marker erzeugen
page.10.marks.NAVIGATION = HMENU
page.10.marks.NAVIGATION.excludeUidList = 57,53,54,58
page.10.marks.NAVIGATION {
# Erste Ebene als Textmenü
# Erste Ebene als Textmenü
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.wrapItemAndSub = <li>|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
}
2 = TMENU
2 {
wrap = <ul class="menu">|</ul>
}