CSS-Navigation

[sb-canerods]

Hallo,
ich möchte bei manchen links der Navigation, dass beim daraufklicken unter mehreren Punkten ausgewählt werden kann. Z.B. "Bilder" darunter dann auswahlmöglichkeiten, siehe http://www.sb-canerods.de/Seite1.1.htmKönnt ihr mir helfen, wie ich diese ganze Navigation umsetzen kann?
Bin in Sachen CSS und Homepageerstellung noch nicht so erfahren.
Gruss SImon

[Lan-Fan ThE kInG]

AW: CSS-Navigation

am besten machst du das mit DHTML!

guck mal hier:

*klicckk*


gruß TK

[mi-schi]

AW: CSS-Navigation

sb-canerods will aber ein CSS-Menü, was besser ist, als ein Java Script-Menü.
Willst du da ein Klappmenü: http://www.drweb.de/leseproben/klappmenu.shtml

[Peter0308]

AW: CSS-Navigation

Hi,

Ergänzend zu mi-schi:

http://www.1ngo.de/web/tmenu.html

http://de.selfhtml.org/css/layouts/navigationsleisten.htm#

Peter

[sb-canerods]

AW: CSS-Navigation

sb-canerods will aber ein CSS-Menü, was besser ist, als ein Java Script-Menü.
Willst du da ein Klappmenü: http://www.drweb.de/leseproben/klappmenu.shtml

Hallo Mi-schi,

genau so etwas will ich! Wie kann ich das nun realisieren, ich möchte bei meinen Rubriken "Bilder" und "Onlienshop" etliche unterpunkte. Kannst du mir hier mit dem Code weiterhelfen? Danke und Gruss
Simon

[mi-schi]

AW: CSS-Navigation

Steht doch alles da. Den Code vorkauen, dass mache ich nicht.

[sb-canerods]

AW: CSS-Navigation

Ich möchte doch nicht, dass du mir den Code vorkaust, nur etwas Hilfe.
Hab mir das mehrmals durchgelesen, das Ergebnis siehe hier : http://www.sb-canerods.de/Seite1.1.htm
1.) Wie bekomme ich die Links nebeneinander?
2.) Warum hängt unter Bilder der Stammtisch und der Onlineshop? Hab mir den Code mehrmals angeschaut, konnte keinen Fehler finden.
3.) Wie und wo binde ich diese csshover.htc für den ie ein?

Viele Grüße
Simon

[Peter0308]

AW: CSS-Navigation

Hi Simon,

les dir bitte auch die Inhalte der anderen Links durch, damit du den prinzipiellen aufbau von mehrstufigen Listen-Navigationen verstehst. Danach werden sich deine Fragen wahrscheinlich erledigt haben.

Peter

[sb-canerods]

AW: CSS-Navigation

Hab die anderen links gelesen und die AUflistung der links nach meiner Meinung korrekt ausgeführt. Das Ergebnis ist aber immer noch das Gleiche und ich weiß nicht warum.
Gruss Simon


Edit (autom. Beitragszusammenführung):

o.k. Punkt 2.) hab ich in den Griff bekommen, bleiben also noch Punkt 1.), den Punkt 3.) denke ich hab ich auch, bin mir aber nicht sicher.
Gruss SImon


Edit (autom. Beitragszusammenführung):

Ich versuche immer noch verzweifelt die Navigation in eine horizontale Reihe zu bekommen, dachte es liegt an dem #menu ul li { display: inline; },
aber anscheinend nicht. Weiß jemand wo der Fehler liegt?
Gruss Simon

[Koesmi]

AW: CSS-Navigation

Du hast vergessen bei deiner Menu.css bei dem Eintrag #menu ul ul auch left auf 100% zu setzen und top auf null. Deswegen nehmen die Browser auch an, dass die ersten Untermenues unter den Hauptmenuefeldern angezeigt werden sollen.
Hier der richtige Text fuer Menu.css:

#menu { width: 100%; background: #eee; float: left; }

#menu ul { list-style: none; margin: 0; padding: 0; width: 80px; float: left; } 

#menu a, #menu h2 
  { font: bold 11px/16px arial, helvetica, sans-serif; 
  display: block; border-width: 1px; border-style: solid; 
  border-color: #ccc #888 #555 #bbb; 
  margin: 0; padding: 2px 3px; } 

#menu h2 { color: #FF8635; background: 666666; text-transform: uppercase; } 

#menu a { color: #000; background: #efefef; text-decoration: none; }

#menu a:hover { color: #a00; background: #fff; }

#menu li {position: relative;} 

#menu ul ul { position: absolute; z-index: 500; top: 0; left: 100%; }

#menu ul ul ul { position: absolute; top: 0; left: 100%; } 

div#menu ul ul,
div#menu ul li:hover ul ul, 
div#menu ul ul li:hover ul ul 
  {display: none;} 

div#menu ul li:hover ul, 
div#menu ul ul li:hover ul, 
div#menu ul ul ul li:hover ul 
  {display: block;}

[sb-canerods]

AW: CSS-Navigation

Hallo Koesmi,
habe den Code geändert, schaut aber immer noch genauso aus!
Woran kann das nur liegen?
Gruss Simon

[Peter0308]

AW: CSS-Navigation

Hi Simon,

hättest du dir die anderen Links (insbesondere den von Ingos Menü) genau durchgelesen und das css mit dem von drweb verglichen, dann hättest du einen kleinen aber feinen Unterschied festgestellt (deshalb funktioniert Ingos Menü auch).

Für die horizontale Darstellung ist die Anweisung "float:left" zuständig. Vergleiche bitte mal deine und Ingos css und finde heraus, für welches Element diese Anweisung gegeben werden muss.

Ist nur ein bischen Lesearbeit, hast du innerhalb von 5 min. heraus.

Peter

[sb-canerods]

AW: CSS-Navigation

Hallo Peter,
habe das float: Left; zum #menu li hinzugefügt, das ist das einzige was ich gefunden habe.
Gruss Simon

[Peter0308]

AW: CSS-Navigation

Hi,

das wäre prinzipiell richtig, scheint aber nicht richtig gemacht worden zu sein.

#menu { width: 100%; background: #eee; float: left; }

#menu ul { list-style: none; margin: 0; padding: 0; width: 80px; float: left; } 

#menu a, #menu h2 
  { font: bold 11px/16px arial, helvetica, sans-serif; 
  display: block; border-width: 1px; border-style: solid; 
  border-color: #ccc #888 #555 #bbb; 
  margin: 0; padding: 2px 3px; } 

#menu h2 { color: #FF8635; background: 666666; text-transform: uppercase; } 

#menu a { color: #000; background: #efefef; text-decoration: none; }

#menu a:hover { color: #a00; background: #fff; }

#menu li {position: relative;} 

#menu ul ul { position: absolute; z-index: 500; top: 0; left: 100%; }

#menu ul ul ul { position: absolute; top: 0; left: 100%; } 

div#menu ul ul,
div#menu ul li:hover ul ul, 
div#menu ul ul li:hover ul ul 
  {display: none;} 

div#menu ul li:hover ul, 
div#menu ul ul li:hover ul, 
div#menu ul ul ul li:hover ul 
  {display: block;}

Diese css wird mir angezeigt. Hier ist das float:left noch bei #menu ul drin, und das ist nun mal falsch. Oder habe ich eine falsche URI?
Du hast auch drei verschieden css im <head>-Bereich, warum fügst du die nicht zusammen?

Peter

[Koesmi]

AW: CSS-Navigation

Hi Simon,
Wenn du die ganzen Listen nebeneinander haben willst, willst du ja wie es aussieht, dann musst du auch jedes Element als Liste definieren. Deine Menuepunkte wie "Ueber mich", "Routenbau" sind nur Listenpunkte.
Ausserdem hast du die DOCTYPE nicht korrekt angegeben, ohne der Dokumentenbeschreibungsdatei reagiert der IE nicht auf hover-Aktionen.
Und wenn du nebeneinanderstehende Menuepunkte haben willst, dann solltest du auch das was ich dir anfangs vorgeschlagen habe lieber rueckgaengig machen.
So sollte dein Code dann ca. aussehen
Fuer Seite1.1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!--Hier die Addresse angeben fuer die DTD-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Simon Bauer_Feinste gespliesste Fliegenruten</title>
<link rel="stylesheet" type="text/css" href="Start.css">
<link rel="stylesheet" type="text/css" href="index.htm">
<link rel="stylesheet" type="text/css" href="menu.css">
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->
</head>

<body> 

<div id="container">
	<div id="banner" ><p>
		<img border="0" src="simon/Logo_rgb_highres12.JPG" width="211" height="160"></p>
</div><!-- end banner -->
	<div id="mainnavi" >
 		<p align="left"><font style="font-size: 1em"> 		

<div id="menu">
<UL><li><h2>Über mich</h2></li></UL>
<UL><li><h2>Rutenbau</h2></li></UL>
<UL><li><h2>Scnurverbindung</h2></li></UL>
<UL><li><h2>Bilder</h2>
  <ul>
  <li><a href="#">eins</a></li>
  <li><a href="#">zwei ...</a>
    <ul>
    <li><a href="#">zwei a</a></li>
    <li><a href="#">zwei b</a></li>
    <li><a href="#">zwei c</a></li>
    <li><a href="#">zwei d</a></li>
    </ul>
  </li>
  <li><a href="#">drei ...</a>
    <ul>
    <li><a href="#">drei a</a></li>
    <li><a href="#">drei b ...</a>
      <ul>
      <li><a href="#">drei b i</a></li>
      <li><a href="#">drei b ii</a></li>
      <li><a href="#">drei b iii</a></li>
      </ul>
    </li>
    <li><a href="#">drei c</a></li>
    </ul>
  </li>
  </ul>
</li>
</UL>
<UL><li><h2>Stammtisch</h2></li></UL>
<UL>
<li><h2>Onlineshop</h2>
  <ul>
  <li><a href="#">eins</a></li>
  <li><a href="#">zwei ...</a>
    <ul>
    <li><a href="#">zwei a</a></li>
    <li><a href="#">zwei b</a></li>
    <li><a href="#">zwei c</a></li>
    <li><a href="#">zwei d</a></li>
    </ul>
  </li>
  <li><a href="#">drei ...</a>
    <ul>
    <li><a href="#">drei a</a></li>
    <li><a href="#">drei b ...</a>
      <ul>
      <li><a href="#">drei b i</a></li>
      <li><a href="#">drei b ii</a></li>
      <li><a href="#">drei b iii</a></li>
      </ul>
    </li>
    <li><a href="#">drei c</a></li>
    </ul>
  </li>
  </ul>
</li>
</UL>
</div>

</div><!-- end mainnavi -->
	<div id="left">
		<ul class="borderbottom">
			<li></li>
		</ul>
		<p>&nbsp;</p>
		<ul class="borderbottom">
			<li>
			<font color="#000000">
			<span style="font-size: 0.8em">Onlineshop</span></font></li>
			<li><font color="#000000"><span style="font-size: 0.8em">
			Garantie</span></font></li>
			<li><font color="#000000"><span style="font-size: 0.8em">
			Rutenbaukurs</span></font></li>
		</ul>
<p>&nbsp;</p>
		<p>&nbsp;<script language="JavaScript" type="text/javascript" src="http://www.wetter.com/v2/woys2/woys2.js.php?168230,1b9bed6112977e9f31db92a3273ef528"></script></p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p><img border="0" src="deutschland.gif" width="32" height="20">&nbsp;
		<img border="0" src="greatbritan.gif" width="32" height="20">&nbsp;&nbsp;&nbsp; </p>

</div> <!-- end menu left -->
	<div id="content">

		<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">
<img border="0" src="simon/bambus.jpg" width="119" height="296"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>«-- <a href="javascript:history.back()"><font color="#000000">zurück</font></a></p>	
	</div>
 	<div id="footer"><h2><span style="font-size: 0.6em">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</span><font style="font-size: 0.6em">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		Impressum&nbsp;&nbsp;&nbsp; Kontakt&nbsp;&nbsp;&nbsp; Links&nbsp;&nbsp;&nbsp; 
		Gästebuch</font></h2></div>
</div>
</body>
</html>

Fuer menu.css

#menu { width: 100%; background: #eee; float: left; }

#menu ul { list-style: none; margin: 0; padding: 0; width: 80px; float: left; } 

#menu a, #menu h2 
  { font: bold 11px/16px arial, helvetica, sans-serif; 
  display: block; border-width: 1px; border-style: solid; 
  border-color: #ccc #888 #555 #bbb; 
  margin: 0; padding: 2px 3px; } 

#menu h2 { color: #FF8635; background: 666666; text-transform: uppercase; } 

#menu a { color: #000; background: #efefef; text-decoration: none; }

#menu a:hover { color: #a00; background: #fff; }

#menu li {position: relative;} 

#menu ul ul { position: absolute; z-index: 500; }

#menu ul ul ul { position: absolute; top: 0; left: 100%; } 


div#menu ul li:hover ul ul, 
div#menu ul ul,
div#menu ul ul li:hover ul ul 
  {display: none;} 

div#menu ul li:hover ul, 
div#menu ul ul li:hover ul, 
div#menu ul ul ul li:hover ul 
  {display: block;}