Fixierter Grafik Button

Computer: Software & Programmierung HTML & CSS
#1

Halli Hallo,

ich habe eine HTML Seite, in der eine variable Liste mit mind. 200 Einträgen eingelesen wird. Momentan muß ich bis zum Ende der Liste scrollen, worunter sich ein Grafik Button befindet. Da mir das zu umständlich ist, dachte ich an einen fixierten Grafik Button, der sich immer an derselben Stelle des Bildschirmes befindet.

Da ich nicht mit Frames arbeiten möchte, dachte ich an eine Lösung mittels CSS. Hierbei habe ich auch schon einen kleinen script gefunden, der eine Grafik an einen bestimmten Punkt fixiert. Der Code dazu lautet:

body {
background-image: url(button.gif);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;
}

jetzt möchte ich jedoch erreichen, das ich einen fixierten und anklickbaren Grafik Button habe, also:

input src=‚button.gif‘ name=‚button‘ type=‚image‘ width=‚100‘ height=‚20‘>

Dieser Button sollte immer am unteren Rand der Seite fixiert sein. Auch, wenn die Bildschirmauflösung geändert wird.

Ein weiteres Problem dürfte sich ergeben, das dann der Grafik Button die jeweils letzte sichtbare Zeile meiner Liste überdecken würde. Ist es daher möglich, mittels CSS einen Teil dieser Seite „abzuschneiden“ d.h. das die letzten 40 Pixel der Seite für den fixierten Grafikbutton reserviert sind.

Vielen Dank im voraus für Eure Hilfe :smile:)

#2

Guten Morgen,

versuche es mal damit, den Button in einen Container zu packen und anklickbar zu machen. Z.B. so

Anschließend positionierst Du das Ganze mit CSS. Etwa so:

#button {
position: absolute;
right:0;
bottom: 0;
}

Damit die letzte Zeile Deiner Liste nicht überdeckt wird, kannst Du unterhalb der Liste per CSS einen Abstand einfügen.

margin-bottom: 10px;

oder

padding-bottom: 10px;

Viel Erfolg!

#3

Jau, danke für den Tip,

aber leider bewegt sich der Button, wenn man den Scrollbalken des Browsers betätigt, mit.

Ich bin gerade durch Zufall auf eine Lösung gekommen, mit dem die Grafik am unteren Ende des Fensters mittig zentriert wird. Als Hintergrund wird dann ein weißer Balken erstellt, der die Breite des Fensters und die Höhe der Grafik besitzt.

-)

#4

Hi,

background-attachment: fixed;

dies ist hierfür unpassend.

Dieser Button sollte immer am unteren Rand der Seite fixiert
sein. Auch, wenn die Bildschirmauflösung geändert wird.

Weise dem img position:fixed; bottom:0 zu.

Ist es daher möglich, mittels CSS einen Teil
dieser Seite „abzuschneiden“ d.h. das die letzten 40 Pixel der
Seite für den fixierten Grafikbutton reserviert sind.

Natürlich - gebe der Liste ein entsprechendes margin-bottom.

Gruß
Ingo