Horizontales Menü wird vertikal ausgegeben

Hallo,

ich habe ein horizontales Menü programmiert, es wird aber immer vertikal ausgegeben, außerdem lädt Typo3 das Stylesheet das zum Menü gehört nicht. Was habe ich falsch gemacht?

original Quelltext

<body>
<!--###BODY###-->
<div id="seite">


    <img id="Layout" src="Hintergrund_final.png" alt="Hintergrundbild_Wald" />



    <div id="header" style="z-index: 4">
         <div id="baywald">
              <img alt="Logo_BayerischerWald" id="lo" src="logo.png" />
              <img alt="" id="loIE" src="logo.gif" />
         </div>

         <div id="menue">
         </div>
         <div id="submenue">

        <ul id="nav" class="style1">

          <li id="Menue0">
            <div id="home"><a href="#"> Home </a></div>
          </li>

          <li id="Menue1">
            <div id="region"><a href=""> Region </a></div>
              <ul id="nav1"><!--###MENU1###-->
              <li class="borderbottom"> <a href=""> Allgemein </a></li>
              <li class="borderbottom"> <a href=""> Städte</a>
                        <ul class="folder" id="submenue11">
<!--###MENU11###-->
                                <li class="borderbottom"> <a href="">
Regen </a></li>
                                <li class="borderbottom"> <a href="">
Viechtach </a></li>
                                <li> <a href=""> Zwiesel </a></li>
                        <!--###MENU11###--></ul>
                       </li>
              <li class="borderbottom"> <a href=""> Dörfer &
Märkte </a></li>
              <li> <a href=""> Lage </a></li>
              <!--###MENU1###--></ul>
              </li>

          <li id="Menue2">
            <div id="plan"><a href=""> Urlaubsplanung </a></div>
              <ul id="nav2"><!--###MENU2###-->
              <li class="borderbottom"> <a href=""> Highlights </a></li>
              <li class="borderbottom"> <a href=""> Unterkünfte</a>
                        <ul class="folder" id="submenue21">
<!--###MENU21###-->
                                 <li class="borderbottom"> <a href="">
Bauernhöfe </a></li>
                                 <li class="borderbottom"> <a href="">
Ferienhäuser </a></li>
                                 <li class="borderbottom"> <a href="">
Hotel </a></li>
                                 <li class="borderbottom"> <a href="">
Jugendherbergen </a></li>
                                 <li> <a href=""> Campingplatz </a></li>
                        <!--###MENU21###--></ul>
                       </li>

              <li class="borderbottom"> <a href=""> Routenplaner</a>
                        <ul class="folder" id="submenue22">
<!--###MENU22###-->
                                <li class="borderbottom"> <a href=""> Bahn
</a></li>
                                 <li class="borderbottom"> <a href=""> Pkw
</a></li>
                                 <li class="borderbottom"> <a href=""> Bus
</a></li>
                                 <li class="borderbottom"> <a href="">
Flugzeug </a></li>
                                 <li> <a href=""> Fahrrad </a></li>
                        <!--###MENU22###--></ul>
                       </li>
              <li class="borderbottom"> <a href="" target="_blank">
Bärchenerklärung </a></li>
              <li> <a href=""> Bildergalerie </a></li>
              <!--###MENU2###--></ul>
              </li>
          <li id="Menue3">
            <div id="aktiv"><a href=""> Aktivitäten </a></div>
              <ul id="nav3"><!--###MENU3###-->
              <li class="borderbottom"> <a href=""> Highlights </a></li>
              <li class="borderbottom"> <a href=""> Kultur</a>
                             <ul class="folder" id="submenue31"><!--###MENU31###-->
                                <li class="borderbottom"> <a href="">
Museen </a></li>
                                 <li class="borderbottom"> <a href="">
Burgen </a></li>
                                 <li class="borderbottom"> <a href="">
Kirchen & Kapellen </a></li>
                                 <li> <a href=""> Ausstellungen </a></li>
                        <!--###MENU31###--></ul>
                       </li>
              <li class="borderbottom"> <a href=""> Abenteuer Wissen
                <img alt="" id="schmetter" src="Schmetterling_Abenteuer.png" />
                <img alt="" id="schmetterIE" src="Schmetterling_Abenteuer.gif" />
                                                             </a>
                        <ul class="folder" id="submenue32"><!--###MENU32###-->
                                     <li class="borderbottom"> <a href="">
Imker </a></li>
                                 <li class="borderbottom"> <a href="">
Natur </a></li>
                                 <li class="borderbottom"> <a href="">
Freilichtmuseum </a></li>
                                 <li> <a href=""> Glasbläser </a></li>
                        <!--###MENU32###--></ul>
                       </li>
                       <li class="borderbottom"> <a href=""> Grenzenlose
Wildniss</a>
                        <ul class="folder" id="submenue33"><!--###MENU33###-->
                                <li class="borderbottom"> <a href=""> Seen
</a></li>
                                <li class="borderbottom"> <a href="">
Berge </a></li>
                                <li> <a href=""> Nationalpark </a></li>
                        <!--###MENU33###--></ul>
                       </li>
              <li class="borderbottom"> <a href=""> Freizeitpark Churpfalz
</a></li>
              <li class="borderbottom"> <a href=""> Sport</a>
                        <ul class="folder" id="submenue34"><!--###MENU34###-->
                                 <li class="borderbottom"> <a href="">
Bäder </a></li>
                                 <li class="borderbottom"> <a href="">
Wandern </a></li>
                                 <li class="borderbottom"> <a href="">
Reiten </a></li>
                                 <li class="borderbottom"> <a href="">
Skifahren </a></li>
                                 <li class="borderbottom"> <a href="">
Minigolf </a></li>
                                 <li> <a href=""> Radfahren </a></li>
                        <!--###MENU34###--></ul>
                       </li>
              <li class="borderbottom"> <a href=""> Ferienprogramm </a></li>
              <li class="borderbottom"> <a href=""> Tagesveranstaltungen
</a></li>
              <li> <a href=""> Bildergalerie </a></li>
              <!--###MENU3###--></ul>
              </li>
          <li id="Menue4">
            <div id="events"><a href=""> Events </a></div>
              <ul id="nav4"><!--###MENU4###-->
                        <li class="borderbottom"> <a href=""> Highlights
</a></li>
                        <li class="borderbottom"> <a href="">
Monatsübersicht </a></li>
                        <li class="borderbottom"> <a href="">
Tagesübersicht </a></li>
                        <li class="borderbottom"> <a href=""> Theater &
Kabarett </a></li>
                        <li class="borderbottom"> <a href="">
Konzerte</a></li>
                        <li class="borderbottom"> <a href=""> Kino </a></li>
                        <li> <a href=""> Bildergalerie </a></li>
              <!--###MENU4###--></ul>
              </li>

          <li id="Menue5">
            <div id="gast"><a href=""> Gästebuch </a></div>
              <ul id="nav5"><!--###MENU5###-->
              <li class="borderbottom"> <a href=""> Geheimtipps </a></li>
              <li class="borderbottom"> <a href=""> Forum </a></li>
              <li> <a href=""> Gewinnspiele </a></li>
              <!--###MENU5###--></ul>
              </li>

         </ul>
         </div>
    </div>

CSS-Datei

#menue {
        background-color: #FFFFFF;
        width: 57.5em;
        height: 1.75em;
        border: 0.125em solid #6D3816;
        left: 4.1875em;
        top: 4.5625em;
        position: relative;
        z-index: 4;
}

#submenue {
        width: 71.5em;
        height: 1.9em;
        left: 5.1875em;
        top: 5.95em;
        position: absolute;
        z-index: 4;
        line-height:1.5625em;
        font-family: Century Gothic, Helvetica, sans-serif;
        font-size: 0.8125em;
        vertical-align: top;
}

ul {
        padding: 0;
        margin: 0;
        list-style: none;

  }


#Menue1, #Menue2, #Menue3, #Menue4, #Menue0, #Menue5 {
        float: left;
        position: relative;
        width:11.5em;
        text-align:center;
        top: 0.3125em;
        height:2em;
}

li ul {
        background-color: #FFFFFF;
        border: 0.125em solid #6d3816;
        border-top: none;
        display: none;
        padding:0.2em;
        text-align:center;
        margin:auto;
        width:100%;
}

li ul li ul{
        background-color: #FFFFFF;
        border-top: 0.125em solid #6d3816;
        display: none;
        padding:0.125em;
        text-align:center;
        margin:auto;
        width:100%;
}

li > ul {
        top: auto;
        left: auto;
}

a, a:link, a:visited {
        color:#000000;
        text-decoration:none;
        width: 10.625em;

}

a:hover, a.over{
        color:#7ec62a;

}


.borderbottom{
        border-bottom: 0.125em solid #6d3816;
}


#schmetter {
        display:inline;
        height: 1.5625em;
        width: 1.5625em;
        border:none;

}

.folder {
        position: absolute;
        left: 12em;
        margin-top: -1.7em;
}


.folder:hover {
        z-index:10; }

ul ul, li:hover ul ul, li.over ul ul {
        display:none;
        }

li:hover ul,  li.over ul, li:hover li:hover ul, li.over li.over ul {
        display:block;
        }

TypoScript

## Menu [Begin]
lib.subMenu = HMENU
lib.subMenu.entryLevel = 0
lib.subMenu.1 = TMENU
lib.subMenu.1.expAll = 1
lib.subMenu.1.wrap = <ul>|</ul>
lib.subMenu.1.NO {
        wrapItemAndSub = <li>|</li>
}
lib.subMenu.2 = TMENU
lib.subMenu.2.wrap = <ul>|</ul>
#lib.subMenu.2.NO {
#        wrapItemAndSub = <li>|</li>
#}
lib.subMenu.3 = TMENU
lib.subMenu.3.wrap = <ul>|</ul>
lib.subMenu.3.NO {
        wrapItemAndSub = <li>|</li>
}
## Menu [End]


config.spamProtectEmailAddresses = 1

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page


config.doctype (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">)

Ich weiß nichtmehr, was ich machen soll und bin für jede Hilfe dankbar.

hallo,

schwer nachzuvollziehen - das html MIT css, was du hier angegeben hast, produziert ein schickes horizontales menü mit vertikalem drop-down-effekt, OHNE css dagegen eine vertikale liste. dein problem ist also anscheinend wirklich nur das laden des css.

leider gibt´s hierzu kein entsprechendes typoscript von dir. wie baust du das css ein bzw. wie behandelst du den <head> in deinem template-datensatz?
wenn du ein html template verwendest, dann check mal, ob die <link rel="stylesheet"...> angabe im head deiner typo3-seite überhaupt da ist bzw. poste auch mal den ausgegebenen head.

bestes, bonzo

hallo

ich habe das template in typo3 mithilfe der extension templavoila gemacht. der bindet mir auch meine anderen stylesheets ein ( ich habe insgesamt 6 stück) nur biem menü macht er probleme.
wegen voila habe ich bis jetzt auch nichts in meine typoskript drinstehen.
hoffe das hilft #paralyzed#

hm.
also prinzipiell sehe ich hier mehrere mögliche fehlerquellen:

- das menü-css ist nicht korrekt in templavoila eingebunden
- das css ist auf dem falschen ort auf dem server (bzw. gar nicht dort) gespeichert oder anders: der link zum stylesheet ist nicht korrekt
- das css ist formal nicht korrekt
- das css wird von einem anderen css überschrieben, dass die gleichen klassen anders definiert

dagegen hilft:den <head> deiner typo3 ausgabeseite angucken. steht der link zum stylesheet gar nicht da, ist klar, woran´s liegt. steht ein falscher link da (einfach mal im browser checken, ob er da das stylesheet findet), isses auch klar. das das css formal nicht korrekt ist, glaub ich nach dem codesnippet oben eigentlich nicht. und der letzte punkt - naja, ist die navi, die bei dir ausgegeben wird, denn überhaupt in irgendeiner weise stylemäßig formatiert, oder sind das alles blaue times new roman-links?

frohes schaffen,
bonzo

danke erstmal für die hinweise.
mittlerweile bin ich soweit, dass ich festgestellt habe, das typo mir zwar ein paar styles aus dem stylesheet läd aber nicht alles. er übernimmt mir z.b. keine ids in den uls un ils(wie #menu0,#menu1). die schrift und die farbe für die links übernimmt er mir aber.
das ist das was typo aus meinem menu in der html macht:

 div id="submenue"><ul><li><a href="index.php?id=104" onfocus="blurLink(this);"  >Home</a></li><li><a href="index.php?id=cetest_firstpage" onfocus="blurLink(this);"  >Region</a></li><li><a href="index.php?id=89" onfocus="blurLink(this);"  >Urlaubsplanung</a></li><li><a href="index.php?id=88" onfocus="blurLink(this);"  >Aktivitäten</a></li><li><a href="index.php?id=85" onfocus="blurLink(this);"  >Events</a></li><li><a href="index.php?id=155" onfocus="blurLink(this);"  >Gästebuch</a></li><li><a href="index.php?id=159" onfocus="blurLink(this);"  >Impressum</a></li><li><a href="index.php?id=160" onfocus="blurLink(this);"  >Kontakt</a></li><li><a href="index.php?id=161" onfocus="blurLink(this);"  >Sitemap</a></li></ul></div>

[/quote]