✔ Hilfe mit CSS Navigation

lordpressler · 8. März 2007

Ok, ich merke das gibt richtig viel arbeit!

und die CSS wird echt richtig groß!

Vielen Dank für deine Hilfe! .... Ich setze hier mal vorsichtshalber noch kein haken bei "erledigt" ;-)

lordpressler · 9. März 2007

So, ich bin fast am Ziel angelangt!

Allerdings hab ich noch ne Frage: Wie bekomm ich es hin, dass das Menü, direkt unter der ersten Zeile aufgerufen wird und nicht mittendrin?

Zum besseren Verständnis von meinem Problem könnt ihr euch den Screenshot ansehen:

http://freenet-homepage.de/hochstadt.de/menue.JPG

Grüße,
Jens

Maik · 9. März 2007

Hi,

könntest du bitte auch den aktuellen Quellcode posten?

lordpressler · 9. März 2007

Hi,

also hier ist die CSS:

Code:

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

div#Rahmen {
    width: 40.1em;
    padding: 1.3em 1.1em;
    border: 0px solid black;
    background-color: #ffffff;
  }
  div#Rahmen div {
     clear: left;
  }

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

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 2;
  }
  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }

  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:1.2em 1.2em 1.2em 1.2em; */
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white; 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: 8.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;
  }
  /* Hintergrundfarben der einzelnen Spalten im Menü */
  ul#Navigation li a#menu1 { background:url(images/vcdleft1.gif) 100% 75% no-repeat    }
  ul#Navigation li a#menu2 { background:url(images/vcdleft2.gif) 100% 75% no-repeat;   }
  ul#Navigation li a#menu3 { background:url(images/vcdright1.gif) 100% 75% no-repeat;   }
  ul#Navigation li a#menu4 { background:url(images/vcdright2.gif) 100% 75% no-repeat;   }

  /* Das Submenü */
  ul#Navigation li ul li #submenu1 { background-color: #003399;
  display:inline;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu2 { background-color: #330066;
  display:block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu3 { background-color: #006600;
  display:block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu4 { background-color: #66CC33;
  display:block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu11 { background-color: #003399;
  display:inline;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu21 { background-color: #330066;
    display:block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu31 { background-color: #006600;
  display:block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu41 { background-color: #66CC33;
  display:block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}

  /* Formatierungen für die Klasse LongVCD */
.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;}
.background a:{background:url(images/vcdleft2.gif) 100% 0% no-repeat;}

und hier der HTML Code:

HTML:

<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">
<ilayer id="headline" top="0" left="0" width="50">
<h1 style="background-color:#DEDEDE" align="center" style="margin-right:18em" style="font-size:1.2em"> 1. Operating Processes</h1> </ilayer>
<div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel" id="menu1"> Seite 1</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu1">Seite 1.1</a></li>
        	<li><a href="#Beispiel" id="submenu11">Seite 1.2</a></li>
    </ul>
    </li>


    <li><a href="#Beispiel" id="menu2">Seite 2</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu2">Seite 2.1</a></li>
        	<li><a href="#Beispiel" id="submenu21">Seite 2.2</a></li>
    </ul>
    </li>

    <li><a href="#Beispiel" id="menu3">Seite 3</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu3">Seite 3.1</a></li>
        	<li><a href="#Beispiel" id="submenu31">Seite 3.2</a></li>
    </ul>
    </li>

    <li><a href="#Beispiel" id="menu4">Seite 4</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu4">Seite 4.1</a></li>
        	<li><a href="#Beispiel" id="submenu41">Seite 4.2</a></li>
    </ul>
    </li>
  </ul><div></div></div>


<h2 align="center" style="margin-right:18em" style="background-color:#DEDEDE" style="font-size:1.2em">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>

Grüße

Maik · 9. März 2007

Hierfür musst du für das Submenü den top-Wert anpassen:

Code:

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

Zudem fehlt da an einigen Stellen die Einheitenangabe, wie beispielsweise hier:

Code:

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

lordpressler · 9. März 2007

Super, DANKE!

lordpressler · 12. März 2007

Jetzt bin ich aber echt bald am Ziel angelangt! ;-)
Nur noch eine Frage:
Wie bekomme ich es hin, das die Hintergrundbilder und die einzelnen Menüs die selbe Größe haben?

Hier der Link, damit man mein Problem besser verstehn kann:

http://freenet-homepage.de/hochstadt.de/1.JPG

und die dazugehörige CSS:

Code:

div#Rahmen {
    width: 40.1em;
    padding: 1.3em 1.1em;
    border: 0px solid black;
    background-color: #ffffff;
  }
  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;
  }
  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 3.2em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }

  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.1em;
  }

  ul#Navigation a, ul#Navigation span {
    display:block;
    width:6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:1.2em 1.2em 1.2em 1.2em; */
    text-decoration: none; font-weight: bold;
    border: 0.2px solid black;
    border-left-color: white; border-top-color: white;
    color: white; 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: 8.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;
  }
  /* Hintergrundfarben der einzelnen Spalten im Menü */
  ul#Navigation li a#menu1 { background:url(images/vcdleft1.gif) 100% 75% no-repeat    }
  ul#Navigation li a#menu2 { background:url(images/vcdleft2.gif) 100% 75% no-repeat;   }
  ul#Navigation li a#menu3 { background:url(images/vcdright1.gif) 100% 75% no-repeat;   }
  ul#Navigation li a#menu4 { background:url(images/vcdright2.gif) 100% 75% no-repeat;   }

  /* Das Submenü */
  ul#Navigation li ul li #submenu1 { background-color: #003399;
    display:inline;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu2 { background-color: #330066;
    display:block;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu3 { background-color: #006600;
    display:block;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu4 { background-color: #66CC33;
    display:block;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu11 { background-color: #003399;
    display:inline;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu21 { background-color: #330066;
    display:block;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu31 { background-color: #006600;
    display:block;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu41 { background-color: #66CC33;
    display:block;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}

  /* Formatierungen für die Klasse LongVCD */
.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;}
.background a:{background:url(images/vcdleft2.gif) 100% 0% no-repeat;}

div#lyr1 {
  position:absolute; left:300px; top:10px;
  width:250px; height:70px;
  background-color:#eee; border:1px solid black;
  padding:6px; font-size:11px; line-height:1.4
  }

Grüße,
Jens

Maik · 12. März 2007

Hi,

so wie ich das überblicke, dürfte es an der display:inline-Eigenschaft liegen, dass die Breitenangabe nicht übernommen wird, und sich die Element-Breite durch den Inhalt ergibt:

Code:

ul#Navigation li ul li #submenu1 { background-color: #003399;
    display:inline;
    width: 7.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.2em 1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}

lordpressler · 12. März 2007

Ok, danke erstmal, aber nachdem ich nun die Breite ändern kann verschiebt sich die Menüleiste nach unten wie auf dem Bild zu sehn ist:

http://freenet-homepage.de/hochstadt.de/2.JPG

Dachte zuerst es könnte am Div#Rahmen liegen, den hab ich dann mal auskommentiert bzw. auch versucht ihn größer zu machen, allerdings ohne Erfolg....woran könnte das denn noch liegen?

Maik · 12. März 2007

Und auch hier die Bitte, den aktuellen Quellcode (HTML + CSS) zu zeigen.

✔ Hilfe mit CSS Navigation

lordpressler

Grünschnabel

lordpressler

Grünschnabel

Maik

lordpressler

Grünschnabel

Maik

lordpressler

Grünschnabel

lordpressler

Grünschnabel

Maik

lordpressler

Grünschnabel

Maik

Neue Beiträge