[phpBB2] Position der Quicklinks - Problem

Guten Aben liebes Forumieren Team,

erneut komme ich mit einer Frage...oder eher eine Bitte um Hilfe.
Der Style meines Forums ist fast fertig, doch ich wollte jetzt noch Quicklinks in Form eines Drop Menus einfügen. Jetzt habe ich es vom Style her hinbekommen, wie ich es haben wollen würde, nur die Position macht mir noch Probleme.
Folgendes habe ich getan:

Code:

  <ul id="navi"> 
  <li><center><a href="#">QUICKLINKS</a></center>
    <ul>
      <li><a href="http://human-exitus.forumieren.com/f11-regeln">Regeln</a></li>
      <li><a href="http://human-exitus.forumieren.com/f12-storyline">Storyline</a></li>
      <li><a href="http://human-exitus.forumieren.com/f15-infos">Infos</a></li>
      <li><a href="http://human-exitus.forumieren.com/f13-news">News</a></li>
      <li><a href="http://human-exitus.forumieren.com/f16-gesuche">Gesuche</a></li>
      <li><a href="http://human-exitus.forumieren.com/t25-vergebene-avatarfiguren">Vergebene Avatarfiguren</a></li>
      <li><a href="http://human-exitus.forumieren.com/t23-vergebene-kennungsnummern">Vergebene Kennungsnummern</a></li>
    </ul>
  </li>

Diesen Code für die Links und Co habe ich unter "Templates" - "Allgemeines" - "overall_header" ganz oben im Code eingefügt.
Dann das Ganze mit folgendem Code bei den "Farben" im CSS definiert:

Code:

#navi, #navi ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
#navi li {
    width:130px;
    float:right;
    display:inline;
    background:black;
    opacity:0.6;
    font-size:12px;
    border:#fa98c6 1px dotted;
    margin-left:100px;
}
#navi li ul {
    display:none;
}
#navi li:hover ul {
    display:block;
    font-size:11px;
}
body {
    behavior:url("csshover.htc");
}

So sieht das Ganze aus:

Spoiler:

Mein Problem und Wunsch wäre es, dass das Ganze an der rechten Kante meines Forums anliegt und nicht so weit entfernt ist. Außerdem hätte ich auch gern die Möglichkeit es nach oben oder unten zu verschieben, um zu sehen, an welcher Stelle es am Besten aussieht. Leider bin ich jedoch ein ziemlicher Noob, was solche Codes angeht und habe mir das Ganze aus dem Internet zusammengebastelt und mit Ausprobieren irgendwie erreicht, dass es zumindest so aussieht, wie ich es haben will. Gibt es da eine Möglichkeit mein Problem zu lösen? Ich habe es schon mit "position" und so weiter vesucht, auch mit Pixeleingaben...aber auch einfach nur, weil ich es nicht besser weiß.
Eine weitere Möglichkeit, die ich in Erwägung gezogen hatte, war ein freies Indexmodul. Folgende Probleme hatte ich aber dabei:

Spoiler:

Zum einen erscheint unter dem Navigationsmenü so ein komischer, kleiner Kasten...der da nicht hingehört und zum Anderen verändert sich die Position der Quicklinks je nach Bildschirmauflösung, wie es scheint...oder je nach dem, ob man ranzoomt oder nicht. Für mich schlecht, da ich am Laptop meine Seiten um 50% vergrößern muss, weil die Anzeige sonst zu klein für mich ist. Also keine Lösung auf Dauer...

Okay, viel gelabert habe ich ja jetzt...nun zum Eigentlichen:
Kann mir einer vielleicht helfen, oder habe ich etwas verzapft, was überhaupt nicht möglich ist?

Vielen Dank für jede Antwort, egal ob positiv oder negativ!

Mukuro

Hallo,

aktuell verwendest du folgenden div-Tag, um das Element zu positionieren:

Code:

<div style="position: absolute; top: 10px; right: 164px; z-index: 10000;">

Du musst nur bei top und right 0 als Wert angeben, damit nach rechts oben kein Abstand mehr angezeigt wird:

<div style="position: absolute; z-index: 10000; right: 0; top: 0;">

Wenn du das Ganze noch weiter nach unten setzen möchtest, verwendest du einfach einen größeren Pixelwert bei der Eigenschaft "top", um den Abstand zum Seitenbeginn zu vergrößern.

Das wäre es schon.

Liebe Grüße
Günther

Aber das funktioniert doch nur bei dem freien Indexmodul, oder? Bei der ersten Variante benutze ich diesen div-Tag ja nicht.
Und das mit dem Indexmodul weiß ich ja, wie man es positioniert, nur dass es eben irgendwie nicht stabil an dieser Stelle bleibt, wenn man zum Beispiel ranzoomt...Deshalb dachte ich daran, ob man die erste Version nicht ebenfalls ändern kann, um die Position anzupassen.
Was in meinem Forum jetzt zu sehen ist - ich nehme an, da hast du geschaut - ist die Variante mit dem Indexmodul.

Mukuro schrieb:Aber das funktioniert doch nur bei dem freien Indexmodul, oder? Bei der ersten Variante benutze ich diesen div-Tag ja nicht.

Ich habe dir dafür die Lösung genannt, weil du das aktuell gerade einwandfrei eingesetzt hast.

Ich wüsste nicht, wo ein Problem beim Zoom wäre?
Ohne Zoom:

Stark vergrößert:


Diese Umsetzung klappt reibungslos und kann ich dir genau so empfehlen.
Du musst bedenken, dass es von der Art der Einsetzung völlig unabhängig ist, ob die Positionierung sich beim Zoom verändert: Wenn du "position: absolute" mit fixen Pixelwerten nach rechts oben wählst, wird die Position immer passend sein - egal, für welche Umsetzung du dich entscheidest.
Ich kann dir die aktuelle Variante mit meinem Codehinweis so nahelegen.

Das Problem ist folgendes:
Ohne Zoom und genau da, wo ich es haben will:

Das hatte ich schon zuvor geschafft und war ja auch recht glücklich, bis ich eben gezoomt habe und folgendes passiert ist:

Dabei habe ich nur 2 Mal rangezoomt bei Firefox. Desweiteren habe ich meinen Mitadmin gefragt und obwohl er nicht zoomt, sondern einfach eine andere Auflösung als ich hat, befinden sich die Quicklinks bei ihm über dem "E" von "Exitus".
Genau da ist das Problem.

Code:

<div style="position: absolute; top: 8px; right: 321px; z-index: 10000;">

Bei mir hilft dieser Code das Ganze dahin zu machen, wo ich es hinwill, ohne Zoom eben. Selbst wenn es beim Zoom sich verschieben würde und das nicht weg ginge, könnte ich damit leben...nicht aber damit, dass bei Usern mit kleineren oder größeren Auflösungen das Ding sich verschiebt, wie es lustig ist.

Ich hoffe...ich habe es verständlich ausgedrückt...
Dann wäre bei dem freien Indexmodul noch immer dieser komischer Kasten, welchen ich im zweiten Bild in meinem ersten Beitrag ganz oben gekennzeichnet habe. Und er geht auch nicht weg...

Den Rest dieses Indexmoduls kannst du damit entfernen:

Code:

#content-container #left {
    margin-right: 0;
}

Die anderen Werte hast du im Adminbereich bereits passend eingestellt.

Dein eigentlicher Wunsch ist auch ohne Weiteres möglich. Wie du siehst, war ich anhand deiner Beschreibung davon ausgegangen, dass du dieses Element ohne Abstand nach rechts platzieren möchtest.
Wenn es aber frei "schweben" soll, muss die Umsetzung ein wenig verändert werden, um unterschiedlichen Auflösungen gerecht zu werden.
In solchen Fällen arbeitet man zumeist mit Prozent- statt Pixelwerten. In diesem speziellen Fall gibt es aber eine noch sicherere Umsetzung: Du platzierst das Element variabel mit 50% horizontal in der Seitenmitte, und anschließend setzt du einen exakten Negativpixelwert ein, um den rechten Außenabstand derart zu verringern, dass das Element genau neben dem Banner angezeigt wird. Ich hoffe, das war verständlich.

Mit Zahlen ausgedrückt sieht dieser Weg so aus:

Code:

<div style="position: absolute; z-index: 10000; right: 50%; margin-right: -640px; top: 8px;">

Und führt zu diesem Ergebnis (normal / Zoom):




Ist dir das Prinzip klar? Du beziehst dich zuerst mit 50% variabel auf die jeweilige Auflösung und kannst von diesem Punkt aus dann mit Pixelwerten arbeiten, weil du nun einen festen Bezugspunkt besitzt, von dem aus der Abstand immer passend umgerechnet wird.

Okay den Rest des Indexmoduls habe ich mit dem Code irgendwie nicht weg bekommen, jedoch habe ich "Die Standardaufstellung nutzen :" auf NEIN gestellt und es war weg! Was man beim Ausprobieren alles rausfinden hann...xD Danke trotzdem!

Zu dem anderen Teil:
DANKE! Es funktioniert! Und ich habe es sogar verstanden! Vielen, vielen Dank!

Du kannst natürlich auch die Standardaufstellung deaktivieren, aber dadurch bleibt immer noch ein kleiner margin-Abstand links neben dem Foreninhalt. Mit meinem Code sollte dieser Abstand ebenfalls entfernt werden.
Ich habe das auch alles mit einem Tool überprüft, aber ev. ist es noch nötig, den Wert als !important aufzustufen. Das kannst du ja noch ausprobieren, wenn du willst:

Code:

#content-container #left {
    margin-right: 0 !important;
}

Mukuro schrieb:Zu dem anderen Teil:
DANKE! Es funktioniert! Und ich habe es sogar verstanden! Vielen, vielen Dank!

Das freut mich.
Gern geschehen. Und einen schönen Abend noch.

-done-