Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag01.07.2012 um 09:19 (UTC)    
Titel: [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; }
Beitrag01.07.2012 um 11:10 (UTC)    
Titel:

Es wäre auch noch hilfreich, wenn du den ,,Code über dem Design" , der mit dem Klappmenü zutun hat noch postest
Beitrag01.07.2012 um 15:32 (UTC)    
Titel:

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)
Beitrag12.07.2012 um 15:49 (UTC)    
Titel:

Kann mir wirklich niemand helfen? O.o
Oder liegt es an meinem PC dass das Collmenü so komisch ist? ._.
Beitrag12.07.2012 um 16:03 (UTC)    
Titel:

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ü:
Code:
left: 50%;

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:
Zitat:
/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
font-family: arial; /* = Link Schriftart */
margin-top: -885px; /* Abstand von oben anpassen */
left: 50%;
margin-left: Xpx; /* 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; }

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
Beitrag17.07.2012 um 13:28 (UTC)    
Titel:

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?
Beitrag18.07.2012 um 14:09 (UTC)    
Titel:

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:
Zitat:
#container, #design1{
overflow:hidden;
}


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:
Zitat:
#design1{position:relative;}


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

position: absolute;

font-family: arial; /* = Link Schriftart */

margin-top: -27px; /* Abstand von oben anpassen */
top:XXpx;
margin-left: 75px; /* Abstand zur linken Seite anpassbar */
left:XXpx;
width: 800px; /* die Breite anpassbar */

overflow: hidden;}

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


Zuletzt bearbeitet von o-4-n am 19.07.2012, 01:12, insgesamt 2-mal bearbeitet
Beitrag19.07.2012 um 12:28 (UTC)    
Titel:

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

Liebe Grüße
cordiax
Beitrag19.07.2012 um 12:41 (UTC)    
Titel:

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

Beitrag19.07.2012 um 12:51 (UTC)    
Titel:

o-4-n hat Folgendes geschrieben:
Dazu das Coolmenü einfach unterhalb des öffnenden div-tags, des Elementes mit der ID "design1" einfügen

Das hast du wohl falsch verstanden.

Momentan:
Zitat:
<div id="design1">
...
...
...
</div>
<div id="klappmenu">
...
...
</div>



Richtig:
Zitat:
<div id="design1">
<div id="klappmenu">
...
...
</div>
...
...
...
</div>

______________
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
Beitrag20.07.2012 um 11:06 (UTC)    
Titel:

Oh...
So ich habs geändert. Jetzt aber klappts Smile
Beitrag20.07.2012 um 19:38 (UTC)    
Titel:

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
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de