Bilder ausrichten position absolut

[eMazing]

Moin Ihr Lieben.
Ich mache seit ein paar Monaten meine ersten Schritte in HTML und CCS für unsere Firma. Hier überarbeite ich die Newsseite in unregelmäßigen Abständen.
Derzeit bin ich wieder dabei und mein Ergebnis bisher sieht folgendermaßen aus: Laser Plus News Seite
Mein Problem ist, dass ich einige Objekte mit position:absolute ausgerichtet habe, da ich es nicht bessere wusste. Nun sitzt mir meine Chefin im Nacken, dass es schnell fertig werden muss und ich weiß beim besten Willen nicht wie.
Durch meine position:absolute-Angaben werden Bilder wie iPad/iPod, und vorallem die Blätter(müssen grafisch noch richtig freigestellt werden) browserübergreifen nicht richtig angezeigt.
Für ein bisschen Hilfe wäre ich sehr dankbar. Im Normalfall würde ich mich da selbst durchbeisen und herausfinden wie es geht, aber da die Zeit drückt geht es diesesmal nicht anders.

[Texter mit x]

Moin Ihr Lieben.
Ich mache seit ein paar Monaten meine ersten Schritte in HTML und CCS für unsere Firma. ... Nun sitzt mir meine Chefin im Nacken, dass es schnell fertig werden muss und ich weiß beim besten Willen nicht wie.

Sie weiß doch, daß Du kein Fachmann bist, dann dauert es eben solange wie es dauert, mach ihr das zur Not bewußt bzw. bringe es ihr wieder in Erinnerung.

Für ein bisschen Hilfe wäre ich sehr dankbar.

Wobei? Was willst Du erreichen? Beschreibe deine Layoutwünsche oder worum auch immer es geht. Grundsätzlich kann ich nicht erkennen, warum Du überhaupt mit Positionierung arbeitest. Ein zweispaltiges Layout mit header und footer, da kann man alles im Fluß lassen.

Schau doch mal da:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm
und da
http://www.css4you.de/wslayout1/index.html (ganz unten die Beispiele)

[eMazing]

Ich habe mit Positionierung gearbeitet, weil ich es nicht besser wusste. Dies war für mich der einfach Weg, die Bilder (Blätter etc.) genau an den Platz zu bringen, an dem ich sie haben möchte. Jedoch hat dies nur an meinem Bildschirm geklappt und das auch nur unter FF. In anderen Browsern an meinem iMac und an anderen PCs hier in der Firma sind die Bilder, welche ich auf diese Weise positioniert habe leicht versetzt. Das war mir vorher nicht bewusst, da ich, wie gesagt noch in den Kinderschuhen stecke.

[Texter mit x]

Falls Dir daß nicht bewußt sein sollte, die Antwort hilft uns kein Stück dabei Dir zu helfen.

Ich habe mit Positionierung gearbeitet, weil ich es nicht besser wusste. Dies war für mich der einfach Weg, die Bilder (Blätter etc.) genau an den Platz zu bringen, an dem ich sie haben möchte.

Definiere doch mal wo Du was hin haben willst. Und vergiß nicht zu sagen wohin bezogen worauf.

[eMazing]

Das Bild mit den Blättern und den Kastanien soll auf Höhe der Überschrift "Shoppen auf unsere Kosten" platziert werden, jedoch ohne, dass es Text verdrängt. Das Bild mit den Blätter auf der rechten Seite unten soll sich zwischen dem Ende des Textes "Unsere Ozonschicht wächst wieder" und dem footer befinden. Das Ausrichten der anderen Grafiken habe ich bewältigen können. Überarbeitete Version

[Texter mit x]

Das Bild mit den Blättern und den Kastanien soll auf Höhe der Überschrift "Shoppen auf unsere Kosten" platziert werden, jedoch ohne, dass es Text verdrängt.

Wenn etwas auf gleicher Höhe sein soll, dann erledigt man das in der Regel indem man es in ein und die selbe Zeile packt. Dann kann man die Bilder noch ausrichten.
http://de.selfhtml.org/html/grafiken/ausrichten.htm

Aber was meinst Du mit Text (nicht) verdrängen? Welcher Text könnte unter welchen Umständen verdrängt werden, soll es aber nicht? Und was soll statt dessen passieren? Soll das Bild etwa den Text verdecken?

Das Bild mit den Blätter auf der rechten Seite unten soll sich zwischen dem Ende des Textes "Unsere Ozonschicht wächst wieder" und dem footer befinden. Das Ausrichten der anderen Grafiken habe ich bewältigen können. Überarbeitete Version

Dann binde es nach dem Text und vor dem footer ein. Ich verstehe echt nicht wo das Problem sein soll. Warum ist das Bild mit der Erdkrümmung positioniert? Das Gleiche mit dem Text darunter. Laß den Quatsch mit der Positionierung doch einfach weg. Hast du schon mal die Textgröße im Browser geändert? Macht man sie größer rutschen Texte unter Bilder und ineinander. Macht man sie keiner stehen Bilder und Texte irgendwann unterm footer. Und was ist, wenn sich der Text mal ändert, länger wird, soll dann jedes mal das Layout geändert werden?

[eMazing]

"Dann binde es nach dem Text und vor dem footer ein. Ich verstehe echt nicht wo das Problem sein soll. Warum ist das Bild mit der Erdkrümmung positioniert? Das Gleiche mit dem Text darunter. Laß den Quatsch mit der Positionierung doch einfach weg. Hast du schon mal die Textgröße im Browser geändert? Macht man sie größer rutschen Texte unter Bilder und ineinander. Macht man sie keiner stehen Bilder und Texte irgendwann unterm footer. Und was ist, wenn sich der Text mal ändert, länger wird, soll dann jedes mal das Layout geändert werden?"

Könntest du mir denn kurz ein Beispiel geben, wie ich die rechte Seite layouten kann, dass ich das ganze ohne Positionierung mache?

[Texter mit x]

Könntest du mir denn kurz ein Beispiel geben, wie ich die rechte Seite layouten kann, dass ich das ganze ohne Positionierung mache?

Du willst ein zweispaltiges Layout (mit header und footer), also nimm eins. (Nur mal am Rande, ich hatte dich schon ganz am Anfang gebeten, deine Layoutwünsche zu erläutern.) Dann packe in die beiden Spalten deinen jeweiligen Inhalt, in der Reihenfolge in der er in der Spalte stehen soll. Positioniere nichts. Richte die Bilder ggf. aus oder lasse sie vom Text mittels float umfließen (das Bild von Papierblättern in der linken Spalte). Wenn damit nicht alles zu erledigen ist, dann denken wir eventuell über Positionierung nach.

Die Rechte Seite: Ein Bild, darunter eine Überschrift mit Bild daneben (eine Zeile), darunter Text, darunter ein Bild, darunter ein Text.

[eMazing]

Danke für deine Hilfe Texter. Es klingt so einfach, "Nimm einfach ein Layout mit zwei Spalten". Da ich das noch nicht lang mache ist es für mich schon nicht so einfach eine Vorlage zu nehmen und da alle Daten rein zu packen, welche ich von Grund auf benötige um die Seite in unsere Firmen-Homepage zu intigrieren.
Ich habe vom Prinzip her verstanden, was du meinst, jedoch happerts bei mir da noch an der Umsetung.
Aber ich denke ich muss mich da alleine durchfrimeln.
Trotzdem danke!

[Texter mit x]

Danke für deine Hilfe Texter. Es klingt so einfach, "Nimm einfach ein Layout mit zwei Spalten".
... und da alle Daten rein zu packen, welche ich von Grund auf benötige um die Seite in unsere Firmen-Homepage zu intigrieren.

Am besten Du nimmst eine Kopie der Firmenseite und versuchst erst mal alles zwischen den Beiden großen Überschriften und dem footer rauszuschmeißen. Dann kannst Du dort deine zwei Spalten unterbringen. Vom CCS der beiden Spalten darf nur der strukturelle Teil übrig bleiben, Breitenangaben eventuell anpassen, Farbangaben u.ä. müssen raus bzw. durch die der Firmenseite ersetzt werden, der Teil ist nicht gerade trivial.

Links mit Layouts wo nur das grundlegende drin ist stehen oben. Dann haust Du erst mal alles rein, Bilder als Bild ohne extra Div drum rum, Überschriften mit h1, h2 ... und Text in Absätzen mit p, sonst nicht. _Schau Dir nun an was dabei rausgekommen ist._

Installier Dir eventuell Opera und laß Dir die Elemente kennzeichnen (unter Ansicht -> Seitendarstellung) oder suche Dir eine Erweiterung für den FF, dann siehst Du was sich wohin erstreckt und wo das nächste Element losgeht.

Von dem Punkt arbeitest Du weiter und frag ruhig wenn Du nicht weißt wie Du etwas ereichen kannst und Du bei http://de.selfhtml.org/ oder wo auch immer keine Lösung gefunden hast.

[Texter mit x]

Ach ja, mit Programmierung hat das nichts zu tun.