Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Generator zur Erstellung einer Navigation“

Herr_D

offline

AW: Generator zur Erstellung einer Navigation

[noparse]
Code:
<code>
[/noparse]


oder (mit Farben)

[noparse]
HTML:
code
[/noparse]
 

Anina

Pixelschubserin

AW: Generator zur Erstellung einer Navigation

Okay, dann hier auch der Code:


HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta
 content="Riegelsche Baustoffe - flexibel - innovativ - zuverl&auml;ssig"
 name="title">
  <meta content="German, de, deutsch" name="language">
  <meta content="after 20 days" name="revisit-after">
  <meta content="index,follow" name="robots">
  <meta content="http://www.riegelsche.de" name="generator">
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type">
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type">
</head>
<body style="background-color: rgb(102, 102, 102);">
<table
 style="width: 999px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="5"> <img src="images/Layout_01.gif"
 height="135" width="999"></td>
      <td> <img src="images/Abstandhalter.gif"
 height="135" width="1"></td>
    </tr>
    <tr>
      <td rowspan="3"> <img src="images/Layout_02.gif"
 height="515" width="11"></td>
      <td
 style="background-image: url(file:///L:/KreativDesign/Kunden/Riegelsche%20Baustoffe/HTML/images/Layout_03.gif); vertical-align: top;">
      <br>
      </td>
      <td rowspan="3"> <img src="images/Layout_04.gif"
 height="515" width="28"></td>
      <td
 style="background-image: url(file:///L:/KreativDesign/Kunden/Riegelsche%20Baustoffe/HTML/images/Layout_05.gif); vertical-align: top; font-family: Arial,Helvetica,sans-serif; color: rgb(51, 51, 51); text-align: left; font-size: 12px; line-height: normal; position: static; overflow: scroll; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; height: 501px; width: 801px;"
 rowspan="2">
      <div style="height: 480px; width: 750px; overflow: auto;">Hier
beginnt der Seiteninhalt....<br>
      </div>
      </td>
      <td rowspan="3"> <img src="images/Layout_06.gif"
 height="515" width="17"></td>
      <td> <img src="images/Abstandhalter.gif"
 height="492" width="1"></td>
    </tr>
    <tr>
      <td rowspan="2"> <img src="images/Layout_07.gif"
 height="23" width="142"></td>
      <td> <img src="images/Abstandhalter.gif"
 height="9" width="1"></td>
    </tr>
    <tr>
      <td> <img src="images/Layout_08.gif" height="14"
 width="801"></td>
      <td> <img src="images/Abstandhalter.gif"
 height="14" width="1"></td>
    </tr>
  </tbody>
</table>
</body>
</html>
 

pgreen

addicted

AW: Generator zur Erstellung einer Navigation

Damit solltest du dein Menu verwirklichen können:



aber weshalb nimmst du Tabellenlayout??? Sowas benutzt
man heute doch nicht mehr ...
 
Zuletzt bearbeitet:

Anina

Pixelschubserin

AW: Generator zur Erstellung einer Navigation

Okay, das schaut ja so aus wie ich es möchte... aber fürchterlich kompliziert - glaube da muss ich erst mal durchsteigen.
Meine nächste Homepage wird auch anders - aber bei dieser wusste ich es noch nicht besser - seit meiner jetzt 2-tägigen Internetsuch nach dem Menü, weiß ich dass ich meine HP das nächste mal ganz anders aufbaue... :)
 

pgreen

addicted

AW: Generator zur Erstellung einer Navigation

Das ist gar nicht so kompliziert, wie es vielleicht auf den ersten Blick aussieht.
Du hast den html-code der mit

Code:
 <div id="menu">
    <ul>
    <li><h2>Titel 1</h2>
      <ul>
      <li><a href="#">eins</a></li>
      <li><a href="#">zwei ...</a>
        <ul> ... usw.

beginnt. Da wo die Rauten sind, kommt der relative Pfad zu der Seite, zu der du verlinken willst, rein.

Den html-Code platzierst du in deiner Tabelle an die Stelle, wo das Menu hinsoll, falls dein Tabellenlayout flexibel genug dafür ist. Am besten, such dir lieber gleich ein CSS-Layout, da gibt es fertige Vorlagen:


Die CSS-Befehle, die dazu dienen, das Menu zu formatieren, kommen in den Header oder in ein externes Style-Sheet. Leider kommt in deinem veralteten Tabellenlayout kein Style-Sheet vor, deshalb müsstest du das noch einbinden. Entweder zu einer css-Datei verlinken



oder halt wie gesagt direkt die Befehle in den Header:
 

Anina

Pixelschubserin

AW: Generator zur Erstellung einer Navigation

Okay, das schaut zwar immernoch sehr komplex, aber zumindest machbar aus. Vielen Dank dafür!
Werde das heute Abend mal ausprobieren und dann morgen früh hier schreiben, ob es geklappt hat! Aber erstmal danke dafür!
 

Anina

Pixelschubserin

AW: Generator zur Erstellung einer Navigation

So, also ich habe es versucht... und verzweifel hier noch vollständig.... *heul*

Also das hier habe ich oben in meinen Head-Bereich eingefügt

HTML:
<!--[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]--> 

#menu { width: 80px; background: #eee; } 

#menu ul { list-style: none; margin: 0; padding: 0; } 

#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: #96D12C; 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 ul {position: absolute; top: 0; left: 100%; width: 100%; }

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

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

Und so schaut meine Liste aus, da scheint aber wohl alles okay zu sein, denn richtig strukturiert sind meine Links ja:

HTML:
<div id="menu">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="profil.html">Profil</a>
		<ul>
		<li><a href="team.html">Teamvorstellung</a></li>
		<li><a href="anfahrt.html">Anfahrt</a></li>
		</ul>
	</li>
	<li><a href="news.html">News</a></li>
	<li><a href="wohnideen.html">Wohnideen</a></li>
	<li><a href="ausstellung.html">Ausstellung</a></li>
	<li><a href="produkte.html">produkte</a>
		<ul>
		<li><a href="boeden.html">Böden</a>
			<ul>
			<li><a href="pvc.html">PVC</a></li>
			<li><a href="pvc.html">Lino</a></li>
			<li><a href="pvc.html">Kork</a></li>
			<li><a href="pvc.html">Teppich</a></li>
			<li><a href="pvc.html">Laminat</a></li>
			<li><a href="pvc.html">Parkett</a></li>
			<li><a href="pvc.html">MAssivholzdielen</a></li>
			</ul>
		</li>
		<li><a href="tueren.html">Türen</a>
			<ul>
			<li><a href="holzturen.html">Holztüren</a></li>
			<li><a href="glasturen.html">Glastüren</a></li>
			<li><a href="zubehor.html">Zubehör</a></li>
			</ul>
		</li>
		<li><a href="decken.html">Decken</a></li>
		<li><a href="farben.html">Farben & Öle</a></li>
		<li><a href="bodentreppen.html">Bodentreppen</a></li>
		<li><a href="Kniestockturen.html">Kniestocktüren</a></li>
		<li><a href="luftdichtung.html">Luftdichtungsmanschetten</a></li>
		</ul>
	</li>
	<li><a href="leistungen.html">Leistungen</a></li>
	<li><a href="partner.html">Partner</a></li>
	<li><a href="download.html">Download</a></li>
	<li><a href="impressum.html">Impressum</a>
		<ul>
		<li><a href="agbs.html">AGBs</a></li>
		</ul>	

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

Aber wenn ich die Datei anschauen will schaut es so aus wie im angehängten Bild. (wenn das funktioniert, denn ImageDings will grad net...).

Bitte, bitte, kann mir wer helfen, ich schmeiß sonst noch meine Tastatur zum Fenster raus :'(
 

Oehmy

Nicht mehr ganz neu hier

AW: Generator zur Erstellung einer Navigation

hi,

setzt einfach am anfang ein <ul><li> und am Ende ein </ul></li> ein, siehe unten, dann sollte dein Menü funktionieren.

Gruß Oehmy


Anfang:
<div id="menu">
<ul>
<ul><li>
<li><a href="index.html">Home</a></li>
<li><a href="profil.html">Profil</a>


Ende:
</li>
</ul></li>
</ul>
</div>
 

pgreen

addicted

AW: Generator zur Erstellung einer Navigation

hi,

setzt einfach am anfang ein <ul><li> und am Ende ein </ul></li> ein, siehe unten, dann sollte dein Menü funktionieren.

Gruß Oehmy


Anfang:
<div id="menu">
<ul>
<ul><li>
<li><a href="index.html">Home</a></li>
<li><a href="profil.html">Profil</a>


Ende:
</li>
</ul></li>
</ul>
</div>

Sorry, aber für was soll das gut sein? Eine Liste wird nicht so verschachtelt, wie du das hier vorschlägst. Der Code oben ist schon richtig, aber ohne Bild kann man nicht sehen, was nicht funktioniert.

dentyne, hast du auch die Datei csshover.htc downgeloaded und ins Hauptverzeichnis mit eingebaut?

Wichtigster Bestandteil ist die oben verlinkte Datei csshover.htc. Das kleine Stückchen Jscript(!) übersetzt dem Internet Explorer <hover> Anweisungen und sorgt für korrekte Ausführung.
 
Zuletzt bearbeitet:

Oehmy

Nicht mehr ganz neu hier

AW: Generator zur Erstellung einer Navigation

okay,

ich habe mir ihren Code kopiert und den orginal Code und diese mit einander verglichen und ich kann dir sagen, dass dieser Teil gefehlt hat und danach hat es ohne Probleme funktioniert, was es vorher nicht tat ;) (im FF)

und der Hinweis auf die csshover.htc betrifft nur den IE im FF läuft es nach der Korrektur.

PS. bei ihrem Code hat die Verschachtlung in die Tiefe erst ab der dritten Ebene Funktioniert und die Ebene 1 und 2 waren auf die Ebene 1 zusammen geschrumpft.

PPS: gerade gestestet im IE6 läuft es auch ohne das javaskript nur der IE7 scheint es wirklich zu brauchen
 
Zuletzt bearbeitet:

Anina

Pixelschubserin

AW: Generator zur Erstellung einer Navigation

Hi!

Erst nochmal vielen Dank, dass ihr euch alle so Mühe mit mir gebt. Habe jetzt mal alles soweit versucht umzusetzen. Die Listenzeichen hab ich auch weg bekommen.

Jetzt gibt es nur noch zwei kleine Probleme,
hier ist erstmal das Bild, darin sieht man auch das Problem:


Problem ist, dass Profil ein Punkt auf erster Ebene ist, sich aber bei den Unterpunkten "Teamvorstellung" und "Anfahrt" der Erste direkt darunter und der Zweite (ebenso auch wenn vorhanden der Dritte und Vierte...) mit einem seltsamen Abstand öffnet. Das sieht natürlich bescheiden aus.
Zudem wird wenn ich auf Produkte klicke neben der Punkte aus der 2. Ebene (z. B. Böden) auch gleich die 3. Ebene mit geöffnet (z. B. Parkett).

Woran könnte das liegen?

Hier schon mal mein Quellcode:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta
 content="Riegelsche Baustoffe - flexibel - innovativ - zuverl&auml;ssig"
 name="title">
  <meta content="German, de, deutsch" name="language">
  <meta content="after 20 days" name="revisit-after">
  <meta content="alle" name="audience">
  <meta content="index,follow" name="robots">
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type">
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type">
  <title>Riegelsche Baustoffe - flexibel - innovativ -
zuverl&auml;ssig</title>
<!--[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]-->
  <style type="text/css">
#menu { width: 130px; background: #eee; } #menu ul { list-style: none; margin: 0; padding: 0; } #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: #96D12C; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; }
div#menu ul,
div#menu ul ul,
div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu li:hover ul, div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} ul {
list-style-type: none;
}
li {
list-style-type: none;
}
#menu
li { position: relative; }
#menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }
div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display:
block;}
  </style>
</head>
<body style="background-color: rgb(102, 102, 102);">
<table
 style="width: 999px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="5"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_01.gif"
 height="135" width="999"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="135" width="1"></td>
    </tr>
    <tr>
      <td rowspan="3"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_02.gif"
 height="515" width="11"></td>
      <td
 style="background-image: url(images/Layout_03.gif); vertical-align: top;">
      <div
 style="font-family: Arial,Helvetica,sans-serif; color: rgb(51, 51, 51); font-weight: normal; font-style: normal; text-align: left; line-height: normal;"
 id="menu"><li><a href="index.html">Home</a></li>
      <li><a href="profil.html">Profil</a>
        <ul>
          <li><a href="team.html">Teamvorstellung</a></li>
          <li><a href="anfahrt.html">Anfahrt</a></li>
        </ul>
      </li>
      <li><a href="news.html">News</a></li>
      <li><a href="wohnideen.html">Wohnideen</a></li>
      <li><a href="ausstellung.html">Ausstellung</a></li>
      <li><a href="produkte.html">Produkte</a>
        <ul>
          <li><a href="boeden.html">B&ouml;den</a>
            <ul>
              <li><a href="pvc.html">PVC</a></li>
              <li><a href="lino.html">Lino</a></li>
              <li><a href="kork.html">Kork</a></li>
              <li><a href="teppich.html">Teppich</a></li>
              <li><a href="laminat.html">Laminat</a></li>
              <li><a href="parkett.html">Parkett</a></li>
              <li><a href="massivholz.html">Massivholzdielen</a></li>
            </ul>
          </li>
          <li><a href="tueren.html">T&uuml;ren</a>
            <ul>
              <li><a href="holzturen.html">Holzt&uuml;ren</a></li>
              <li><a href="glasturen.html">Glast&uuml;ren</a></li>
              <li><a href="zubehor.html">Zubeh&ouml;r</a></li>
            </ul>
          </li>
          <li><a href="decken.html">Decken</a></li>
          <li><a href="farben.html">Farben &amp;
&Ouml;le</a></li>
          <li><a href="bodentreppen.html">Bodentreppen</a></li>
          <li><a href="Kniestockturen.html">Kniestockt&uuml;ren</a></li>
          <li><a href="luftdichtung.html">Luftdichtungsmanschetten</a></li>
        </ul>
      </li>
      <li><a href="leistungen.html">Leistungen</a></li>
      <li><a href="partner.html">Partner</a></li>
      <li><a href="download.html">Download</a></li>
      <li><a href="impressum.html">Impressum</a>
        <ul>
          <li><a href="agbs.html">AGBs</a></li>
        </ul>
      </li>
      </div>
      <br>
      </td>
      <td rowspan="3"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_04.gif"
 height="515" width="28"></td>
      <td
 style="background-image: url(images/Layout_05.gif); vertical-align: top; font-family: Arial,Helvetica,sans-serif; color: rgb(51, 51, 51); text-align: left; font-size: 12px; line-height: normal; position: static; overflow: scroll; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; height: 501px; width: 801px;"
 rowspan="2">
      <div style="height: 480px; width: 750px; overflow: auto;">sd<br>
      </div>
      </td>
      <td rowspan="3"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_06.gif"
 height="515" width="17"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="492" width="1"></td>
    </tr>
    <tr>
      <td rowspan="2"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_07.gif"
 height="23" width="142"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="9" width="1"></td>
    </tr>
    <tr>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_08.gif" height="14"
 width="801"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="14" width="1"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Danke für eure Hilfe
 
Zuletzt bearbeitet:

besito

Nicht mehr ganz neu hier

AW: Generator zur Erstellung einer Navigation

Das sieht doch schon mal gut aus :eek:)

Zudem wird wenn ich auf Produkte klicke neben der Punkte aus der 2. Ebene (z. B. Böden) auch gleich die 3. Ebene mit geöffnet (z. B. Parkett).
Das liegt dann daran, daß Du diese Unterpunkte auch im HTML notiert hast. Solltest Du erst auf der Seite machen, wo sie auch angezeigt werden sollen.

Zu dem Abstandsproblem: das habe ich in Firefox und Safari nicht gesehen
da sieht es so aus

welchen Browser nutzt Du?

ach ja: ich würde die Unterpunkte farblich etwas absetzen, man verliert sonst den Überblick
oder leicht einrücken, padding-left: 5px vielleicht
 
Zuletzt bearbeitet:

pgreen

addicted

AW: Generator zur Erstellung einer Navigation

Dein Menu ist ja eine ungeordnete Liste. Ungeordnete Listen beginnen immer mit einem ul-Tag.

Du hast jetzt deine Liste mit einem li-Tag begonnen (vorher hattest du das richtig). li ist aber nur ein Gliederungspunkt innerhalb der ungeordneten Liste und kein Startelement. Du musst ganz am Anfang einen ul-Tag haben und am Ende auch nochmal mit einem ul-Tag schließen.


Code:
[COLOR=#000080]id=[COLOR=#0000ff]"menu"[/COLOR]>
[/COLOR][COLOR=#000080]HIER MUSS EIN <ul> TAG HIN !!!
 <li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"index.html"[/COLOR]>[/COLOR]Home[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
      [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"profil.html"[/COLOR]>[/COLOR]Profil[COLOR=#008000]</a>[/COLOR]
        [COLOR=#000080]<ul>[/COLOR]
          [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"team.html"[/COLOR]>[/COLOR]Teamvorstellung[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
          [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"anfahrt.html"[/COLOR]>[/COLOR]Anfahrt[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
        [COLOR=#000080]</ul>[/COLOR]
      [COLOR=#000080]</li>
.
.
.
[/COLOR]      [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"impressum.html"[/COLOR]>[/COLOR]Impressum[COLOR=#008000]</a>[/COLOR]
        [COLOR=#000080]<ul>[/COLOR]
          [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"agbs.html"[/COLOR]>[/COLOR]AGBs[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
        [COLOR=#000080]</ul>[/COLOR]
      [COLOR=#000080]</li>
UND HIER MUSS DIE LISTE MIT EINEM SCHLIESSENDEN </ul> TAG AUFHÖREN !
[/COLOR]      [COLOR=#000080]</div>[/COLOR]
      [COLOR=#000080]<br>[/COLOR]

Aber sieht ja aus, als wird es langsam ... :)
 
Zuletzt bearbeitet:

Anina

Pixelschubserin

AW: Generator zur Erstellung einer Navigation

Hi!

Äh, wenn ich das machen mit den beiden ULs am Anfang und am Ende, sind meine Buttons im NVU komplett verschwunden!??

Und ich stelle grade fest, wenn ich die HTML-Datei im IE oder Firefox aufmache, dann sieht man überhaupt keine Buttons. Hilfe, was ist denn da wieder los?
 
Zuletzt bearbeitet:

Oehmy

Nicht mehr ganz neu hier

AW: Generator zur Erstellung einer Navigation

huhu,

du musst einfach folgenden Eintrag löschen in deinem Style löschen: div#menu ul,

<style type="text/css">
#menu { width: 130px; background: #eee; } #menu ul { list-style: none; margin: 0; padding: 0; } #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: #96D12C; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; }
div#menu ul,
div#menu ul ul,
div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu li:hover ul, div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} ul {
list-style-type: none;
}
li {
list-style-type: none;
}
#menu
li { position: relative; }
#menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }
div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display:
block;}
</style>
 
Zuletzt bearbeitet:

Anina

Pixelschubserin

AW: Generator zur Erstellung einer Navigation

Hi!

Also das hat schonmal funktioniert - jetzt wird die dritte Ebenen nebendran angezeigt. Kann ich das mit der zweiten auch machen?

Und weiterhin besteht das problem, dass es zwar im NVU zu sehen ist, aber wenn ich die HTML-Datei im IE oder Firefox aufmache kein Menü zu sehen ist.

Und das Problem mit den riesen Abständen (siehe oben) hab ich immernoch.

Hilfe, Probleme über Probleme.... :-(

Aber danke für eure Hilfe!!!
 

Oehmy

Nicht mehr ganz neu hier

AW: Generator zur Erstellung einer Navigation

hast du die Änderung von pgreen gemacht? weil das Ganze muss zwischen die <ul></ul> Tags stehen, danach hat es bei mir funktioniert.

damit die 2 Ebene auch rechts daneben ist, musst du einfach bei deinem Style die Zeile:

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

um #menu ul ul ergänzen

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

die riesen Abstände sind bei mir leider nicht zu sehen.
 

Oehmy

Nicht mehr ganz neu hier

AW: Generator zur Erstellung einer Navigation

also ehrlich gesagt verstehe ich es nicht, bei mri funktioniert der code im FF und im IE6 ohne Probleme, also die Menüs.


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta
 content="Riegelsche Baustoffe - flexibel - innovativ - zuverl&auml;ssig"
 name="title">
  <meta content="German, de, deutsch" name="language">
  <meta content="after 20 days" name="revisit-after">
  <meta content="alle" name="audience">
  <meta content="index,follow" name="robots">
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type">
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type">
  <title>Riegelsche Baustoffe - flexibel - innovativ -
zuverl&auml;ssig</title>
<!--[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]-->

 <style type="text/css">
#menu { width: 130px; background: #eee; } #menu ul { list-style: none; margin: 0; padding: 0; } #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: #96D12C; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; }

div#menu ul ul,
div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu li:hover ul, div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} ul {
list-style-type: none;
}
li {
list-style-type: none;
}
#menu
li { position: relative; }

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

div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display:
block;}
  </style>





</head>
<body style="background-color: rgb(102, 102, 102);">
<table
 style="width: 999px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="5"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_01.gif"
 height="135" width="999"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="135" width="1"></td>
    </tr>
    <tr>
      <td rowspan="3"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_02.gif"
 height="515" width="11"></td>
      <td
 style="background-image: url(images/Layout_03.gif); vertical-align: top;">
      <div style="font-family: Arial,Helvetica,sans-serif; color: rgb(51, 51, 51); font-weight: normal; font-style: normal; text-align: left; line-height: normal;"
 id="menu">
 <ul>
 <li><a href="index.html">Home</a></li>
      <li><a href="profil.html">Profil</a>
        <ul>
          <li><a href="team.html">Teamvorstellung</a></li>
          <li><a href="*********html">Anfahrt</a></li>
        </ul>
      </li>
      <li><a href="news.html">News</a></li>
      <li><a href="wohnideen.html">Wohnideen</a></li>
      <li><a href="ausstellung.html">Ausstellung</a></li>
      <li><a href="produkte.html">Produkte</a>
        <ul>
          <li><a href="boeden.html">B&ouml;den</a>
            <ul>
              <li><a href="pvc.html">PVC</a></li>
              <li><a href="lino.html">Lino</a></li>
              <li><a href="kork.html">Kork</a></li>
              <li><a href="teppich.html">Teppich</a></li>
              <li><a href="laminat.html">Laminat</a></li>
              <li><a href="parkett.html">Parkett</a></li>
              <li><a href="massivholz.html">Massivholzdielen</a></li>
            </ul>
          </li>
          <li><a href="tueren.html">T&uuml;ren</a>
            <ul>
              <li><a href="holzturen.html">Holzt&uuml;ren</a></li>
              <li><a href="glasturen.html">Glast&uuml;ren</a></li>
              <li><a href="zubehor.html">Zubeh&ouml;r</a></li>
            </ul>
          </li>
          <li><a href="decken.html">Decken</a></li>
          <li><a href="farben.html">Farben &amp;
&Ouml;le</a></li>
          <li><a href="bodentreppen.html">Bodentreppen</a></li>
          <li><a href="Kniestockturen.html">Kniestockt&uuml;ren</a></li>
          <li><a href="luftdichtung.html">Luftdichtungsmanschetten</a></li>
        </ul>
      </li>
      <li><a href="leistungen.html">Leistungen</a></li>
      <li><a href="partner.html">Partner</a></li>
      <li><a href="download.html">Download</a></li>
      <li><a href="impressum.html">Impressum</a>
        <ul>
          <li><a href="agbs.html">AGBs</a></li>
        </ul>
      </li>
        </ul>
      </div>
      <br>
      </td>
      <td rowspan="3"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_04.gif"
 height="515" width="28"></td>
      <td
 style="background-image: url(images/Layout_05.gif); vertical-align: top; font-family: Arial,Helvetica,sans-serif; color: rgb(51, 51, 51); text-align: left; font-size: 12px; line-height: normal; position: static; overflow: scroll; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; height: 501px; width: 801px;"
 rowspan="2">
      <div style="height: 480px; width: 750px; overflow: auto;">sd<br>
      </div>
      </td>
      <td rowspan="3"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_06.gif"
 height="515" width="17"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="492" width="1"></td>
    </tr>
    <tr>
      <td rowspan="2"> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_07.gif"
 height="23" width="142"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="9" width="1"></td>
    </tr>
    <tr>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Layout_08.gif" height="14"
 width="801"></td>
      <td> <img src="http://www.psd-tutorials.de/modules/Forum/images/Abstandhalter.gif"
 height="14" width="1"></td>
    </tr>
  </tbody>
</table>
</body>
</html>
 
O

OrlandoRafaelo

Guest

AW: Generator zur Erstellung einer Navigation



@ Pgreen

Ich habe den selben Code bei mir auf meine Homepage eingebunden ( ). In Firefox und Opera funktioniert das alles einwandfrei, aber IE öffnet die Unterkategorien nicht. Warum?

------------------
Codes

HEAD
...
Code:
  <link rel="stylesheet" type="text/css" href="2d-nav.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]-->
...


------------

BODY
....
Code:
     <div id="menu">
      <ul>

        <li>
          <ul>

            <li style="width: 164px;"><a href="#">Home
/ Start</a></li>
            <li style="width: 164px;"><a href="#">Kunstgalerien</a>
              <ul>

                <li style="width: 164px;"><a href="#">&Ouml;lgem&auml;lde</a>
                  <ul>

                    <li style="width: 164px;"><a href="#">Symetrischer
Surrealismus</a></li>
                    <li style="width: 164px;"><a href="#">Filigraner
Surrealismus</a></li>

                    <li style="width: 164px;"><a href="#">Fantastischer
Realismus</a></li>

                    <li style="width: 164px;"><a href="#">Magischer
Realismus</a></li>

                    <li style="width: 164px;"><a href="#">Dark
Fiction</a></li>

                    <li style="width: 164px;"><a href="#">&Ouml;lgem&auml;lde
1983-1986</a></li>

                    <li style="width: 164px;"><a href="#">&Ouml;lgem&auml;lde
1986-1988</a></li>

                    <li style="width: 164px;"><a href="#">&Ouml;lgem&auml;lde
1988-1992</a></li>

                    <li style="width: 164px;"><a href="#">&Ouml;lgem&auml;lde
1992-1996</a></li>
                  </ul>

                </li>

                <li style="width: 164px;"><a href="#">Zeichnungen</a>
                  <ul>

                    <li style="width: 164px;"><a href="#">Bleistiftzeichnungen</a></li>

                    <li style="width: 164px;"><a href="#">Aquarell
&amp; Kolorierte Zeichnungen</a></li>

                  </ul>

                </li>

                <li style="width: 164px;"><a href="#">Fresko</a>
                  <ul>
                    <li style="width: 164px;"><a href="#">Wandmalerei - Trompe D'Oeil - Illusionsmalerei</a></li>

                    <li style="width: 164px;"><a href="#">Architektur -
Interieur - Objekte &amp; Rauminstalation</a></li>

                  </ul>

                </li>

                <li style="width: 164px;"><a href="#">Mosaik</a>
                  <ul>

                    <li style="width: 164px;"><a href="#">Mosaik aus Glassmalten, Keramik, Gold, Fliesen und
Edelsteinen</a></li>

                    <li style="width: 164px;"><a href="#">Outdoor: Mosaikkunst an Fassade und Immobilie</a></li>

                  </ul>

                </li>

                <li style="width: 164px;"><a href="#">Landschaft
&amp; Skluptur</a>
                  <ul>

                    <li style="width: 164px;"><a href="#">Naturg&auml;rten - Parklandschaften,
Steinskulpturen</a></li>

                    <li style="width: 164px;"><a href="#">Skulpturen, Plastiken, Statuen, Figuren aus
Kunststeinen</a></li>
                  </ul>

                </li>

              </ul>

            </li>

            <li style="width: 164px;"><a href="#">Informationen</a>
              <ul>
                <li style="width: 164px;"><a href="#">Biographie</a></li>

                <li style="width: 164px;"><a href="#">Philosophie
-
kosmische
Kultur</a></li>

                <li style="width: 164px;"><a href="#">Technik
- Materialien</a></li>

                <li style="width: 164px;"><a href="#">Kontakt
zum
K&uuml;nstler</a></li>
              </ul>

            </li>

            <li style="width: 164px;"><a href="#">Links</a>
              <ul>

                <li style="width: 164px;"><a href="#">Empfehlungen
zu anderen Kunstseiten</a></li>

                <li style="width: 164px;"><a href="#">Kunstportale
/
Kunstforen</a></li>

                <li style="width: 164px;"><a href="#">Roland
Rafael Repczuk im Web</a></li>

              </ul>

            </li>

            <li style="width: 164px;"><a href="#">Impressum</a></li>
          </ul>

        </li>

      </ul>

      </div>

      </td>

      <td style="text-align: center; color: rgb(47, 140, 198); width: 636px;" valign="top"><br>
      <div style="text-align: center; margin-left: 1px; width: 641px;"><br>

      </div>
....

Kannst du mir weiterhelfen?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.157
Beiträge
2.581.866
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben