XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Navigationsproblem (http://xhtmlforum.de/showthread.php?t=45414)

thesecretboy 12.04.2007 09:12

CSS Navigationsproblem
 
Hallo zusammen,

ich baue gerade eine auf CSS basierende Navigation und haben damit einige Probleme.

Hier mal mein vorhandener Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Navigation</title>
<style type="text/css">
  body {
        color: black;
        background-color: #FFFFAA;
        font-family: arial, helvetica, serif;
        font-size: 78%;
  }

  div#Rahmen {
    width: auto;
    padding: 0.8em;
    border: 0px solid black;
    background-color: transparent;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 69.7em;
    w\idth: 68.1em;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:transparent; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 0px solid black;

    color: maroon; background-color: #DDDDFA;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 12.6em;  /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 10.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  }

</style>

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "transparent";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

</head>
<body>

  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Aktuelles Intern</a>
          <ul>
              <li><a href="#Beispiel">Aktuelles 1</a></li>
              <li><a href="#Beispiel">Aktuelles 2</a></li>
                <li><a href="#Beispiel">Aktuelles 3</a></li>
                <li><a href="#Beispiel">Aktuelles 4</a></li>
      </ul>
        </li>

    <li><a href="#Beispiel">News</a></li>

    <li><a href="#Beispiel">Kursprogramm</a>
          <ul>
        <li><a href="#Beispiel">Rubrik 1</a>
                  <ul>
                <li><a href="#Beispiel">Rubrik 1 Kurs 1</a></li>
                <li><a href="#Beispiel">Rubrik 1 Kurs 2</a></li>
                </ul>
                </li>
        <li><a href="#Beispiel">Rubrik 2</a>
                  <ul>
                <li><a href="#Beispiel">Rubrik 2 Kurs 1</a></li>
                <li><a href="#Beispiel">Rubrik 2 Kurs 2</a></li>
                </ul>               
                </li>
      </ul>
        </li>

    <li><a href="#Beispiel">Veranstaltungen</a>
      <ul>
        <li><a href="#Beispiel">Veranstaltungskalender 1</a></li>
        <li><a href="#Beispiel">Veranstaltungskalender 2</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Informationen</a>
      <ul>
        <li><a href="#Beispiel">2001</a>
                  <ul>
            <li><a href="#Beispiel">2001 - Intern</a></li>
            <li><a href="#Beispiel">2001 - Extern</a></li>
          </ul>
                </li>
        <li><a href="#Beispiel">2002</a>
                  <ul>
            <li><a href="#Beispiel">2002 - Intern</a></li>
            <li><a href="#Beispiel">2002 - Extern</a></li>
          </ul>
                </li>
                <li><a href="#Beispiel">2003</a>
                  <ul>
            <li><a href="#Beispiel">2003 - Intern</a></li>
            <li><a href="#Beispiel">2003 - Extern</a></li>
          </ul>
                </li>
                <li><a href="#Beispiel">2004</a></li>
      </ul>       
        </li>
        <li><a href="#Beispiel">Fragen & Infos</a></li>
       
        <li><a href="#Beispiel">Guestbook</a></li>
       
        <li><a href="#Beispiel">Rechtliches</a></li>
  </ul>
 
 
  <div></div></div>

</body>
</html>

Ich hätte gern, dass die Hauptmenüpunkte nebeneinander erscheinen und bitte nicht in solchen Boxen. Sondern einfach nur als Text. Es sollte ausreichend Platz zwischen den einzelnen Hauptmenüpunkten sein, aber nicht so wie es jetzt ist. Im Moment braucht jeder Hauptmenüpunkt den gleichen Platz, da die Boxen so breit sind. Die Unterboxen können dann eine feste Breite X haben und darin linksbündig sind dann die Untermenüpunkte und ggf. dann auch die noch weiteren Untermenüs. Das ist in Ordnung.

Das ganze sollte eigentlich so aussehen:

Aktuelles Intern (Hauptmenüpunkt - kein Link)
- Aktuelles 1 (Link)
- Aktuelles 2 (Link)
- Aktuelles 3 (Link)
- Aktuelles 4 (Link)

News (Hauptmenüpunkt - direkter Link)

Kursprogramm (Hauptmenüpunkt - kein Link)
- Rubrik 1 (Untermenüpunkt - kein Link)
- - Rubrik 1 - Kurs 1 (Link)
- - Rubrik 1 - Kurs 2 (Link)
- Rubrik 2 (Untermenüpunkt - kein Link)
- - Rubrik 2 - Kurs 1 (Link)
- - Rubrik 2 - Kurs 2 (Link)

Veranstaltungen (Hauptmenüpunkt - kein Link)
- Veranstaltungskalender 1 (Link)
- Veranstaltungekalender 2 (Link)

Informationen (Hauptmenüpunkt - kein Link)
- 2000 (Untermenüpunkt - kein Link)
- - Informationen 2000 - 1 (Link)
- - Informationen 2000 - 2 (Link)
- 2001 (Untermenüpunkt - kein Link)
- - Infromationen 2001 - 1 (Link)
- - Informationen 2001 - 2 (Link)
- 2002 (Untermenüpunkt - kein Link)
- - Informationen 2002 - 1 (Link)
- - Informationen 2002 - 2 (Link)
- 2003 (Untermenüpunkt - kein Link)
- - Informationen 2003 - 1 (Link)
- - Informationen 2003 - 2 (Link)
- 2005 (Link)

Fragen & Infos (Hauptmenüpunkt - direkter Link)

Guestbook (Hauptmenüpunkt - direkter Link)

Rechtliches (Hauptmenüpunkt - direkter Link)

Ich komme damit leider überhaupt nicht weiter und kämpfe mich schon seit 2 Tagen durch Tutorials und die unterschiedlichsten Internetseiten. Deswegen hoffe ich, dass mir hier jemand helfen kann. Wäre wirklich schön. Sollte mit den meissten Browsern ohne Hilfe von Javascript laufen und W3 Valide sein.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:45 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023