✔ Hilfe mit CSS Navigation

lordpressler · 7. März 2007

Hallo Leute,

kann mir jemand n Tipp geben warum das nicht funktioniert:

Code:

<html>
<head>
<title>Test</title>
<meta name="author" content="D048626">
<link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table>
<tr>
<td width="170" height="50" style="background-image:url(images/vcdleft1.gif)">
<div id="Menu"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a>
    <ul>
    	<li><a href="#Beispiel">Seite 1.1</a></li>
        	<li><a href="#Beispiel">Seite 1.1</a></li>
    </ul>
    </li>
</td>
<td width="170" height="50"  style="background-image:url(images/vcdleft2.gif>

    <li><a href="#Beispiel">Seite 2</a>
    <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
    </ul>
    </li>
</div>
</td>
</tr>
</table>
</body>
</html>

und die dazugehörige CSS:

Code:

ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;
}

ul#Navigation li:hover ul {
    display: block;
}

ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

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: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;

Danke im Voraus...

Gruß,
Jens

Maik · 7. März 2007

Hi,

könntest du bitte kurz erläutern, was da (in welchem Browser) nicht wie gewünscht funktioniert?

lordpressler · 7. März 2007

Hi,

also, ich benutze den IE6.0 zum testen!
Also funktionieren tut eigentlich gar nix, er zeigt zwar die eine Tabellenzelle an mit entsprechendem Hintergrund und auch ein Button! Aber nachdem :hover passiert gar nix, obwohl doch dann die Liste sichtbar werden sollte!
In der 2ten Tabellenzelle zeigt er mir gar nix an ausser folgende auflistung (nichtmal das Hintergrundbild zeigt er an, obwohl richtig geschrieben, richtiges verzeichnis):

Seite 2
. Seite 2a
. Seite 2b

Gruß

Maik · 7. März 2007

Schau dir mal zum Vergleich das dazugehörige Original-Beispiel auf selfHTML an -> http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern.

Weiter unten findest du dann auch den Abschnitt für den IE, der bei diesem Menü Javascript benötigt, um die Submenüs ein- und auszublenden.

Zu deinem HTML-Markup kann ich nur sagen, dass es nicht valide (=regelkonform) ist, und daher ebenso ein Potential für Fehldarstellungen in den modernen Browsern besitzt.

Du kannst den Quellcode ja mal durch den w3c-Validator jagen.

lordpressler · 7. März 2007

Ok, danke..hab tatsächlich vergessen das Javascript einzufügen.
Aber jetzt mein Problem: Sobald ich dann eine Tabelle drum mache, funktioniert nur noch "Seite 1"....Seite 2 wird zwar angezeigt, aber wie oben schon beschrieben wieder nur aufgelistet:

Seite 2
Seite 2 a
Seite 2 b

mhh, mach ich durch die Tabelle irgendwas kaputt?

Maik · 7. März 2007

Naja, in dem Original ist keine Tabelle enthalten, und wozu benötigst du sie dann?

Zudem ist, wie heute Mittag schon von mir darauf hingewiesen, das HTML-Markup nicht valide, da du die Listen-Navigation durch die zwei Tabellenzellen unterbrichst.

Mein Vorschlag: Probier es einfach mal ohne die Tabelle.

lordpressler · 8. März 2007

Hi,

also ich hab die Idee mit den Tabellen mittlerweile über den haufen geworfen! ;-)
Aber ich bin grad am verzweifeln, kann ich denn für eine HTML Liste verschieden Hintergrundbilder hinzufügen? Wobei aber nur der erste Wert in der Liste ein Bild erhalten soll, die Aufzählungen jedoch nicht bzw. nur andere Hintergrundfarben!
Ich hab wieder von SelftHTML die Liste genommen, hier mal mein code:

Code:

<html>
<head>
<title></title>
<meta name="author" content="D048626">
<link rel="stylesheet" type="text/css" href="testcss1.css">
</head>
<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 = "blue";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>


<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<h1 style="background-color:#DEDEDE" align="center">1. Operating Processes</h1>
<div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel"> Seite 1</a></li>

  </ul><div></div></div>


<h2 align="center" width="100" height="73" style="background-color:#DEDEDE">2 Management & Support Services</h2>
<table>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.1 Procurement</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.2 Financials & Controlling</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.3 Human Resources</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.4 Information Technology</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.5 Strategy Management</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.6 Security Management</td>
</tr>
</table>
</body>
</html>

und die dazugehörige CSS :

Code:

  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffff;
  }

div#Rahmen {
    width: 40.1em;
    padding: 0.3em;
    border: 0px solid black;
    background-color: #ffffff;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }

  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
    background-image:url(images/vcdleft1.gif);
    background-repeat:no-repeat;
  }

  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:silver; 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: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #FFFFFF;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: Blue;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: #FFFFFF;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }
.longVCD{border-bottom:solid 5px #ffffff;font-family:Arial;font-size:9pt;text-align:center;color:#000000;font-weight:bold;background-image:url(images/vcdlong.gif)}
.longVCD a:visited{color:#ffffff;text-decoration:none;}
.longVCD a:active{color:#ffffff;text-decoration:none;}

Grüße

Maik · 8. März 2007

Hi,

wenn die Links der zweiten Menüebene (= Submenü) einen anderen Hintergrund als die "Haupt-Links" erhalten sollen, dann erweiter das Stylesheet folgendermaßen:

Code:

ul#Navigation li ul li a { /* CSS-Formatierungen */ }

/* bzw. */

ul#Navigation li ul li a:hover { /* CSS-Formatierungen */ }

lordpressler · 8. März 2007

Ok, Danke....und wie erweiter ich die CSS wenn ich für mein Hauptmenü für jede Spalte ein anderes Hintergrundbild haben möchte?
Mit diesem Befehl in der CSS:
background:url(images/vcdleft1.gif) 100% 0% no-repeat;
formatiere ich ja alle 4 Spalten im Hauptmenü!

Muß ich dazu immer neue ID's vergeben?

Grüße

Maik · 8. März 2007

Korrekt

Hier ein Beispiel für unterschiedliche Hintergrundfarben:

Code:

ul#Navigation li a#menu1 { background:yellow; }
ul#Navigation li a#menu2 { background:red; }

Code:

<ul id="Navigation">
      <li><a href="#Beispiel" id="menu1">Seite 1</a>
             <ul>
                 <li><a href="#">Seite 1.1</a></li>
                 <li><a href="#">Seite 1.2</a></li>
             </ul>
      </li>
      <li><a href="#Beispiel" id="menu2">Seite 2</a>
             <ul>
                 <li><a href="#">Seite 2.1</a></li>
                 <li><a href="#">Seite 2.2</a></li>
             </ul>
      </li>
</ul>

✔ Hilfe mit CSS Navigation

lordpressler

Grünschnabel

Maik

lordpressler

Grünschnabel

Maik

lordpressler

Grünschnabel

Maik

lordpressler

Grünschnabel

Maik

lordpressler

Grünschnabel

Maik

Neue Beiträge