Javascript Menü verzieht sich bei anderer Auflösung

[yve1971]

Ich habe ein Javascriptmenü, was so weit auch wunderbar funktioniert, nur ein riesen großes Problem habe ich, wenn ich die Bildschirmauflösungen ändere (also, in Ansicht mit nem 15 Zoller, 19 Zoller und so weiter Monitor), es wird mir nur richtig dargestellt in einem 17 Zoller Monitor.

Ich wollte das Javascriptmenü zentriert machen, aber es verzeiht sich entweder nach Links, oder rechts.

Nur weiß ich nicht, wie ich das hin bekommen kann, dass es bei JEDER Bildschirmauflösung gleich dargestellt wird (bei einem 17 Zoller wird es vernünftig dargestellt).
Ich habe gestern schon so viel gebastelt und gemacht und getahn, dass ich nun nicht mehr weiter weiß. Ich habe das Menü so weit hinbekommen, dass es nun in jedem Browser so weit richtig angezeigt wird, (die hauptkats), nun passen aber die sub und sub-, submenüs nicht mehr und wollte die auch anpassen, blos wenn ich das wieder mache, verzieht sich wieder alles und es wird mir wieder falsch dargestellt.

Nun mal ein Beispiel, wie es eigentlich im ursprung war...

das wäre die darstellung mit einem 19 Zoller

Und das die Darstellung mit einem 15 Zoller

Im 17 Zoller wird es richtig dargestellt...

Das wäre der Link zu der Seite http://www.abc-des-essens.de/test2/

In der menue.css sind alle auf absolute von der Position, wenn ich mein Menü, nein meine komplette HP aber linkszentriert mache, wird es mir in der Auflösung richtig dargestellt, nur möchte ich meine HP nicht linkszentriert machen, da ich finde, dass es lieblos gemacht wurde und einfach dranngeklatscht aussieht.

http://www.abc-des-essens.de/web10/version2.html, so wäre es links und da passt es, warum auch immer...

Ich hoffe, mir kann einer hier helfen, dass ich das javascriptmenü endlich zentriert hinbekomme und es sich nicht verzeiht bei anderen Auflösungen.

Gruß und danke schon mal yve

 

[pit-r]

Moin!

Hab Deinen Thread verschoben, da Dein Problem mit Javascript nix zu tun hat.

Gruß - Pit

 

[yve1971]

Ups... ich dachte, es liegt echt an dem javascript... ich hoffe, mir kann einer helfen, da ich echt am verzweifeln bin, wenn ich meine Seite ohne javascriptmenü mache, wird es mir nämlich richtig dargestellt...

wie meine richtige naja, alte hp, da ist nichts mit javascript drin und es wird mir in der Auflösung richtig dargestellt...

Gruß yve

 

[Harry Hunt]

Du hast die Navigation absolut positioniert und das Containerlement auch. Das Problem liegt also bei deinem CSS. Es gibt an sich keinen Grund warum irgendwas auf deiner Seite mit Ausnahme der Aufklappmenüs absolut positioniert sein sollte.
Abgesehen davon hast du keinen DOCTYPE und ein großer Teil des HTML für deine Navigation ist im HEAD-Bereich deines Codes wo das schonmal absolut nix zu suchen hat.
Ein DOCTYPE ist ratsam, weil sich sonst manche Browser absolut unberechenbar verhalten.

Wenn du die Probleme alle beseitigst, sollte es funktionieren.

 

[yve1971]

Ja, dann wäre es nett, wenn man mir das mal erklären könnte, ich habe das Menü anhand eines Tuts erstellt, wenn ich ganz ehrlich sein soll, habe ich nicht sehr viel Ahnung, wie ich nun die änderungen vornehmen soll.

Ich habe eine Datei erstellt, was verschiedene Browser betrifft... http://www.abc-des-essens.de/test2/menue_oben.js ich weiß nicht, ob es nun richtig ist, oder nicht... und ob das, dass ist, was Du gerade erzählst...

Ich bräuchte jemanden, der mich an die Hand nimmt und es mit genauer erklärt :amazed:

Gruß yve

 

[pit-r]

Hi!

Natürlich hat Dein Problem mit dem Menü zu tun, aber im CSS-Bereich. Das Script macht ja nix anderes, als die visibility von divs zwischen "hidden" und "visible" zu switchen. Komme heute leider nicht dazu, mich da mal durchzuwuseln. Hoffentlich knöpft sich jemand anders Dein Thema mal vor.

Gruß - Pit

Edit: #4 und #5 nicht gesehen - sorry.

Noch'n edit (und das hat trotz Thread-Verschiebung mit Javascript zu tun ):
Wenn Du schon Netscape4 berücksichtigst, solltest Du eine Kleinigkeit in der .js-Datei verändern. In NS4 sind die Werte für visibility "show" und "hide".

 

[Harry Hunt]

Ich hab mir deine Seite mal heruntergeladen und ein bisschen rumgespielt.

Wenn du die komplette Navigation aus dem HEAD-Bereich in den BODY-Bereich verschiebst und dann ein
<div style="position: relative; width: 800px; margin: 0 auto">

</div>

drumherum baust, und dann in der menue.css noch alle Koordinaten Anpasst (so dass die erste "Leiste" ein Left: 0px, die zweite Left: 140px usw. hat) funktioniert's.
Ist zwar nachwievor nicht optimal das alles mit absoluter Positionierung zu machen, aber das ist ein anderes Thema

 

[yve1971]

Hi!

Natürlich hat Dein Problem mit dem Menü zu tun, aber im CSS-Bereich. Das Script macht ja nix anderes, als die visibility von divs zwischen "hidden" und "visible" zu switchen. Komme heute leider nicht dazu, mich da mal durchzuwuseln. Hoffentlich knöpft sich jemand anders Dein Thema mal vor.

Gruß - Pit

Edit: #4 und #5 nicht gesehen - sorry.

Noch'n edit (und das hat trotz Thread-Verschiebung mit Javascript zu tun ):
Wenn Du schon Netscape4 berücksichtigst, solltest Du eine Kleinigkeit in der .js-Datei verändern. In NS4 sind die Werte für visibility "show" und "hide".

Okay, ich werde versuchen es zu berücksichtigen

Sobald ich es hinbekommen habe, dass mir mein Menü bei JEDER Auflösung richtig dargestellt wird

Da ich es wirklich nicht linksbündig machen möchte, da ich so eine HP voll lieblos finde ich hoffe ja, dass mir hier einer es genauer erklären kann und mich an die Hand nimmt, werde dann natürlich, als Gegenleistung in meine Linkliste als helfer überhaut bei mir mit reinnehmen

Gruß yve

 

[Harry Hunt]

Nur zur Sicherheit: ich glaube deine Frage beantwortet zu haben. Nicht dass du das übersiehst (siehe #7)

 

[yve1971]

Ich hab mir deine Seite mal heruntergeladen und ein bisschen rumgespielt.

Wenn du die komplette Navigation aus dem HEAD-Bereich in den BODY-Bereich verschiebst und dann ein
<div style="position: relative; width: 800px; margin: 0 auto">

</div>

drumherum baust, und dann in der menue.css noch alle Koordinaten Anpasst (so dass die erste "Leiste" ein Left: 0px, die zweite Left: 140px usw. hat) funktioniert's.
Ist zwar nachwievor nicht optimal das alles mit absoluter Positionierung zu machen, aber das ist ein anderes Thema

Okay, es funktioniert so weit, dass menü wird nicht mehr verzehrt, dafür erst mein dickes, fettes Dankeschön .

Nun habe ich ein problem damit, dass mir der banner doppelt und freifach angezeigt wird die sub-, submenüs, muss ich noch anpassen, von der Position, wo ich auch gerade bei bin.

http://www.abc-des-essens.de/test2/

Wie bekomme ich es nun hin, dass mir der banner nur einmal dargestellt wird?

Gruß yve

 

[Harry Hunt]

Gern geschehen!

So müsstest du das Banner-Problem reparieren können:
<div style="position: relative; width: 800px; height: HÖHE DEINES BANNERSpx; margin: 0 auto">
...
</div>

 

[yve1971]

Gern geschehen!

So müsstest du das Banner-Problem reparieren können:
<div style="position: relative; width: 800px; height: HÖHE DEINES BANNERSpx; margin: 0 auto">
...
</div>

Ähmm ich raffe das im mom nicht wirklich... sorry, der code mit meinem Banner schaut wie folgt aus:

<div align="center">
<table  width="800" border="0" cellpadding="2" cellspacing="1">
  <tr>
    <td  height="370" align="center" background="images/back.gif" style="font-size:11pt"><p align="center"><span class="Stil6"> </span></p>

Ich habe da ja schon die höhe meines Banners drin, nur wenn ich die 370 auf 50 oder 40 ändere, wird es nicht übernommen

Ich raffe nicht, wie ich den Code nun umsetzten muss, sorry, für meine blöden Fragen, aber im mom raffe ich echt nichts mehr...

Gruß yve

 

[pit-r]

Moin!

Die td enthält ja mehr als nur das Banner. Mach mal sowas:

background="images/back.gif" => rausnehmen und als style-Attribute:
style="font-size:11pt;background-image:url(images/back.gif);background-repeat:no-repeat"

Ahoi - Pit

 

[yve1971]

Ich habe erst mal den Banner komplett rausgenommen, das Menü ist ja so, sehr groß, deswegen wird das Menü ja komplett oben angezeigt und ich kann es nicht auf die Größe des Banners rücken, wenn ich das Menü (also das Ding <div style="position: relative; width: 800px; margin: 0 auto">
blah, blah, blah
</div> versuche auf die Größe zu richten, funktioniert es nicht

wenn ich den Code von Dir in die format.css mit reinpacke, habe ich nen schwarzen Banner, bzw. es ist ein schwarzer BG zu sehen

Leute nimmt es mir nicht übel, dass ich soooooo viele Fragen stelle, aber wenn ich nicht frage, begreife ich es nicht

Gruß yve

 

[yve1971]

Nun bin ich es noch mal....

Habe nun das Menü angepasst, es passt mit jeder Auflösung, danke, danke, danke noch mal...

Nun habe ich aber das problem, dass das menü total lang gezogen ist http://www.abc-des-essens.de/test2/ ich habe erst mal den Banner komplett rausgenommen, wie bekomme ich es hin, dass der komplette Teil, kleiner wird?

Und im Opera passt es auch nicht wirklich... da ist das Menü linksbündig und die sub-, Submenüs werden unter den Submenüs angezeigt...

<td width="814"  height="60" align="center"  style="font-size:11pt"><p align="center"><span class="Stil6"> </span></p>
      <div style="position: relative; width: 750px; margin: 0 auto; height: 70;">
        <div id="leiste" class="leiste"onmouseover="auf('menu1')" onmouseout="zu('menu1')">
Kräuter & Co.</a></div>
<div id="menu1" class="menu1" javascript:auf('menu1')
onmouseover="auf('menu1')" onmouseout="zu('menu1')">
<a href="#"onmouseover="auf('menu1b')" onmouseout="zu('menu1b')"
>&#149 Kräutergeschichte</a>
<a href="#"onmouseover="auf('menu3b')" onmouseout="zu('menu3b')"
>&#149 Kräuter</a>
<a href="#"
>&#149 Wirkstoffe</a>
<a href="#"
>&#149 Kräutershop</a>
<a href="#"
>&#149 Apothekensuche</a>
<a href="#"onmouseover="auf('menu4b')" onmouseout="zu('menu4b')"
>&#149 Heilsteingeschichte</a>
<a href="#"onmouseover="auf('menu5b')" onmouseout="zu('menu5b')"
>&#149 Heilsteine</a>
</div>
<!--menü 1b, --><div id="menu1b" class="menu1b" onmouseover="auf('menu1b')" onmouseout="zu('menu1b')">
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Teil 1</a>
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Teil 2</a>
</div>

<div id="menu3b" class="menu3b" onmouseover="auf('menu3b')" onmouseout="zu('menu3b')">
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Kräuter A bis C</a>
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Kräuter D bis G</a>
</div>

<!--menü 4b, --><div id="menu4b" class="menu4b" onmouseover="auf('menu4b')" onmouseout="zu('menu4b')">
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Teil 1</a>
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Teil 2</a>
</div>

<!--menü 5b, --><div id="menu5b" class="menu5b" onmouseover="auf('menu5b')" onmouseout="zu('menu5b')">
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Teil 1</a>
<a href="#" onmouseover="auf('menu1')" onmouseout="zu('menu1')"
>Teil 2</a>
</div>

<!--leiste 2, hautptrubrik-->
<div id="leiste2" class="leiste2" onmouseover="auf('menu2')" onmouseout="zu('menu2')">
Ernährung</div>
<div id="menu2" class="menu2"javascript:auf('menu2')
onmouseover="auf('menu2')" onmouseout="zu('menu2')"
>
<a href="#"
>&#149 Ballaststoffe </a>
<a href="#"
>&#149 Eiweiß</a>
<a href="#"
>&#149 Fettsäuren</a>
<a href="#"
>&#149 Kohlenhydrate</a>
<a href="#"
>&#149 Mineralstoffe</a>
<a href="#"
>&#149 Spurenelemente</a>
<a href="#"onmouseover="auf('menu2b')" onmouseout="zu('menu2b')"
>&#149 Vitamine</a>
</div>

<!--menü 2b, -->
<div id="menu2b" class="menu2b" onmouseover="auf('menu2b')" onmouseout="zu('menu2b')">
<a href="#" onmouseover="auf('menu2')" onmouseout="zu('menu2')"
>Fettloesliche</a><a href="#" onmouseover="auf('menu2')" onmouseout="zu('menu2')"
>Wasserlösliche </a></div>

<!--leiste 3, hautptrubrik--><div id="leiste3" class="leiste3" onmouseover="auf('menu3')" onmouseout="zu('menu3')">
Community</div>

<div id="menu3" class="menu3"javascript:auf('menu3')
onmouseover="auf('menu3')" onmouseout="zu('menu3')"
>
<a href="#"
>&#149 1</a>
<a href="#"
>&#149 2</a>
<a href="#"
>&#149 3</a>
<a href="#"
>&#149 4</a>
<a href="#"
>&#149 5</a>
</div>


<!--leiste 4, hautptrubrik--><div id="leiste4" class="leiste4" onmouseover="auf('menu4')" onmouseout="zu('menu4')">
Rezepte</div>

<div id="menu4" class="menu4"javascript:auf('menu4')
onmouseover="auf('menu4')" onmouseout="zu('menu4')"
>
<a href="#"
>&#149 1</a>
<a href="#"
>&#149 2</a>
<a href="#"
>&#149 3</a>
<a href="#"
>&#149 4</a>
<a href="#"
>&#149 4</a>
</div>

<!--leiste 5, hautptrubrik--><div id="leiste5" class="leiste5" onmouseover="auf('menu5')" onmouseout="zu('menu5')">
Allgemein</div>

<div id="menu5" class="menu5"javascript:auf('menu5') onmouseover="auf('menu5')" onMouseOut="zu('menu5')"> <a href="index.php">&#149 Home</a>
    <a href="impressum.php">&#149 Impressum</a>
    <a href="kontakt.php">&#149 Kontakt</a>
    <a href="formular.htm">&#149 Newsletter</a>
    <a href="http://www.abc-des-essens.de/gaestebuch/index.php target="_blank"
>&#149 Gästebuch</a>
    <a href="http://www.epresso.com/shops/frame.php?shopId=7522 target="_blank"
>&#149 Fan-Shop</a> </div>
    </div>

Wenn ich die Größe so ändere, passiert gar nichts
Danke schon mal Gruß yve