Mitscrollender Button

MelanieCibura · 13.04.2011

Hallo,

ich bin gerade an einer Bewerbungshomepage und mein Konzept steht soweit. Dabei habe ich ein wenig im Internet nach netten Seiten recherchiert und auf einigen Seiten rechts einen Button gesehen, der sich immer an der gleichen Position am Bildschirm befindet und somit mitscrollt. Wenn man dann auf den Button klickt gelangt man dann an den Seitenanfang.

Fall ihr die Erklärung nicht so ganz verstanden habe ist hier einmal ein Beispiel einer Seiten, bei der ein solcher Button rechts neben dem weißen Kasten ist:
www.larsahrens.com/

Einen solchen Button würde ich auch gerne in meine Seite einbinden. Kann mir ja vielleicht jemand sagen wie man so etwas macht, oder sagen nach welchen Stichworten ich da im Internet suchen muss um eine Erklärung oder Beispiele zu finden?

Ich hoffe hier kann mir jemand helfen.

Vielen Dank & Gruß
Melanie

cebito · 13.04.2011

AW: Mitscrollender Button

position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets "fixed" ist für dich die Lösung

MelanieCibura · 01.05.2011

AW: Mitscrollender Button

Kommt zwar etwas spät, aber ich bin früher nicht zum ausprobieren gekommen.

Erstmal danke für deine Hilfe.

Ich habe es gerade ausprobiert, doch das Problem ist, dass es sich immer am Browserfenster ausrichtet und nicht am übergeordneten Element, was ich aber bräuchte. Gibt es dafür auch eine Möglichkeit, damit das z.B. immer rechts neben einem bestimmten div bleibt, wenn der Inhalt der gesamten Webseite zentiert ist?

Danke für die Hilfe!

Gruß, Melanie

cebito · 01.05.2011

AW: Mitscrollender Button

Gib dem div, an dem der Button ausgerichtet sein soll position:relative. Der Button muss im HTML dann innerhalb des div notiert werden und per CSS mit position:absolute positioniert werden.

MelanieCibura · 01.05.2011

AW: Mitscrollender Button

Das ist aber glaube ich nicht so wie ich es meinte, oder ich hab das etwas nicht ganz verstanden.

Ich möchte, dass der Button fixiert ist und nicht mitscrollt, aber immer rechts neben einem Div bleibt das sich immer mittig im Browserfenster befindet.

Wenn ich es mache, wie du es gerade beschrieben hast, dann scrollt der Button mit und bleibt nicht immer sichtbar.

Gruß, Melanie

cebito · 01.05.2011

AW: Mitscrollender Button

Was willst du denn jetzt, erst soll er fixiert sein, dann sich an einem div ausrichten. Wie ist denn dieser div positioniert? Ich kann dir leider nicht ganz folgen. Erkläre bitte genauer, noch besser wäre es, deine Frage auch zu skizzieren. In deinem oben geposteten Beispiel ist der Button fixed, du musst ihn dann eben so positionieren, das er neben deinem div steht. Stell mal deine Versuche online, dann lässt sich dir auch besser helfen.

MelanieCibura · 01.05.2011

AW: Mitscrollender Button

Tut mir leid, dass ich mich vielleicht nicht so deutlich ausgedrückt habe, deshalb habe ich mal eben eine Skizze gemacht:

kannst du auch meine Seite sehen, wie sie bis jetzt aussieht, vielleicht hilft dir das ja weiter.

Der Button (noch nicht auf der Homepage zu sehen, aber in der Skizze der rote) soll immer rechts neben dem Blatt Papier sein, aber mitscrollen, d.h. quasi neben dem Blatt Papier fixiert sein. Wenn ich dann die Homepage nach unten scrolle, soll der Button aber seine Position nicht verändern. Wenn ich den Button aber an eine Position fixiere passt das zwar für meine Browsergröße, doch wenn ich den Browser kleiner ziehe, zentiert sich das Blatt wieder automatisch, der Button ist dann aber nicht mehr genau an der rechten Kante des Blattes, da dieser ja an einer bestimmten Position steht und nicht am Blatt ausgerichtet ist.

Was ich brauche ist, dass der Button zwar am Blatt rechts ausgerichtet ist, aber trotzdem nicht mitscrollt, sondern fixiert steht (z.B. immer xPixel neben dem Blatt Papier und yPixel vom oberen Browserrand entfernt), egal ob ich das Browserfenster verkleinere oder nicht.

Hoffe das war einleuchtend erklärt, ansonsten einfach schreien, dann versuche ich es nocheinmal.

Gruß, Melanie

cebito · 01.05.2011

AW: Mitscrollender Button

Beispiel:

HTML:

<!doctype html>
<html>

<head>
    <title>Titel</title>

    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
<style type="text/css">
html,body{margin:0;padding:0;}
#main{width:1000px;height:3000px;background:#ff0;margin:20px auto;}
#button{width:100px;height:100px;position:fixed;bottom:150px;left:50%;margin-left:510px;background:#00f;}
</style>
</head>

<body>
<div id="main"></div><div id="button"></div>
</body>
</html>

MelanieCibura · 01.05.2011

AW: Mitscrollender Button

Hallo cebito,

danke für die schnelle Antwort mit dem Beispiel.
So habe ich es gewollt, und so hat es auch bei mir gerade sofort geklappt.

Vielen vielen Dank! Das hat mir wirklich sehr geholfen

Gruß, Melanie