Zum Inhalt springen

CSS Navigationsproblem


thesecretboy

Empfohlene Beiträge

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...