Ergebnis 1 bis 13 von 13
  1. #1
    TimeForGold ist offline Jungspund
    registriert
    02-08-2007
    Beiträge
    12

    Menü soll Inhalt überlagern

    Hallo Zusammen,

    ich arbeite gerade an ein aufklappbares Menü. Mein Problem ist, das das Untermenü nicht den Inhalt überdeckt, sondern das Menü oder den in der höhe streckt. Es gibt da die Möglichkeit des z-indexes, welches aber die Angaben von Positionen mit sich zieht. Da Position je nach Auflösung variiert, ahbe ich damit meine Schwierigkeiten. Vielleicht habt ihr eine recht simple Lösung.

    Das ist der Eintrag aus meinem externen Stylesheet:

    Code:
    .bereich{
    z-index:2;
    position:absolute;
    display: block;
    color: #FFFFFF;
    background-color: #000000;
    text-align: center;
    }
    HTML (leider nicht mit diesem Editor eingebuden, da dort alle Umbrüche entfernt wurden):

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <title>Deutsch - T&uuml;rkischer Mediatag</title>
      <link rel="stylesheet" type="text/css" href="style/medya.css">
      
     <script type="text/javascript">
     
    // Shows and hides elements
    function anzeigen(element)
    {
      if(document.getElementById(element).style.display=='none')
      {
        document.getElementById(element).style.display='block';
      } 
      else
      {
        document.getElementById(element).style.display='none';
      }
    }
    
    
    </script>
    
     
      </head>
      <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
      <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td>&nbsp;</td>
          <td width="800" align="center" valign="top">
            <table border="1" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td>Grafik</td>
              </tr>
              <tr>
                <td><table border="1" cellspacing="0" cellpadding="0" width="100%">
                  <tr>
                    [B]<td width="160" align="center" bgcolor="#cd071e"><a href="#"><div class="menu" onMouseOver="javascript:anzeigen('menu_1');" onMouseOut="javascript:anzeigen('menu_1');">Um was es geht?</a>
                      <!-- 1 Submenu -->
                      <span id="menu_1" style="display:none;">
                      <table border="1" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td><a href="#">Thema</a></td>
                          </tr>
                          <tr>
                            <td><a href="#">Warum</a></td>
                          </tr>
                          <tr>
                            <td><a href="#">F&uuml;r wen</a></td>
                          </tr>
                      </table>
                      </span>
                      </div>
                    </td>[/B]
                    <td width="160" align="center" bgcolor="#a9121c"><a href="#">Agenda</a></td>
                    <td width="160" align="center" bgcolor="#811518"><a href="#">Buchung</a></td>
                    <td width="160" align="center" bgcolor="#5d1213"><a href="#">Anreise</a></td>
                    <td width="160" align="center" bgcolor="#484344"><a href="#">Kontakt/Impressum</a></td>
                  </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td align="left" valign="top">Inhalt</td>
              </tr>
            </table>
          <td>&nbsp;</td>
        </tr>
      </table>
      
                    
      </body>
    </html>

    Um die Problematik zu veranschaulichen ein Screenshot:



    Recht vielen Dank für Eure Hilfe.
    Geändert von dkdenz (19-08-2008 um 13:03 Uhr) Grund: Code-Tags hinzugefügt...

  2. #2
    Avatar von bug13
    bug13 ist offline Mitglied
    registriert
    04-08-2008
    Beiträge
    28

    AW: Menü soll Inhalt überlagern

    Hallo TimeForGold,

    schau dir mal folgende Lösungen an:

    CSS dropdown Menu - Google-Suche
    Stu Nicholls | CSSplay | A CSS only dropdown menu v2 (siehe Quelltext)
    pixelspread: CSS Drop Down Menu
    Dynamic Drive DHTML Scripts- Chrome CSS Drop Down Menu

    Vielleicht ist da ja was brauchbares für dich dabei.

    Das Problem bei deiner Lösung liegt meiner Meinung nach in der Verwendung von viel zu vielen Tabellen.

    LG
    bug13
    www.kununu.com - Die Jobs, die wir lieben!

  3. #3
    TimeForGold ist offline Jungspund
    registriert
    02-08-2007
    Beiträge
    12

    AW: Menü soll Inhalt überlagern

    Danke für die gute Hilfe. Ich habe ein Menü von Stu Nicholls | CSSplay | A CSS only dropdown menu v2 verwendet. Leider klappt das Menü nicht im IE7 auf.

    Kann man da jemand weiterhelfen, kenne mich leider mit CSS-Hacks nicht aus, evtl. fehlen dort welche, wobei ich den CSS-Teil eins-zu-eins kopiert habe. Kann jemand mal schauen ob ich was falsch gemacht habe?

    CSS
    HTML-Code:
    /* style the outer div to give it width */
    .menu {
    width:750px; 
    font-size:0.85em;
    padding-bottom:200px;
    }
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    }
    .menu ul ul {
    width:150px;
    }
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .menu li {
    float:left;
    width:150px;
    position:relative;
    }
    /* style the links for the top level */
    .menu a, .menu a:visited {
    display:block;
    font-size:11px;
    text-decoration:none; 
    color:#fff; 
    width:139px; 
    height:30px; 
    border:1px solid #fff; 
    border-width:1px 1px 0 0; 
    background:#758279; 
    padding-left:10px; 
    line-height:29px;
    }
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .menu a, * html .menu a:visited {
    width:150px;
    w\idth:139px;
    }
    
    /* style the second level background */
    .menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#949e7c;
    }
    /* style the second level hover */
    .menu ul ul a.drop:hover{
    background:#c9ba65;
    }
    .menu ul ul :hover > a.drop {
    background:#c9ba65;
    }
    /* style the third level background */
    .menu ul ul ul a, .menu ul ul ul a:visited {
    background:#e2dfa8;
    }
    /* style the third level hover */
    .menu ul ul ul a:hover {
    background:#b2ab9b;
    }
    .menu ul ul ul :hover > a {
    background:#b2ab9b;
    }
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    height:0;
    top:31px;
    left:0; 
    width:150px;
    }
    /* another hack for IE5.5 */
    * html .menu ul ul {
    top:30px;
    t\op:31px;
    }
    
    /* position the third level flyout menu */
    .menu ul ul ul{
    left:150px; 
    top:0;
    width:150px;
    }
    /* position the third level flyout menu for a left flyout */
    .menu ul ul ul.left {
    left:-150px;
    }
    
    /* style the table so that it takes no part in the layout - required for IE to work */
    .menu table {position:absolute; top:0; left:0;}
    
    /* style the second level links */
    .menu ul ul a, .menu ul ul a:visited {
    background:#d4d8bd; 
    color:#000; 
    height:auto; 
    line-height:1em; 
    padding:5px 10px; 
    width:129px
    /* yet another hack for IE5.5 */
    }
    * html .menu ul ul a{
    width:150px;
    w\idth:129px;
    }
    
    
    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover{
    color:#fff; 
    background:#949e7c;
    }
    .menu :hover > a, .menu ul ul :hover > a {
    color:#fff;
    background:#949e7c;
    }
    
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul{
    visibility:visible; 
    }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level hidden when you hover on second level list OR link */
    .menu ul :hover ul :hover ul ul{
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ 
    visibility:visible;
    }
    /* make the fourth level visible when you hover over third level list OR link */
    .menu ul :hover ul :hover ul :hover ul { 
    visibility:visible;
    }


    Html
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <title>Deutsch - T&uuml;rkischer Mediatag</title>
      <link rel="stylesheet" type="text/css" href="style/medya.css">
      </head>
      <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
      <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td>&nbsp;</td>
          <td width="800" align="center" valign="top">
            <table border="1" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td>Grafik</td>
              </tr>
              <tr>
                <td align="center" valign="top">
                <div class="menu">
                  <ul>
                  <li><a href="#">Um was es geht?<!--[if IE 7]><!--></a><!--<![endif]-->
                    <ul>
                    <li><a href="#">Thema</a></li>
                    <li><a href="#">Warum</a></li>
                    <li><a href="#">F&uuml;r wen</a></li>
                    </ul>
                  
                  </li>
                  </ul>
                </div>
                </td>
              </tr>
              <tr>
                <td align="left" valign="top">Inhalt</td>
              </tr>
            </table>
          <td>&nbsp;</td>
        </tr>
      </table>
                     
      </body>
    </html>
    Danke, Gruß TimeForGold

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Menü soll Inhalt überlagern

    Das mit dem CSS hast Du perfekt kopiert, allerdings befindet sich Deine Seite im Quirksmode, will heißen, dass Stu Nicholls einen richtigen Doctype genommen hat. Übernehme diesen oder such Dir hier eine richtige DTD aus, dann geht Dein Menü auch im IE 7.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    TimeForGold ist offline Jungspund
    registriert
    02-08-2007
    Beiträge
    12

    AW: Menü soll Inhalt überlagern

    Danke, Anna wäre ich nie draufgekommen, da ich ich mich zu wenig mit den Doktypes anscheind beschäftige. Super.

  6. #6
    TimeForGold ist offline Jungspund
    registriert
    02-08-2007
    Beiträge
    12

    AW: Menü soll Inhalt überlagern

    Nach langem erfolgreichen Basteln, ist leider ein Problem im IE6 aufgetreten. Der letzte Menüpunkt wird umgebrochen. Ich vermute es liegt evtl. an den minimalen Abständen zwischen den Hauptmenüpunkten. Diese Abstände sind im IE7 & Firefox3 nicht vorhanden und auch nicht gewollt.

    Ein weiteres Problem ergibt sich im Firefox, durch die IE6-Hacks in der Javascript Funktion showMenu(). Dort werden alle Menüpunkte zusammengeschoben dargestellt.

    Evtl. gibt es aber auch ein anderes Problem. Leider fehlt es mir am Wissen im Bereich Css in Bezug auf Browserkompatibilität.

    Wäre für eure Hilfe nochmal dankbar. Hier das lebende Objekt:

    Deutsch - Türkischer Mediatag

    Stylesheet:
    Code:
    * {
    font-family:Arial;
    }
    
    .normal {
    font-size:12px;
    font-weight:normal;
    color:#4b5d68;
    padding-left:10px;
    padding-right:250px;
    }
    
    h1 {
    font-size:14px;
    font-weight:bold;
    color:#4b5d68;
    padding-left:10px;
    padding-top:10px;
    }
    
    p {
    font-size:12px;
    font-weight:normal;
    color:#4b5d68;
    padding-left:10px;
    padding-right:250px;
    }
    
    
    p.red {
    color:#a9121d;
    }
    
    .red {
    color:#a9121d;
    font-size:12px;
    font-weight:normal;
    }
    
    .green {
    color:#008000;
    font-size:12px;
    font-weight:normal;
    }
    
    input, textarea {
    margin-left:35px;
    font-size:12px;
    font-weight:normal;
    }
    
    li {
    font-size:12px;
    font-weight:normal;
    color:#4b5d68;
    }
    
    .border-right {
    border-right-color:#4b5d68;
    border-left-color:transparent;
    border-top-color:transparent;
    border-bottom-color:transparent;
    border-width:1px;
    border-style:solid;
    }
    
    .border-left {
    border-right-color:transparent;
    border-left-color:#4b5d68;
    border-top-color:transparent;
    border-bottom-color:transparent;
    border-width:1px;
    border-style:solid;
    }
    
    .border-center {
    border-right-color:transparent;
    border-left-color:transparent;
    border-top-color:#4b5d68;
    border-bottom-color:#4b5d68;
    border-width:1px;
    border-style:solid;
    }
    
    /*-------- Menu style start ------------*/
    
    /* style the outer div to give it width */
    .menu {
    width:800px; 
    font-size:0.85em;
    }
    
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    .menu ul ul {
    width:160px;
    }
    
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .menu li {
    float:left;
    width:160px;
    position:relative;
    }
    
    /* style the links for the top level */
    .menu a, .menu a:visited,
    .agenda a, .agenda a:visited,
    .buchung a, .buchung a:visited,
    .anreise a, .anreise a:visited,
    .impressum a, .impressum a:visited {
    display:block;
    font-size:12px;
    font-family:arial;
    text-decoration:none; 
    color:#fff; 
    width:160px; 
    height:30px; 
    border:1px solid #fff; 
    border-width:1px 1px 0 0; 
    padding-left:0px; 
    line-height:29px;
    }
    
    .menu a, .menu a:visited {
    background:#cc071d;
    }
    
    .agenda a, .agenda a:visited {
    background:#a9121d;
    }
    
    .buchung a, .buchung a:visited {
    background:#811518;
    }
    
    .anreise a, .anreise a:visited {
    background:#5d1214;
    }
    
    .impressum a, .impressum a:visited {
    background:#494343;
    }
    
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .menu a, * html .menu a:visited {
    width:160px;
    w\idth:160px;
    }
    
    /* style the second level background */
    .menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#949e7c;
    }
    
    /* style the second level hover */
    .menu ul ul a.drop:hover{
    background:#c9ba65;
    }
    
    .menu ul ul :hover > a.drop {
    background:#c9ba65;
    }
    
    /* style the third level background */
    .menu ul ul ul a, .menu ul ul ul a:visited {
    background:#e2dfa8;
    }
    
    /* style the third level hover */
    .menu ul ul ul a:hover {
    background:#b2ab9b;
    }
    
    .menu ul ul ul :hover > a {
    background:#b2ab9b;
    }
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
    visibility:hidden;
    position:absolute;
    height:0;
    top:31px;
    left:0; 
    width:160px;
    }
    
    /* another hack for IE5.5 */
    * html .menu ul ul {
    top:30px;
    t\op:31px;
    }
    
    /* position the third level flyout menu */
    .menu ul ul ul{
    left:150px; 
    top:0;
    width:150px;
    }
    
    /* position the third level flyout menu for a left flyout */
    .menu ul ul ul.left {
    left:-150px;
    }
    
    /* style the table so that it takes no part in the layout - required for IE to work */
    .menu table {position:absolute; top:0; left:0;}
    
    /* style the second level links */
    .menu ul ul a, .menu ul ul a:visited {
    background:#d4d8bd; 
    color:#000; 
    height:auto; 
    line-height:1em; 
    padding:5px 0px; 
    width:160px
    /* yet another hack for IE5.5 */
    }
    
    * html .menu ul ul a{
    width:160px;
    w\idth:160px;
    }
    
    
    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover{
    color:#fff; 
    background:#c9c9c9;
    }
    .menu :hover > a, .menu ul ul :hover > a {
    color:#fff;
    background:#c9c9c9;
    }
    
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul, .menu ul li.over ul{
    visibility:visible; 
    }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level hidden when you hover on second level list OR link */
    .menu ul :hover ul :hover ul ul{
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ 
    visibility:visible;
    }
    /* make the fourth level visible when you hover over third level list OR link */
    .menu ul :hover ul :hover ul :hover ul { 
    visibility:visible;
    }

    Menü:
    Code:
    /**
     * showMenu descripes the structure of the menu and shows it.
     * 
     */  
    function showMenu()
    {
        var menu = "";
        
        menu  = "<tr><td align='center' valign='top'>";
        // first top menu item
        menu += "<div class='menu'><ul><li><a href='#'>Um was es geht?<!--[if IE 7]><!--></a><!--<![endif]-->";
        // submenu for first top menu item
        menu += "<!--[if lte IE 6]><table><tr><td><![endif]-->"; //IE6 hack starts
        menu += "<ul><li><a href='thema.html'>Thema</a></li>";
        menu += "<li><a href='warum.html'>Warum</a></li>";
        menu += "<li><a href='an_wen.html'>F&uuml;r wen...an wen</a></li>";
        menu += "</ul>";
        menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"; //IE6 hack ends
        menu += "</li>";
        // second top menu item
        menu += "<li class='agenda'><a href='agenda.html'>Agenda<!--[if IE 7]></a><!--<![endif]-->";
        // submenu for secound top menu item
        menu += "<!--[if lte IE 6]><table><tr><td><![endif]-->"; //IE6 hack starts
        menu += "<ul><li><a href='download_agenda.html'>Download</a></li>";
        menu += "</ul>";
        menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"; //IE6 hack ends
        menu += "</li>";
        // third top menu item
        menu += "<li class='buchung'><a href='#'>Buchung<!--[if IE 7]></a><!--<![endif]-->";
        // submenu for third top menu item
        menu += "<!--[if lte IE 6]><table><tr><td><![endif]-->"; //IE6 hack starts
        menu += "<ul><li><a href='hinweis.html'>Hinweise</a></li>";
        menu += "<li><a href='gebuehr.html'>Teilnahmegeb&uuml;hr</a></li>";
        menu += "<li><a href='anmeldung.html'>Anmeldung</a></li>";
        menu += "</ul>";
        menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"; //IE6 hack ends
        menu += "</li>";
        // fourth top menu item
        menu += "<li class='anreise'><a href='#'>Anreise<!--[if IE 7]></a><!--<![endif]-->";
        // submenu for fourth top menu item
        menu += "<!--[if lte IE 6]><table><tr><td><![endif]-->"; //IE6 hack starts
        menu += "<ul><li><a href='wann_wo.html'>Wann & Wo</a></li>";
        menu += "</ul>";
        menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"; //IE6 hack ends
        menu += "</li>";
        // fifth top menu item
        menu += "<li class='impressum'><a href='#'>Kontakt / Impressum<!--[if IE 7]></a><!--<![endif]-->";
        // submenu for fifth top menu item
        menu += "<!--[if lte IE 6]><table><tr><td><![endif]-->"; //IE6 hack starts
        menu += "<ul><li><a href='kontakt.html'>Kontaktieren Sie uns</a></li>";
        menu += "<li><a href='impressum.html'>Impressum</a></li>";
        menu += "</ul>";
        menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"; //IE6 hack ends
        menu += "</li>";
        menu += "</ul></div>";
        menu += "</td></tr>";
        
        document.write(menu);       
    }
    Beste Grüße TimeForGold
    Geändert von TimeForGold (31-08-2008 um 17:17 Uhr)

  7. #7
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Menü soll Inhalt überlagern

    Hallo TimeForGold,

    vielleicht fehlen Dir die Englischkenntnisse, aber dieser Eintrag im CSS von Stu Nicholls

    /* ================================================================
    This copyright notice must be untouched at all times. The original version of this stylesheet and the
    associated (x)html is available at Stu Nicholls | CSSplay | A CSS only dropdown menu v2
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */
    heißt soviel wie: Copyright-Notiz muss im CSS drin stehen bleiben.

    Dann zu Deinem Konstrukt. Tabellen fürs Layout sind Unsinn und wurden im letzten Jahrtausend verwendet.

    Zur Menüzusammenschiebung: Das liegt an Deiner JS-Schreibweise. So sollte es gehen:
    PHP-Code:
        menu += "<div class='menu'><ul><li><a href='#'>Um was es geht?<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->";
        
    menu += "<ul><li><a href='thema.html'>Thema</a></li>"


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  8. #8
    TimeForGold ist offline Jungspund
    registriert
    02-08-2007
    Beiträge
    12

    AW: Menü soll Inhalt überlagern

    Ja mit dem Copyright hast du Recht, werde es nachbessern

    Leider brachte dein Lösungsvorschlag bei beiden Problemen nicht den gewünschten Erfolg. Es ist in beiden Browsern unverändert.

    Ohne die "Bedingten Kommentare" funktioniert das Menü im firefox. Meine Idee wäre eine Browserweicher per JavaScript zu schreiben. @Anna Was hälst du davon? Ist das guter Stil?
    Zu mindestens bleibt nur noch der umbrochene Menüpunkt als Fehler.
    Geändert von TimeForGold (31-08-2008 um 19:15 Uhr)

  9. #9
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Menü soll Inhalt überlagern

    Zum FF-Problem. Wenn das JS so aussieht, zeigt mein FF3 es auch richtig an:
    PHP-Code:
    function showMenu()
    {
        var 
    menu "";

        
    menu  "<tr><td align='center' valign='top'>";
        
    // first top menu item
        
    menu += "<div class='menu'><ul><li><a href='#'>Um was es geht?<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->";
        
    menu += "<ul><li><a href='thema.html'>Thema</a></li>";
        
    menu += "<li><a href='warum.html'>Warum</a></li>";
        
    menu += "<li><a href='an_wen.html'>F&uuml;r wen...an wen</a></li>";
        
    menu += "</ul>";
        
    menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"//IE6 hack ends
        
    menu += "</li>";
        
    // second top menu item
        
    menu += "<li class='agenda'><a href='agenda.html'>Agenda<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->";
        
    menu += "<ul><li><a href='download_agenda.html'>Download</a></li>";
        
    menu += "</ul>";
        
    menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"//IE6 hack ends
        
    menu += "</li>";
        
    // third top menu item
        
    menu += "<li class='buchung'><a href='#'>Buchung<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->"//IE6 hack starts
        
    menu += "<ul><li><a href='hinweis.html'>Hinweise</a></li>";
        
    menu += "<li><a href='gebuehr.html'>Teilnahmegeb&uuml;hr</a></li>";
        
    menu += "<li><a href='anmeldung.html'>Anmeldung</a></li>";
        
    menu += "</ul>";
        
    menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"//IE6 hack ends
        
    menu += "</li>";
        
    // fourth top menu item
        
    menu += "<li class='anreise'><a href='#'>Anreise<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->";
        
    menu += "<ul><li><a href='wann_wo.html'>Wann & Wo</a></li>";
        
    menu += "</ul>";
        
    menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"//IE6 hack ends
        
    menu += "</li>";
        
    // fifth top menu item
        
    menu += "<li class='impressum'><a href='#'>Kontakt / Impressum<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->";
        
    menu += "<ul><li><a href='kontakt.html'>Kontaktieren Sie uns</a></li>";
        
    menu += "<li><a href='impressum.html'>Impressum</a></li>";
        
    menu += "</ul>";
        
    menu += "<!--[if lte IE 6]></td></tr></table></a><![endif]-->"//IE6 hack ends
        
    menu += "</li>";
        
    menu += "</ul></div>";
        
    menu += "</td></tr>";

        
    document.write(menu);



    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  10. #10
    TimeForGold ist offline Jungspund
    registriert
    02-08-2007
    Beiträge
    12

    AW: Menü soll Inhalt überlagern

    Ja danke, hatte einen Tippfehler.

    Hast du eine Idee für den Menüumbruch im IE6?

  11. #11
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Menü soll Inhalt überlagern

    Ich hab jetzt einfach mal Dein CSS ersetzt durch das ursprüngliche von Stu. Da geht es ohne Umbruch. Du müsstest also nochmal Schrift für Schritt Deine Änderungen einsetzen. Ich schau aber gleich auch nochmal drüber.

    Und lass die Tabelle weg. Hier findest Du tabellenfreie Vorlagen:
    intensivstation :: CSS Templates :: Templates


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Menü soll Inhalt überlagern

    Deine Seite sieht ja bei deaktiviertem JS richtig nett aus...

  13. #13
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Menü soll Inhalt überlagern

    Zitat Zitat von dkdenz Beitrag anzeigen
    Deine Seite sieht ja bei deaktiviertem JS richtig nett aus...
    Da sieht man doch, dass sich die Mühe gelohnt hat, das Menü in ein JS zu packen.

    Nun zu Deinem IE6 Problem. Ändere hier die border-Angabe in '0'. Offensichtlich willst Du nicht den weißen Rand aus dem Urspungsmenü behalten.
    Code:
    /* style the links for the top level */
    .menu a, .menu a:visited,
    .agenda a, .agenda a:visited,
    .buchung a, .buchung a:visited,
    .anreise a, .anreise a:visited,
    .impressum a, .impressum a:visited {
    display:block;
    font-size:12px;
    font-family:arial;
    text-decoration:none;
    color:#fff;
    width:160px;
    height:30px;
    border:1px solid #fff;
    border-width:1px 0px 0 0;
    padding-left:0px;
    line-height:29px;
    }


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

Ähnliche Themen

  1. Änderung an JS Menü
    Von dabri im Forum Jobs
    Antworten: 0
    Letzter Beitrag: 25-03-2008, 22:27
  2. Die etwas andere Navigation...
    Von Bitnets im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 11-02-2007, 22:58
  3. DHTML Menü... Inhalt aus PhP auslesen? HILFE!
    Von illuminati! im Forum Allgemeines
    Antworten: 3
    Letzter Beitrag: 14-07-2005, 14:14
  4. Brauche dringend Hilfe bei meinem Menü Script
    Von AEdevil im Forum JavaScript
    Antworten: 15
    Letzter Beitrag: 12-07-2005, 17:29
  5. Variablen Inhalt in Drop-Down Menü schreiben
    Von sideshow im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 03-01-2005, 19:25

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •