Bilder / Buttons positionieren

.Stefan · 01/15/2013, 20:38

Hey Leute,

ich versuche momentan Bilder bzw Buttons an eine bestimmte stelle zu positionieren . Als momentane "Lösung" habe ich :

PHP Code:


			
<style>

#button-obl {

position:absolute;

margin-top:10px;

margin-left:25px;

}

<button id="button-obl">...[/CODE]

Der passt im Grunde schon, jedoch verändert sich die Position nicht beim verändern der Fenstergröße von z.B Firefox. Somit passt das mit anderen Objekten wieder nicht. Die frage ist nun, wie ich die Position beibehalte und trotzdem noch einen guten Aufbau beibehalten kann bzw es auch bei einer veränderten Fenstergröße im Browser angepasst aussieht.

Mfg,

.Stefan

MrPuschel · 01/15/2013, 21:15

position:absolute; orientiert sich immer am nächsten relativ oder absolut positionierten Elternelement. ist das nicht vorhanden, orientiert es sich am document root. Das ist dein <body>. Du musst deinem Container Element noch ein position:relativ; verpassen. Damit der Browser weis, wo er sich auszurichten hat. Ausserdem solltest du bei position:absolute mit top und left arbeiten, nicht mit margin.

Margin ist der Abstand, nicht die Position des Elementes. Das kommt u.U. in älteren Browsern zu Fehldarstellungen.

Aber ohne den ganzen Code kann ich nur mutmaßen.

.Stefan · 01/15/2013, 22:59

danke erstmal für die Antwort, ich bin mir gerade nicht sicher ob da bei mir noch alles stimmt, aber wie würde es aussehen, wenn ich z.B ein Bild oder einen button auf die Position [400,400] setzen weill.

?

Mfg,
.Stefan

MrPuschel · 01/15/2013, 23:16

Klick links oben auf "Run".

.Stefan · 01/15/2013, 23:42

Perfeeekt, damit kann ich was anfangen. Genau das habe ich gesucht ! Danke !

Mit freundlichen Grüßen,

.Stefan

MrPuschel · 01/15/2013, 23:49

Kein Problem

.Stefan · 01/16/2013, 14:20

Ich hätte noch eine frage: Ich verstehe jetzt wie das mit den Bildern funktioniert, wie sieht das aber aus, wenn ich stattdessen eine inputbox setzen will ?

MrPuschel · 01/16/2013, 16:41

Mal ganz unter uns, du hättest ruhig mal versuchen können img gegen input auszutauschen

Bei mehreren Inputs solltest du classes verwenden. Wenn du ganz pro sein möchtest, verwende beim designen von Formularen nach wie vor Tabellen. Das bietet sich einfach an.

.Stefan · 01/17/2013, 00:34

Ja ist mir später auch aufgefallen und klappt jetzt alles super