[CSS-Design] Coolmenü wandert

Hallo,

auf meiner Homepage http://vigilate.de.tl habe ich ein Collmenü, was allerdings ständig wandert oder verschwindet, wenn man eine neue Seite anklickt. Auf der Startseite liegt es perfekt, aber auf den anderen Seiten nicht.
Habt ihr eine Idee, wei man das ändern könnte?

Ich habe mal die Codes für das Klappmenü hier rein gestellt, vielleicht habe ich ja vergessen was ein zu fügen:


/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
font-family: arial; /* = Link Schriftart */
margin-top: -885px; /* Abstand von oben anpassen */
margin-left: 465px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
overflow: hidden;}


/* Button Breite + Rahmen + Abstand */
#liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #1f2315;
margin-right: 5px;
margin-left: 5px; }

/* Button Linkfarbe + Hintergrundfarbe */
#liste a {
display: block;
padding: 5px 5px 5px 5px;
color: #000000;
font-size: 13px;
background-color: #556b2F;
text-decoration: none; }

/* Button Hover-Farbe */
#liste a:hover {
color: #000000;
background-color: #840c14; }

#liste li ul { display:none; } /* eingeklappt */
#liste li:hover ul { display:block; } /* ausgeklappt */

#klappmenu ul { list-style-type: none; margin:0px; padding: 0px; }
#liste ul li { margin: 0; border: none; }

Es wäre auch noch hilfreich, wenn du den ,,Code über dem Design" , der mit dem Klappmenü zutun hat noch postest

Geht klar ^^:
(Alles was rot ist steht in wirklichkeit nicht da)


Text über Design:
<div id="design1">

Text unter dem Design:
<div id="unten"></div></div>

<div id="klappmenu">
<ul id="liste">
<li><a href="#">Startseite</a>
<ul>
<li><a href="/Startseite.htm">Startseite</a></li>
</ul>
</li>

<li><a href="#">Über mich</a>
<ul>
<li><a href="/-Ue-ber-mich.htm">Über mich</a></li>
</ul>
</li>

<li><a href="#">Sonstiges</a>
<ul>
<li><a href="/Sonderzeichen.htm">Sonderzeichen</a></li>
<li><a href="/Umfragen.htm">Umfragen</a></li>
<li><a href="/Verlink-mich.htm">Verlink mich</a></li>
<li><a href="/Partnerseiten.htm">Partnerseiten</a></li>
<li><a href="/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a href="/Kontakt.htm">Kontakt</a></li>
</ul>
</li>

<li><a href="#">Forum</a>
<ul>
<li><a href="/Neuigkeiten.htm">Neuigkeiten</a></li>
<li><a href="/Regeln.htm">Regeln</a></li>
</ul>
</li>
</div>

<a href="http://www.andyhoppe.com/" title="Besucherzaehler"><img
src="http://c.andyhoppe.com/1341132388" style="border:none" alt="Besucherzaehler" /></a>
(Counter)

Hinweis unter Inhaltsbereich:
<link rel="stylesheet" type="text/css" href="http://spetools.de/css/1188.css" />
(Smilies)

Kann mir wirklich niemand helfen? O.o
Oder liegt es an meinem PC dass das Collmenü so komisch ist? ._.

Bei mir wird es nicht einmal auf der Startseite korrekt angezeigt.
Das Problem ist, dass du dem Menü sagst, es solle so und so viele Pixel vom linken Rand entfernt sein.
Wenn der Monitor jetzt aber größer ist (oder man herauszoomt), ist es immer noch genau so viele Pixel vom Rand entfernt, wie bei einem kleineren Monitor.

Der Trick um es besser platzieren zu können ist dem Menü:

zuzuweisen.
Dadurch fängt das menü schon mal immer in der Mitte an (egal, bei welchem Bildschirm).
Da aber nicht der linke Rand des Menüs in der Mitte sein soll, sondern das ganze Menü kann man sich dann noch mit margin-left: Xpx; spielen
Lange Rede, kurzer Sinn:

Ist nur eine Zeile hinzugefügt und an der roten Stelle solange spielen, bis es richtig sitzt.
Es sind auch negative Werte möglich.

mfg Philipp
______________
Forenregeln, FAQ, Suchfunktion

Danke für die Antwort, aber wenn ich jetzt auf eine andere Seite gehe. Zum Beispiel 'News', ist das Klappmenü schon wieder woanders. Und manchmal ist es sogar gar nicht mehr da. Woran könnte das liegen?

Hallo,

wenn man ein Element absolute positioniert, richtet es sich am nächst höheren Elternelement aus, welches nicht die position Normaleinstellung static hat. Hat kein Element eine anderen Wert ist es eben der Viewport. Es ganz normal, dass das Coolmenü wandert wenn es zum Viewport ausgerichtet wird. Der ist nämlich bei jedem anderst (Auflösung, Monitor Größe, größe des Browserfenster....) .

Als erstes solltest du deinem container und dem div-Element mit der ID "design1" einen ordentlichen Elementfluss geben:

Jetzt richtest du das Klappmenü nicht am Viewport aus, sondern an dem div-Element mit der ID "design1", welches Elternelement deines Coolmenüs ist, aus. Dazu positionierst du dieses div als erstes mal relativ, damit es nicht mehr die Normaleinstellung static hat:

Als nächstes arbeitest du für die positionierung nicht mit margin, sondern mit left bzw. top:

rot löschen, blau einfügen. Die Werte müssen natürlich angepasst werden.

Alternativ, was auch besser ist: Du lässt margin und änderst dein Html. Dazu das Coolmenü einfach unterhalb des öffnenden div-tags, des Elementes mit der ID "design1" einfügen. Auch hier müssen die Werte angepasst werden.

Die Codes musst du natürlich nicht komplett einfügen. Du kannst und solltest dein vorhandenes CSS entsprechend ergänzen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Es hat geklappt!
Vielen Dankf für die schnelle Antwort und die Hilfe.

Liebe Grüße
cordiax

http://vigilate.de.tl/ noch hat es dort nicht geklappt. du richtest dich wohl nur nach deiner monitorauflösung. halte mal strg gedrückt und scrolle das mausrad. und fällt was auf?

mit strg und null kommst du zur richtigen auflösung zurück.

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Das hast du wohl falsch verstanden.

Momentan:

Richtig:

______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Oh...
So ich habs geändert. Jetzt aber klappts

Dann danke für die Rückmeldung.

- CLOSED -
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering