CSS Navigationsproblem

thesecretboy · 11. April 2007

Hallo zusammen,

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

Hier mal mein vorhandener 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. Kann mir hier jemand helfen? Wäre wirklich schön. Sollte mit den meissten Browsern ohne Hilfe von Javascript laufen und W3 Valide sein.

Anmelden

CSS Navigationsproblem

Empfohlene Beiträge

thesecretboy

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de