Pulldownmenü "Frameübergreifend"

html.de-Forum HTML, XHTML & CSS
1

Hey ho,
bin neu hier und hab direkt mal ne Frage (ja,ja das sind die richtigen…)

Und zwar mach ich für meine rFactor Liga aktuell ne HP läuft auch eigentlich ganz gut, nur jetzt hakts.

Und zwar wollte ich ein „Pulldownmenü“ (Man fährt über nen Button schon öffnet sich nen kleines Menü) haben, dass hab ich auch dank JAVA realisieren können, nur hab ich das Problem (meine Page ist in 4 Frames, Oben durchgehend und unten 3 Teile) Dass das Menü oben im Header ist und wenn ich das Menü nun öffne ist es nur im „Headerframe“ und geht nicht rüber. Ist es möglich das so hinzubekommen das es rüber geht? (Mit HTML, JAVA, ASP)

Was kann ich?
-HTML Basics
-JAVA Basics
-ASP Basics (hier nicht notwendig)

Hier die Bilder um es zu veranschaulichen:

Die Menübar:
http://www.abload.de/thumb/pic1j6el.png

„Ausgefahrene“ Menü:
http://www.abload.de/thumb/pic295c8.png

So soll es aussehen (Bildbearbeitung):
http://www.abload.de/thumb/pic325qd.png

Hoffe ihr könnt mir helfen
Danke im Vorraus

Ich hab mal die Header.html (mit Menübar) und die index.html (Frameset) als txt angehängt.[ATTACH]1586.vB[/ATTACH][ATTACH]1587.vB[/ATTACH]

2

Hallo,

das wird nichts werden, egal mit welcher Technik. Framegrenzen sind wie Fenstergrenzen fest, alles was darüber hinausreicht kann nicht angezeigt werden.

Von daher ist das jetzt vielleicht der richtige Zeitpunkt auf Frames zu verzichten.

Gruss

MrMurphy

3

Danke für deine Antwort, echt niederschmetternd, da die Ganze Seite nun steht und schon auf die Frames angepasst ist:(, gibt es wirklich keine Möglichkeit?

Ich mein der Browser geht ja auch über alles(Datei etc.), kann man das nuicht erzwingen?

4

Du kannst einen Browser nicht mit einer Webseite vergleichen, das wäre genau so als würdest du ein Buch mit einer Buchhandlung vergleichen.

Du kannst nichts erzwingen was einfach nicht möglich ist.

Was du tun kannst ist deine Webseite ohne Frames zu erstellen und so zukünftigen Problemen aus dem Weg zu gehen.
Ich weiss es ist niederschmetternd noch einmal von vorne anfangen zu müssen aber glaube mir es ist besser so.

Mit deinen Frames wirst du auch in Zukunft Probleme haben.

Gruss
Elroy

5

Hey ho,

ich wollte den Browser nicht mit der Page vergleichen^^

Ich wollte lediglich wissen ob es möglich ist das menü auf einen „höheren Layer“ zu legen, der sich jenseits von den Frames befindet.

Ich habe gelesen, dass es möglich sei das Menü „auszulagern“ und so die Grenzen der Frames zu umgehen. Allerdings standen dort leider keine Details und der Beitrag war von 2007…

Naja, ich werd die Page jetzt nicht „entframen“, da mir das mit den Grafiken dann einfach zu schade wär… Ich werde es einfach nur über Buttons steuern lassen und weiterhin hoffen, das einer nen Trick oder nen Kniff hat der mir helfen könnte.

6

geht sehrwohl. :slight_smile: zwar nicht sehr elegant, klappt aber auf meiner seite perfekt :wink:
framegrenzen sind zwar wie fenstergrenzen, du kannst aber das menü in einen darübergelegten kasten packen, den du dann auf der ganzen seite frei verschieben kannst, egal wohin. in deinem fall über dem frame, die menüleiste lässt du dann dort weg. die dropdowns gehen ganz frei nach unten, egal ob dort ein frame oder sonst was ist, denn der kasten mit der meinüleiste ist unabhängig vom rest. und das ganze geht nur mit css und ein bisschen java für die mousovereffekte, wenn gewünscht, natürlich kannst du die auch mit css machen…

hier mein code, gefunden hier: Tips und Tricks
meiner schon ein wenig „personalisiert“. das kannst du dann natürlich auch machen :wink:

	<div class="aussen" style="width: 105px">
	<span class="menutag" style="height:30px; width: 116px;"><a href="Frame_seiten/button.html" target="I1" onmouseover="button.src='BUTTONS/hover_it/button.png';" onmouseout="button.src='BUTTONS/normal/button_n.png';"  onmousedown="button.src='BUTTONS/click_it/button.png';" onmouseup="button.src='BUTTONS/hover_it/button_h.png';" onfocus="this.blur();">
	<img alt="Bild nicht gefunden" height="25" width="100" src="BUTTONS/normal/button.png" border="0" name="button"></a></span>
		<a class="innen-1" href="" target="I1" onfocus="this.blur()">Dropdown</a>
		<a class="innen" href="" target="I1" onfocus="this.blur()">Weiteres</a>
		<a class="innen" href="" target="I1" onfocus="this.blur()">Weiteres</a>
		<a class="innen" href="" target="I1" onfocus="this.blur()">Weiteres</a>
</div>

der css teil bleibt weitgehend gleich wie bei der vorlage, bis auf die width und hight, die natürlich zu den grafiken angepasst werden müssen. eventuell muss man auch die farben und rahmen, schriftart/farbe/größe und so weiter etwas anpassen.

viel spaß damit :slight_smile:

7

Hey ho,

danke für deine Antwort, hatte das Thema total vergessen. rotwerd

Trotz der tollen Anleitung bekomme ich das ganze nicht gebacken (weiß der Geier warum ich mal wieder auf dem Schlauch steh).

Naja, wäre super wenn ihr mir sagen könntet was ich mit dem CSS Teil 2 machen soll. Teil eins ist klar, man erstellt ne CSS datei und importiert sie auf die HTML Seite, nur was mach ich mit Teil 2?

Wenn ichs weglass ist das Menü vorhanden, dropt aber nicht, füge erstelle ich eine CSS Datei mit dem inhalt verschwindet das Menü…

Ich hoffe ihr könnt mir nochmal helfen, vllt findet sich ja sogar einer der mir das Menü so machen kann wie in der Vorlage/Anleitung beschrieben ist, aber ich freue mich über jede Art von Hilfe.

Danke im Voraus

8

achso ich hab das thema ebenfalls vergessen weil du nicht geantwortet hast :wink:
also es ist ratsam wenn du zuerst die menüleiste exakt wie in der vorlage auf der seite (link oben) einbaust, und sobald diese funktioniert weitere einstellungen fürs design vornimmst.

dazu machst du dann folgendes:
http://barrierefrei.e-workers.de/workshops/tricks/texte/dropdown.txt du kopierst den html teil in den body deiner index seite (oder zuerst zum testen auch auf eine leere html seite), nun hast du mal ne liste ohne menü.

dann kopierst du den CSS-teil 1 irgendwo in den head bereich der index seite, und zwar schließt du es natürlich in den tag [der css code] ein damit der browser weiß dass hier in css geschrieben wird.
jetzt sollte die menüleiste gleich ausschauen wie beim beispiel. du musst nur noch die verweise der div-class-innen und dic-class-aussen definieren und die texte im menü austauschen. nach möglichkeit bastelst du ein wenig am css teil rum um die sache toller aussehen zu lassen, oder fügst grafiken als buttons ein usw…

der CSS teil 2 behandelt nur den internet explorer, weil dieser die ganze sache ein bisschen anders anzeigt. (auch beim html teil gibt es einen abschnitt nur für den ie)
ich habe das problem ie, non-ie mit zwei verschiedenen index-seiten gelöst das ich auch andere probleme hatte, bei denen der ie separat behandelt werden muss. nur für das menü geht diese lösung natürlich einfacher, weil man ansonsten später äderungen an der index-seite immer zwei mal machen muss (einmal für die ie seite, und einmal für non-ie seite)

alles klar soweit :wink:
viel spaß damit, ich hoffe es klappt

edit: auf die vorschau im webeditor ist nach meiner erfahrung bei dieser technik übrigens kein verlass, also immer im browser öffnen :wink: übrigens ist es warscheinlich notwendig die menubox auf der seite zu positionieren, nämlich dahin, wo sie hinsoll. das machst du mit:

in diesem fall wird die ganze menubox 40 pixel nach unten und 5 pixel nach rechts verschoben, natürlich kannst du mit diesem code auch nur das "menue" positionieren.

(!) N.B.: übrigens ist im falle eines layouts mit frames und tabellen geschickter, die menuebox unterhalb der sichtbaren frames/tabellen etc. einzufügen. (nämlich wenn oberhalb der menüleiste noch was hinkommen soll, meist ein banner, überschriften, bilder…) dazu fügt man den html code von oben einfach unterhalb aller table-, iframes-tags, und was sonst noch im body steht, ein.
danach muss man nur noch die menuebox mit dem oben beschriebenen code an den seitenanfang oben positionieren, wo sie ja (meistens)ingehört. hierzu sind die werte negativ, zum beispiel: style="top: -728px; left -88px.

9

Hey ho, danke für deine schnelle Antwort.

Leider bin ich jetzt so weit wie vorher auch, ich habe zwar die Menüleiste, doch sie droppt nicht weder in FF noch in IE.

Ich „baue“ den code auf einer leeren Seite ein (also exakt das Beispiel), und will es dann später anpassen und an die richtige stelle packen, doch leider funktioniert nicht einmal das Beispiel, wie gesagt die Leiste ist da aber es droppt nicht.

vllt nen Fehler im Code?

<html>
<head>
<style type="text/css">
#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}

#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}

span.menutag {
display: block;
cursor: default;
}

</style>
</head>
<body>
<div id="menuebox">

    <div id="menue">
        <div class="aussen">
<span class="menutag">Produkte</span>
<a class="innen-1" href="#">Systeme</a>
<a class="innen" href="#">Speicher</a>
<a class="innen" href="#">Laufwerke</a>
<a class="innen" href="#">Monitore</a>
<a class="innen" href="#">Drucker</a>
<a class="innen" href="#">Zubehör</a>
        </div>
        <div class="aussen">
<span class="menutag">Leistungen</span>
<a class="innen-1" href="#">Netzwerke</a>
<a class="innen" href="#">Server</a>
<a class="innen" href="#">Wartung</a>
        </div>
        <div class="aussen">
<span class="menutag">Service</span>
<a class="innen-1" href="#">Reparatur</a>
<a class="innen" href="#">Konfiguration</a>
<a class="innen" href="#">Software</a>
<a class="innen" href="#">Schulung</a>
        </div>
        <div class="aussen">
<span class="menutag">Links</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
        </div>
    </div><!-- menue -->

<!-- Der folgende Block bedient nur IEs! 
     Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->

<!--[if IE]>
    <div class="stupidie">
<a class="auss" href="#"><span class="menutag">Produkte</span>
<table><tr><td>
<a class="inn" href="#">Systeme</a>
<a class="inn" href="#">Speicher</a>
<a class="inn" href="#">Laufwerke</a>
<a class="inn" href="#">Monitore</a>
<a class="inn" href="#">Drucker</a>
<a class="inn" href="#">Zubehör</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Leistungen</span>
<table><tr><td>
<a class="inn" href="#">Netzwerke</a>
<a class="inn" href="#">Server</a>
<a class="inn" href="#">Wartung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Service</span>
<table><tr><td>
<a class="inn" href="#">Reparatur</a>
<a class="inn" href="#">Konfiguration</a>
<a class="inn" href="#">Software</a>
<a class="inn" href="#">Schulung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Links</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
    </div><!-- stupidie -->
<![endif]-->

</div><!-- menuebox -->

</body>
</html>

Hoffe ihr könnt mir helfen Danke im Voraus

10

tatsächlich… :expressionless: hab deinen code runterkopiert und dropt nicht (ausser mit chrome), aber ich kann nirgends einen fehler finden…

hier ein gesamter html code einer von mir gefertigten default seite. (schon mit tabelle und positionierter menubar)

edit: sie erst weiter unten die nächste antwort bevor du das alles durchschaust…
[HTML]

Produkte Systeme Speicher Laufwe #menuebox { position: relative; height: 30px; } .stupidie { display: none; } #menue { position:absolute; top: 5px; left: 0; z-index: 200; } #menue .aussen { float: left; display: block; overflow: hidden; width: 8em; height: 1.3em; font-weight: bold; text-align: center; background-color: #dec79a; color: #513913; border: 1px solid; border-color: #d0843e #78561d #78561d #d0843e; } #menue .aussen:hover { height: auto; background-color: #624617; color: #fff; } a.innen-1 { margin-top: 2px; } a.innen, a.innen-1 { display: block; width: 7.9em; padding: 2px 0; text-decoration: none; font-weight: normal; border-bottom: 1px solid #78561d; background-color: #ecd8ae; color: #600; } a:visited.innen, a:visited.innen-1 { background-color: #ecd8ae; color:#555; } a:hover.innen, a:hover.innen-1 { background-color: #f7eedb; color: #900; } span.menutag { display: block; cursor: default; }
hier drunter ist platz für die box.
soso  
nene böbö
ratat bla 
<div id="menue" style="left: 36; top: -125px">
	<div class="aussen">

Produkte
Systeme
Speicher
Laufwerke
Monitore
Drucker
Zubehör



Leistungen
Netzwerke
Server
Wartung


Service
Reparatur
Konfiguration
Software
Schulung


Links
About Us
Partner
Referenzen

<![endif]–>

[/HTML]

diese dropt bei mir in allen browsern. kann allerdings auch keinen unterschied zu deiner version finden…

11

achje… nach einer serie von verzweifelnden versuchen hab ich endlich den fehler, so klein und unscheinbar er auch ist, er verhindert dass der CSS teil richtig erkannt wird, und daher wird nicht gedroppt… im text stimmt also alles, dir fehlt nur der korrekte doctype. mein webeditor (microsoft expression web3) erstellt den automatisch, darum bin ich zuerst nicht auf den fehler gekommen…

also schreib einfach das hier

ganz oben (oberhalb des -tags) in dein dokument, und es müsste klappen :wink:

12

Hey ho,
oh vielen Dank, lag wirklich daran. Super jetzt kanns endlich weiter gehn und ich mein Projekt beenden, natürlich wirst du eine dicke Erwähnung auf meiner HP bekommen.

Nochmal Tausend dank.

13

super freut mich dass ich dir weiterhelfen konnte :wink: viel spaß mit deiner seite!

14

Hey ho,

jetzt hab ich zwar ein anderes Menü, aber „Frameübergreifend“ ist es trotzdem nicht, es passiert das gleiche, wie in meinem ersten post beschrieben.

Das Menü droppt wieder unter den „main-Frame“ und ich kann den „Header-Frame“ wieder scrollen.

15

Hallo.

Zum einen hast du den falschen Doctype.
Für Frames musst du diesen verwenden:[HTML] [/HTML]zum anderen ist der Code den man dir gegeben hat semantisch nicht korrekt.

Ein Menü wird als Liste ausgezeichnet und nicht als Tabellen/Div wirrwarr.
Mit einer verschachtelten Liste kannst du dann ein Dropdown Menü erstellen.

Mit ist allerdings immer noch ein Rätsel wie das bei einem Frameset funktionieren soll.

Am besten du lässt das Frameset sein. Diese Methode Webseiten zu erstellen stammt noch aus den letzten Jahrhundert und ist Benutzerunfreundlich.

Gruss
Elroy

16

Hey ho,

ich sehe ja ein, dass die Nummer mit den Frames veraltet ist etc., aber für diese Art von Homepage fiel mir keine bessere Möglichkeit ein es zu Realisieren (mit den Mitteln, die ich beherrsche).

Zu den Frames, mir schwebt da aber was im Hinterkopf, dass man die Framegrenzen irgendwie umgehen kann indem man etwas bestimmtes macht, leider weiß ich nicht mehr wie das geht. Des wegen hoff ich ja immer noch, dass mir hier jemand weiter helfen kann und ich bin echt für jeden Hinweis, wie es realisierbar ist dankbar.

17

Java ist zu JavaScript so wie Tür zu Türkei – es hat nichts miteinander zu tun. Ihr meint JavaScript.

Eventuell ließe sich irgendwas mit iframes zusammenschustern, aber ich empfehle es definitiv nicht.

[html]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>
</head>

<body>

    <iframe src="http://www.html.de/" width="400" height="300"></iframe>
    <div style="position: absolute; top: 30px; left: 300px;
                background: red; width: 300px;">
        Dies ist ein Test.
    </div>

</body>
[/html]
18

Hey ho,

dein Test Code sieht ja sehr viel versprechend aus, werde ihn morgen oder so mal testen (hab heute leider keine Zeit).

Danke für deine/eure Hilfe.

Wie gesagt ich sehe ein das es veraltet ist und eigentlich davon abzuraten ist, aber es ist mein erstes größeres Projekt und jetzt bin ich schon soweit jetzt dreh ich nicht mehr um;) Natürlich würde ich euren Rat sofort befolgen wenn ich noch am Anfang wäre aber wie gesagt ich bin fast fertig, da wäre eine Aufgabe sehr, sehr traurig. Bei einem neuen Projekt würde ich es nie mehr so machen, versprochen;)

Vllt hat ja noch jemand eine andere Idee, mehre Varianten schaden nie und ich bin für jede dankbar.

Nochmal vielen Dank für alle Hilfe bis jetzt;)

Dieses Board/Forum ist echt Hammer, sehr hilfsbereite Member und alles geht ratz fratz;)

19

Hey ho,
mit iFrames hat es leider nicht geklappt, (hätte ich mir aber auch denken können) denn es sind wie der Name sagt Inline Frames, also nicht geeignet um eine ganze Seite damit zu erstellen.

Vllt hat noch jemand eine andere Idee?

Danke im Voraus.

20

Nur im Firefox getestet. Ich weiß nicht, ob es in anderen Browsern auch nur ansatzweise funktioniert.

Ich behaupte mal, eine andere Möglichkeit gibt es nicht. Take it or leave it. :wink:

[html]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>
* { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; /*position: relative;*/ background: #eee; overflow: hidden; } iframe { width: 100%; height: 100%; } #menu { position: absolute; top: 0; left: 0; right: 0; height: 100px; background: #f00; } #menu .item { width: 100px; height: 20px; background: #0ff; margin: 30px 0 0 300px; } #menu .item .content { display: none; z-index: 100; height: 300px; width: 200px; background: #fc0; } #menu .item:hover .content { display: block; } #navframe-wrapper { position: absolute; top: 100px; left: 0; bottom: 0; width: 200px; background: #0f0; } #contentframe-wrapper { position: absolute; top: 100px; left: 200px; right: 200px; bottom: 0; width: auto; background: #ccc; } #sideframe-wrapper { position: absolute; top: 100px; right: 0; bottom: 0; width: 200px; background: #00f; } 
</head>

<body>

    <div id="navframe-wrapper">
        <iframe name="navframe" id="navframe" frameborder="0"></iframe>
    </div>

    <div id="contentframe-wrapper">
        <iframe name="contentframe" id="contentframe" src="http://www.html.de/" frameborder="0"></iframe>
    </div>

    <div id="sideframe-wrapper">
        <iframe name="sideframe" id="sideframe" frameborder="0"></iframe>
    </div>

    <div id="menu">
        <div class="item">
            <p>hover me</p>
            <div class="content">
                <p><a target="contentframe" href="http://example.org/">example.org</a></p>
                <p><a target="contentframe" href="http://www.w3.org/">w3.org</a></p>
                <p><a target="contentframe" href="http://www.whatwg.org/">whatwg.org</a></p>
                <p><a target="contentframe" href="http://www.html.de/">html.de</a></p>
                
            </div>
        </div>
    </div>

</body>
[/html]