• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Klappmenu in Tabellennavi??

M

mari87

Neues Mitglied
Hallo zusammen,

ich bin schon total verzweifelt, weil ich meine Navi einfach nicht hinbekomme.
Ich hatte sie als Tabelle erstellt und im Nachhinein ist mir aufgefallen, dass ein Menüpunkt unbedingt als Klappmenü gestaltet werden soll.
Ich finde leider nur Anleitungen, wie man eine Listennavi in ein Klappmenü umwandelt, aber nicht für eine Tabelle...
Ich habe auch schon versucht, die Tabelle in eine Liste umzuwandeln, leider hauts mir dann alles durcheinander...

Kann mir da jemand helfen?? Ich wäre echt super-dankbar!! :razz:

Liebe Grüße,
Mari
 
Werbung:
Hallo mari87,

könntest du den Quellcode posten?
Mit einer Tabelle wird es schwierig bzw. habe ich noch nicht gesehen. Mit "<li>..." ist es wesentlich leichter und besser eine Navigation mit "DropDown" zu erstellen.

Gruß
 
Hallo,
ok, hier der Quellcode...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-15">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>homepage</title>


<link rel="stylesheet" href="mediation.css" type="text/css">
</head>

<body>
<div id="main_top">
</div>
<div class="buleiste">
<table align="center" id="menu" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Home</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Situation</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Konflikt</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Mediation</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Experte</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Kultur</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Literatur</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html" >Impressum</a></td><td class="menutrenn"><img src="images/Trennnav.jpg" width="2" height="56" border="0" alt=""></td>
</tr>
</table>
</div>
<!-- Ende Navigation-->

<div id="main" align="center">
<div id="main2" align="center">
<div id="inbox">
<h1> Layout </h1>
Donec lobortis, justo ut congue tempus, dui justo mattis nisl, et venenatis ligula urna at nisi. Praesent eget risus semper enim laoreet ultricies. Vivamus risus metus, lacinia et, semper ac, porta ac, lectus. Pellentesque placerat. Sed nec lorem vel neque bibendum accumsan. Fusce condimentum placerat orci. Fusce dictum. Nam sed pede at nisi varius pretium. Integer pharetra ultrices quam. Praesent gravida nulla at ipsum. Integer vel nisl eget nisi elementum feugiat. Curabitur justo massa, blandit quis, aliquet sit amet, fermentum sed, nibh. Sed faucibus. Nam ornare feugiat sapien. Nulla facilisi. Quisque commodo facilisis nibh. Fusce at sapien congue massa bibendum vehicula. Sed a leo ut nulla cursus scelerisque.
</div>
</div>
</div>

<!-- Ende Inhalt-->

<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fussb">
Digital Venture GmbH & Co.KG<br>
Zidonglou Section No. 10 <br>
610000 Chengdu<br>
<img src="images/pixelspace.gif" width="300" height="1" border="0" alt="" style="background-color: #333333;margin-top:3px;margin-bottom:3px"><br>
<span style="color: #FFFFFF;background-color:;">
China
</td>
</tr>
</table>
<!-- ende fuss-->
</body>


Ich hoffe, ihr könnt mir weiterhelfen!!! :-)

LG
 
Werbung:
dotnet schrieb:
Die Tabelle könntest du danach auch durch einen div ersetzen ("<table align="center" id="menu" border="0" cellpadding="0" cellspacing="0" >")
Zum Vergrößern anklicken....
Warum sollte er das machen? Erstens ist da schon ein unnötiges div, welches nichts gruppiert um die Tabelle und zweitens ist eine Liste ebenfalls ein Blockelement, welches nicht von einem div umgeben sein muss. Eine simple verschachtelte Liste ist ausreichend.

HTML: 
<ul>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>
 
Er will doch ein Klappmenü, klar, kann er das über css usw. machen, ist aber auch aufwändiger, geht doch mittels jQuery easy. Ja ok, das mit dem div könnte er lassen :D.
 
Werbung:
dotnet schrieb:
Er will doch ein Klappmenü
Zum Vergrößern anklicken....
Und das ist der abgesehen von den fehlenden Links in den Listenelementen die richtige Grundstruktur für ein Klappmenü.

klar, kann er das über css usw. machen, ist aber auch aufwändiger
Zum Vergrößern anklicken....
Es ist nicht aufwändiger als mit JavaScript, aber deutlich benutzerfreundlicher.

geht doch mittels jQuery easy.
Zum Vergrößern anklicken....
Ein Menü, welches mit JavaScript erstellt wird hat den Nachteil, dass es bei deaktiviertem JavaScript nicht mehr funktioniert und der Besucher nicht durch die Seite navigieren kann. Ein Klappmenü, welches mit CSS erstellt worden ist, funktioniert hingegen immer.
 
Das ist ja kein Problem und deine Lösung führt ja auch zum Ziel, nur habe ich hier noch die gravierenden Nachteile aufgezählt, die deine Methode mit sich bringt und eine Alternative aufgezeigt.
 
Werbung:
Hallo,
also erst mal danke für die vielen Antworten.
Ich bin übrigens eine SIE, weil ihr immer von "er..." geschrieben habt ;-)

Ok, ich seh schon, ich komm nicht drum herum das ganze noch mal als Liste hinzuwursten. Das Problem dabei ist immer nur, dass die "Menutrenns" nicht in der Navi sondern darüber angezeigt werden. Wie kann ich denn so Trennstriche in die Liste einbauen??

Danke schon mal...

LG
 
Hierfür kannst du das CSS-Attribut list-style-image nutzen order die Grafik als Hintergrund des <li>-Tags einsetzen.

Beispiele

list-style-image-Methode:
HTML: 
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
CSS-Code:
Code: 
ul{
list-style-image: url(images/Trennnav.jpg);
}
Background-Methode:
HTML: 
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
CSS-Code:
Code: 
ul li{
background: url(images/Trennnav.jpg) no-repeat;
padding-left: 5px; //Abstand links, damit sich Text und Bild nicht überlappen
}
 
Werbung:
mari87 schrieb:
Ich bin übrigens eine SIE, weil ihr immer von "er..." geschrieben habt ;-)
Zum Vergrößern anklicken....
Oh sorry, dann streich alle 'er' und setze 'sie' ;).

Layout jeglicher Form wird mit CSS gemacht. Für Trennstriche z.B. bietet sich an einen Rahmen an der entsprechenden Stelle für das Element zu definieren.
 
Hey,
oh mann ich dreh gleich durch... es klappt einfach nicht....
mein Code sieht jetzt so aus:
<div id="menu" align="center" border="0" cellpadding="0" cellspacing="0" >
<ul>
<li>
<a href="index.html" >Home</a> </li>
</ul>
<ul>
<li>
<a href="index.html" >Situation</a> </li>
</ul>
<ul>
<li>
<a href="index.html" >Konflikt</a> </li>
</ul>
<ul>
<li>
<a href="index.html" >Mediation</a>
<ul>
<li>
<a href="#">eins</a> </li>
<li>
<a href="#">zwei ...</a> </li>
<li>
<a href="#">drei ...</a> </li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="index.html" >Experte</a> </li>
</ul>
<ul>
<li>
<a href="index.html" >Kultur</a> </li>
</ul>
<ul>
<li>
<a href="index.html" >Literatur</a> </li>
</ul>
<ul>
<li>
<a href="index.html" >Impressum</a> </li>
</ul>
</div>

Und mein CSS so:
#menu a, #menu a:visited , #menu a:active {display: block;
color: #AFAFAF;
text-decoration:none ;
font-size: 16px;
font-family:arial, helvetica, tahoma ,verdana, sans-serif;
padding-left: 2px; padding-right: 2px;padding-bottom: 0px; padding-top:0px;
border-left:solid 0px #fff;border-top:solid 0px #fff;
line-height:56px;
height:56px;
width:90px;
text-align:center;
background-color:#;
background-image:url(images/Buttonnav.jpg);
background-repeat:repeat-x;
}

#menu a:hover {
color:#fff;
background:transparent;
text-decoration:none ;
background-image:url(images/Button2nav.jpg);
background-repeat:repeat-x;
}


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

#menu ul{
list-style-image: url(images/Trennnav.jpg);
}

#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 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;}

Irgendwo muss da ein Fehler liegen, ich komm nicht drauf... vielleicht könnt ihr mir noch einmal helfen!! Bitte! :-)

Daaanke
 
Werbung:
Also, es passt jetzt, bis auf das, dass die Trennstriche irgendwie nach oben verschoben sind und zu weit weg vom Wort. Wie kann man das ändern??
 
Mit margin regelst du die Aussenabstände, mit padding die Innenabstände.

Nicht jeder Eintrag ist eine eigene Liste wie in deinem Code, guck dir mein Beispiel nochmal an, dann siehst du den Unterschied.

Das div ist auch überflüssig und cellspacing und cellpadding gibt es für divs nicht.
 
Hallo.

Ich habs dir mal kurz gemacht, so siehts glaub ich gut aus:
HTML: 
<ul>
<li><a href="index.html" >Home</a> </li>
<li><a href="index.html" >Situation</a> </li>
<li><a href="index.html" >Konflikt</a> </li>
<li><a href="index.html" >Mediation</a>
<ul>
<li><a href="#">eins</a> </li>
<li><a href="#">zwei ...</a> </li>
<li><a href="#">drei ...</a> </li>
</ul>
</li>
<li><a href="index.html" >Experte</a> </li>
<li><a href="index.html" >Kultur</a> </li>
<li><a href="index.html" >Literatur</a> </li>
<li><a href="index.html" >Impressum</a> </li>
</ul>
Gruss
Elroy
 
Werbung:
Danke Elroy... so hätte ich es jetzt auch gehabt... aber ich glaub wegen meinem CSS stimmt was nicht. Die Liste ist jetzt auch noch untereinander, obwohl ich schon float: left gemacht habe...

sorry,
ich hoffe ich nerve euch nicht, aber ich sitze jetzt schon seit Stunden da dran und ich schaffs irgendwie nicht...
 
Hallo.

Also du hast dein Menü absolut positioniert:
Code: 
#menu ul ul { position: absolute; z-index: 500; }
 
    #menu ul ul ul { position: absolute; top: 0; left: 100%; }
Also kann da auch nichts floaten.

Das einzige float das ich sehe ist hier:
Code: 
#menu { width: 100%; background: #eee; float: left; }
Wenn du eine horizontale Navigation willst musst du die Menüpunkte floaten und nicht das Menü selbst.

Ich persönlich benutze für meine horizontale Navigation allerdings display: inline.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben