PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Drop-Down-Menü

Jevi
2007-01-14, 17:05:35
Hallo!

Habe folgendes Problem: Ich habe ein Drop Down Menü erstellt (Hover Menü) welches nicht so funktioniert wie ich es will. Nun meine Seite ist in 3 Bereiche geteilt siehe Anhang und im obersten Teil der Seite ist die Navigationsleiste. An den Optionen ist jeweils ein Drop Down Menü. So wenn ich jetzt mit der Maus auf eine der Optionen gehe öffnet sich ein Menü richtig so wie ich es will aber nur leider im Oberen Bereich und viele Teile werden verdeckt. Ich will, aber dass es im oberen Bereich sich öffnet und nicht vom mittleren Teil verdeckt wird. Es soll also auf Wunsch mir auch die Möglichkeit bieten so viele Optionen, ohne zu kaskadieren, einfügen zu lassen wie ich will so, dass diese dann bis an das untere ende der Seite reichen. Im Anhang sieht man wie es aussehen soll.
Was habe ich da für Möglichkeiten? Vielleicht kann sich jemand die Mühe machen und mir deutliche Beispiele zur verfügung stellen. Zu erwähnen ist vielleicht noch das meine Kentnisse recht mager sind und ich viel mit einem Editor mache...
TjP
2007-01-14, 21:32:05
Ich denke es wäre am besten wenn du die Frames weglassen würdest.
Wenn nicht, dann versuchs mal mit position:absolute für den Layer (Falls du div-Layer verwendest), ich glaub dann müsste es funktionieren.
Allerdings würde es viel einfacher sein dir zu helfen wenn du einfach den Quelltext deiner Site posten würdest ;)
Jevi
2007-01-15, 15:36:40
Hier ist der Quelltext des oberen Frames...


<html>
<head><style type="text/css">

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color:;
border:;
}

.hovermenu ul li a:hover{
background-color: burlywood;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
<title>Muster</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Namo WebEditor">
</head>

<body bgcolor="ffcc99" background="grafik_spez/grafik_o">
<table width="100%" border="0">
<tr>
<td height="41" width="99%" valign="top">
<table width="76%" border="0" height="81">
<tr>
<td height="77" width="644">

<div class="hovermenu">
<ul>
<li>
<p><a href="Navigation Home.htm" target="mainFrame"><img src="grafik_spez/Navigation-Home.gif" width="50" height="20" border="0"></a><a href="Spezialreisen.htm" target="mainFrame"><img src="grafik_spez/Navigation-Spen.gif" width="100" height="20" border="0"></a><a href="Erlebnisreisen.htm" target="mainFrame"><img src="grafik_spez/Navigation-Erlen.gif" width="110" height="20" border="0"></a><a href="Aktuelle.htm" target="mainFrame"><img src="grafik_spez/Navigation-Aktuelle.gif"
width="60" height="20" border="0"></a><a href="Hpunkte.htm" target="mainFrame"><img src="grafik_spez/Navigation-Honkte.gif" width="90" height="20" border="0"></a><a href="Pr.htm" target="mainFrame"><img src="grafik_spez/Navigation-Pr.gif"
width="60" height="20" border="0"></a> </li>
</td>
</tr>
</table>

</td>
<td height="41" width="1%">
<div align="right"><a href="mit.htm" target="mainFrame"><img src="grafik_spez/Muster2.gif" width="279" height="82" Border=0></a></div>
</td>
</tr>
</table>
</div>
</body>
</html>



Bis auf Veränderung einiger Namen ist es der ganze Text.
Edit: Bitte nicht wundern es wurde auch einiges per Editor realisiert..
darph
2007-01-16, 13:40:08
Mit Frames kriegst du das nicht ohne massivem Aufwand hin.


Und dann: Nimm doch bitte die [html]-Codes für's Posten von HTML hier, die erhalten die Einrückungen und bieten Syntax-Highlighting.
Jevi
2007-01-16, 15:53:20
Wenn ich diese art eines Menüs nehme so funktioniert das. Weiß aber nicht was hier nun so viel anders ist...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Verweise
</title>
<meta name="description" content="Die Beschreibung der Seite" />
<meta name="keywords" content="Die Stichworte f&uuml;r Suchmaschinen" />
<meta name="author" content="Jevi" />
<meta name="DC.Publisher" content="Jevi" />
<meta name="DC.Date" content="2006-10-24" />
<meta name="DC.Identifier" content="http://myweb.de/html" />
<meta name="DC.Language" content="de" />
<meta name="DC.Rights" content="All rights reserved" />
<link rel="shortcut icon" href="images/dein_fav.ico" />
<link rel="stylesheet" type="text/css" href="deine_styledatei.css" />
<script type="text/javascript">
function Go (x) {
if (x == "nothing") {
document.forms[0].reset();
document.forms[0].elements[0].blur();
return;
} else {
if (x == "end") {
top.location.href = parent.frames[1].location;
} else {
parent.frames[1].location.href = x;
document.forms[0].reset();
document.forms[0].elements[0].blur();
}
}
}
</script>
</head>
<body>
<div style="background-image: url(images/deine_hintergrunggrafik.gif); background-repeat: x-repeat;" class="main">
<form action="">
<select size="1" name="Auswahl"
onchange="Go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)"
style="margin: 0em 2.2em 0em 0em; float: right; width: 220px; background-color: rgb(255, 206, 99); font-size: 12px; font-family: Verdana, sans-serif; color: rgb(10, 36, 106);">
<option value="http://www.computerbase.de/">&nbsp;
&nbsp;STARTSEITE</option>
<option value="http://www.google.de/">&nbsp;
&nbsp; &nbsp; SEITE 02</option>
<option value="http://www.apachefriends.org/de/projects.html">&nbsp;
&nbsp; &nbsp; SEITE 03 </option>
<option value="http://www.phpbb.de/">&nbsp;
&nbsp; &nbsp; SEITE 04 </option>
<option value="006.html">&nbsp;
&nbsp; &nbsp; SEITE 05 </option>
<option value="007.html">&nbsp;
&nbsp; &nbsp; SEITE 06 </option>
<option value="008.html">&nbsp;
&nbsp; &nbsp; SEITE 07 </option>
<option value="009.html">&nbsp;
&nbsp; &nbsp; SEITE 08 </option>
<option value="010.html">&nbsp;
&nbsp; &nbsp; SEITE 09 </option>
<option value="011.html">&nbsp;
&nbsp; &nbsp; SEITE 10 </option>
<option value="012.html">&nbsp;
&nbsp; &nbsp; SEITE 11 </option>
</select>
</form>
</div>
</body>
</html>__________________
darph
2007-01-16, 16:27:11
Weil das ein Formular ist, wie es sonst auch überall in Windows verwendet wird. Das andere ist ein HTML-Content, und der ist eben nur in "seinem" Frame sichtbar.
Jevi
2007-01-16, 16:46:01
Ne Idee wie ich das lösen könnte. Würde doch ungerne auf das Menü verzichten und die Teilung der Seite ist nicht zu umgehen...
darph
2007-01-16, 19:22:48
und die Teilung der Seite ist nicht zu umgehen...
PHP Includes benutzen. :)
Sephiroth
2007-01-16, 19:58:03
PHP Includes benutzen. :)
Er meint sicher die Frames/das Frame-Layout. ;)

Mit Iframes statt normalen Frames müsste es gehen, ohne das das Menü nur im Top-Frame bleibt.
Jevi
2007-01-16, 22:12:37
Hehe.. Ihr seit lustig. Da soll einer der noch mit nem Editor hantiert verstehen was ihr meint, aber das wird schon. Lerne ja dauernd was neues.
TjP
2007-01-17, 00:12:53
Ja Iframes wären eine Idee (d.h. eine normale Seite erstellen mit der Navi drin und darin ein großes Iframe für den Inhalt). Hab aber mal gelesen dass die nicht so gut sein sollen, weiß aber nicht mehr warum :tongue: .
Wenn du noch keine Erfahrungen mit hmtl hast würde ich dir empfehlen dich erstmal zu informieren, z.B. unter http://de.selfhtml.org.
007
2007-01-17, 12:33:35
Ja Iframes wären eine Idee (d.h. eine normale Seite erstellen mit der Navi drin und darin ein großes Iframe für den Inhalt). Hab aber mal gelesen dass die nicht so gut sein sollen, weiß aber nicht mehr warum :tongue: .
Wenn du noch keine Erfahrungen mit hmtl hast würde ich dir empfehlen dich erstmal zu informieren, z.B. unter http://de.selfhtml.org.


Na ja, sie wurden eine zeitlang mal nur vom IE unterstützt. Grundlegend sind die Dinger allerdings ganz nützlich, finde ich.