zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Navigationsproblem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.04.2007, 08:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.04.2007
Beiträge: 1
thesecretboy befindet sich auf einem aufstrebenden Ast
Frage 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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 16:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 02:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:12 Uhr.