Dreamweaver CS4 - Bilder positionieren

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

eine Frage: ich habe im Dreamweaver CS4 eine Website gebaut - das heißt, mit der Hilfe eines Freundes.
Er hat alle Bilder etc. mit Hilfe eines Stylesheets im CSS programmiert.

Ich wollte jetzt ein Element hinzufügen, das auf der Website rechts platziert wird.
Das Element habe ich im .html Dokument eingefügt und im CSS gesagt, wie es platziert werden soll:

#picture {
position: absolute;
top: 7px;
left: 542px;
height: 427px;
width: 292px;
z-index: 1;
}

Das heißt eigentlich müsste das Bild ja jetzt 7 pixel von oben und 542 pixel von links positioniert werden. Das zeigt mir im Entwurf auch richtig an, aber sobald ich mir die Seite in der Browser-Vorschau anschaue oder auf die Website uploade, ist das Bild links über meinem Text platziert.

Kann mir jemand sagen warum und was ich hier tun kann?

Vielen lieben Dank im Voraus!!!
Claudia

#2

Hallo Claudia,

eine Frage: ich habe im Dreamweaver CS4 eine Website gebaut -
das heißt, mit der Hilfe eines Freundes.
Er hat alle Bilder etc. mit Hilfe eines Stylesheets im CSS
programmiert.

-> FAQ:3384

Ich wollte jetzt ein Element hinzufügen, das auf der Website
rechts platziert wird.

-> http://de.selfhtml.org/html/referenz/elemente.htm

Das Element habe ich im .html Dokument eingefügt und im CSS
gesagt, wie es platziert werden soll:

#picture {
position: absolute;
top: 7px;
left: 542px;
height: 427px;
width: 292px;
z-index: 1;
}

-> http://de.selfhtml.org/css/eigenschaften/positionier…

[…]absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.[…]

[…]Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext[…]

Erniedrige also die Zahl 1 schrittweise, bist du das gewünschte Ergebnis hast, oder passe an anderer Stelle an.

Das heißt eigentlich müsste das Bild ja jetzt 7 pixel von oben
und 542 pixel von links positioniert werden. Das zeigt mir im
Entwurf auch richtig an, aber sobald ich mir die Seite in der
Browser-Vorschau anschaue oder auf die Website uploade, ist
das Bild links über meinem Text platziert.

Welcher Text? Welches Element beinhaltet den Text? Wie sind die Attribute des Elementes? Verlinke doch auf die Seite, damit wir komplette Einsicht haben ( http:// nicht vergessen ):wink:

Kann mir jemand sagen warum und was ich hier tun kann?

Brettberschreibung lesen, recherchieren bei Selfhtml und prüfen mit dem Validator :wink:

Grüße Roman

#3

Moin,

Das heißt eigentlich müsste das Bild ja jetzt 7 pixel von oben
und 542 pixel von links positioniert werden.
aber sobald ich mir die Seite in der
Browser-Vorschau anschaue oder auf die Website uploade, ist
das Bild links über meinem Text platziert.

Das ist ja nichts, was sich widerspricht, selbst wenn die Vorschau und der Browser beide fehlerfrei arbeiten. Es gibt ja viele äußere Einflüsse, unter denen Seiten anders angezeigt werden.
Außerdem nimmst Du Dein Bild mit position:absolute aus dem Textfluss.

Kann mir jemand sagen warum und was ich hier tun kann?

Zunächst sollten wir ja mal wissen, was Du überhaupt erreichen willst.
Dann wäre ein Link zur Seite angebracht, dass man sich das auch vorstellen und ansehen kann.

Freundliche Grüße,
-Efchen

#4

Hallo

Ich wollte jetzt ein Element hinzufügen, das auf der Website
rechts platziert wird.

#picture {
position: absolute;
top: 7px;
left: 542px;
height: 427px;
width: 292px;
z-index: 1;
}

Falls du sichergehen möchtest, dass das Bild/Element im Kontext des umgebenden Texts bei wirklich jeder Besucherin rechts erscheint, hilft vielleicht

#picture {
float: right;
}

anstatt einer festen Positionierung mit Pixeln. Es hängt allerdings auch noch davon ab, welche CSS-Regeln für den Text oder das den Text umgebende Objekt gelten.

(…) sobald ich mir die Seite in der
Browser-Vorschau anschaue oder auf die Website uploade, ist
das Bild links über meinem Text platziert.

Meinst du mit „über“ jetzt optisch vor dem Text oder ist der Text noch vollständig lesbar und das #picture liegt in der Senkrechten oberhalb des Texts?

In jedem Fall ist es schwierig, das Verhalten der Seite zu deuten, wenn wir nicht wissen, welche anderen Inhalte die Seite hat und welche weiteren CSS-Regeln auf diese angewendet werden.

Besser wäre es, du würdest ein komplettes Beispiel zur Verfügung stellen. Reduziere ggf den Inhalt deiner Seite auf die Objekte, die nicht so funktionieren, wie du das möchtest, teste diese Miniseite noch mal und liefere uns dann den Quelltext von HTML und CSS. Dann haben wir es einfacher, dir zu helfen.

Vielleicht funktioniert dein Minibeispiel aber auch plötzlich so, wie du es willst? Dann kannst du evtl. sogar selbst herausfinden, welche Elemente und Regeln dafür sorgen, dass es plötzlich nicht mehr geht.

Ach ja, bezüglich HTML und Programmierung:
So lange auch die Verantwortlichen hier im Wer-Weiss-Was die Begriffe HTML und CSS plakativ unter den falschen Oberbegriff „Programmierung“ setzen (und das, soweit ich mich erinnere, seit über 10 Jahren), finde ich es unspektakulär, wenn in manchen Anfragen ein Laie diese Bezeichnung aufgegreift. :wink:

Viele Grüße
Anja

#5

Tach!

Ach ja, bezüglich HTML und Programmierung:
So lange auch die Verantwortlichen hier im Wer-Weiss-Was die
Begriffe HTML und CSS plakativ unter den falschen Oberbegriff
„Programmierung“ setzen (und das, soweit ich mich erinnere,
seit über 10 Jahren), finde ich es unspektakulär, wenn in
manchen Anfragen ein Laie diese Bezeichnung aufgegreift. :wink:

Eigentlich ja :smile:
Das gefährliche daran ist nur, dass jemand, der ungefähr weiß, was man unter „Programmierung“ versteht, u.U. glauben könnte, man kann mit HTML Dinge machen, die man eben nicht damit machen kann, z.B. Schleifen oder Bedingungen. Solche Fragen kommen ja immer wieder.

Wenn allerdings jemand den Begriff „Programmierung“ benutzt ohne überhaupt zu wissen, was das letztendlich genau ist, gleicht sich alles wieder aus und ist so gesehen völlig irrelevant :wink:

Liebe Grüße,
-Efchen

#6

Hallo

Ach ja, bezüglich HTML und Programmierung:
So lange auch die Verantwortlichen hier im Wer-Weiss-Was die
Begriffe HTML und CSS plakativ unter den falschen Oberbegriff
„Programmierung“ setzen (…)

Eigentlich ja :smile:
Das gefährliche daran ist nur, (…)

oh ja, schier lebensgefährlich ist das.

(…)
dass jemand, der ungefähr weiß,
was man unter „Programmierung“ versteht, u.U. glauben könnte,
man kann mit HTML Dinge machen, die man eben nicht damit
machen kann, z.B. Schleifen oder Bedingungen. Solche Fragen
kommen ja immer wieder.

Wie schon geschrieben:
Ich finde es bedenklicher, dass ein „Expertenportal“ Begriffe wie XML, HTML und CSS unter Programmierung ablegt. Wenn ein Newbie von HTML-Programmierung schreibt, ist das meines Erachtens eine harmlose Sache. Wenn aber ein (Pseudo)Fachportal behauptet, HTML sei Programmierung, dann sollten User wie du und ich eher darauf bestehen, dass ebendies geändert wird, als dass man immer und immer wieder den Laien vorwirft, sie würden die Begriffe falsch verwenden.

Ich sehe es so, dass WIR User das Wer-weiß-was sind, und ich persönlich finde es dumm, dass ich im Bereich Programmierung posten muss, wenn ich Fragen zu HTML und CSS beantworte.

Ich empfinde das als ziemlich peinlich für das Wer-weiß-was.

Gruß
A

#7

Moin,

Das gefährliche daran ist nur, (…)

oh ja, schier lebensgefährlich ist das.

Das schrieb ich nicht :smile:

Ich finde es bedenklicher, dass ein „Expertenportal“ Begriffe
wie XML, HTML und CSS unter Programmierung ablegt.
Wenn aber ein (Pseudo)Fachportal behauptet, HTML sei
Programmierung, dann sollten User wie du und ich eher darauf
bestehen, dass ebendies geändert wird

Ja, aber irgendwann gibt man halt auf, wenn die „Experten“ das nicht umändern wollen.

als dass man immer und immer wieder
den Laien vorwirft, sie würden die Begriffe falsch verwenden.

Wirfst Du ihnen das vor? Ich weise sie für gewöhnlich nur darauf hin, dass das falsch ist und warum es falsch ist, werfe ihnen diesen Fehler aber nicht vor. Sie wissen es ja nicht besser.

Ich sehe es so, dass WIR User das Wer-weiß-was sind, und ich
persönlich finde es dumm, dass ich im Bereich Programmierung
posten muss, wenn ich Fragen zu HTML und CSS beantworte.

Ja, aber (leider) besser unter „Programmierung“ antworten als gar nicht. Das würde noch weniger helfen.

Ich empfinde das als ziemlich peinlich für das Wer-weiß-was.

Das ist richtig. w-w-w weiß das auch. Trotzdem ändern sie nichts.

Aber jetzt werden wir wohl off-topic.

Liebe Grüße,
-Efchen