Hi,

Gibt es eine Möglichkeit, Objekte teils absolut und teils felxibel zu positionieren?
Also Bsp.:
Ich habe eine Hauptseite mit Unterseiten. Nun ist eine Unterseite absolut aufgebaut (angenommen durch div-Ebenen), indem da einige Bilder positioniert werden. Nun muss diese Unterseite aber in die Hauptseite eingebunden werden. Bei absoluten Positionen wären die Bilder aber nun an einer falschen Stelle, weil die Position der Unterseite nicht berücksichtigt wird.
Kann man sowas nur über PHP regeln (indem man die neuen absoluten Positionen ausrechnet) oder gibts dafür auch eine hübschere Form, mit der auch die standard-Browser umgehen können?

MfG thomy

Hi,

darauf kann ich erstmal nur ganz allgemein antworten, dass die position-Eigenschaft neben absolute noch drei weitere Eigenschaftswerte anbietet:

• static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
• relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
• absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
• fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.

Falls dir das nicht weiterhilft, wirst du hier wohl den Link zu deiner Seite nennen müssen, damit man den Sachverhalt zunächst mal in Augenschein nehmen kann, um sich dann konkret zu äußern, wie sich das Problem der Positionierungen lösen lässt.

mfg Maik

Einen Link gibts bisher noch nicht, da ich mir vorm Programmieren Gedanken darüber mache. Aber in groben Zügen dachte ich mir das folgenermaßen:

HTML-Code:

[viele Elemente von der Hauptseite]
<div name="unterseite" style="position:relative">
   <div style="position:absolute; top:123px; left:456px;">
      <img src="http://www.tutorials.de/forum/css/css/...">
   </div>
   [und noch mehr Krimskrams]
</div>
[weitere Elemente der Hauptseite]

Nur wirkt sich das "relative" nicht auf die absoluten Positionen aus...

Das div-Element besitzt kein name-Attribut

Wenn du stattdessen das id-Attribut bei einmaligem Vorkommen dieses Elements, oder das class-Attribut bei mehrmaligem Vorkommen setzt, kannst du es im Stylesheet relativ positionieren, damit sich die absoluten Positionsangaben des Nachfolgeelements auf seine Boxengrenzen, und nicht auf die des Dokumentkörpers / Viewports beziehen:

Code css:

1 2 3

div#unterseite { /* ID-Bezeichner */ position:relative; }

Code css:

1 2 3

div.unterseite { /* Klassen-Bezeichner */ position:relative; }

Vielleicht hilft dir das weiter.

mfg Maik

Aber, es müsste doch egal sein, ob ich das über eine importierte css-Datei mache oder gleich direkt über style=... die relative Positionierung angebe, oder nicht?
So, wie ich es im Bsp. geschrieben habe (abgesehen vom Namen, den habe ich hier noch hinzugefügt) hatte ich es getestet, und es ging nicht.

Klar, wie rum du die CSS-Formatierung vornimmst, ob nun in einem Inline-Style oder zentralem Stylesheet, ist hier zunächst mal ohne Bedeutung. Ich hab dir mit dem CSS-Code nur demonstrieren wollen, wie du das div-Element von dort aus ansprechen kannst, da es gemäß der Attribut-Referenz überhaupt kein name-Attribut besitzt.

Außer dem von mir beschriebenen Verhalten bzgl. der absoluten Positionsangaben innerhalb eines relativ positionierten Elements, verändert sich mit deinem gezeigten Codeschnipsel zunächst mal nichts. Wie auch? Doch vor allem, was soll sich denn dadurch deiner Ansicht nach ändern?

Wenn du aber rein aus Testzwecken für das relativ positionierte Elternelement mal eine Positionsangabe definierst, um es im Anzeigebereich des Browserfensters an einer anderen Stelle auszurichten, wirst du sehen, dass sich die absoluten Positionsangaben seines Nachfolgeelements zu ihm relativ verhalten.

mfg Maik

Und kann ich das für meine Zwecke missbrauchen? Wenn ja, wie? Kannst du mir da ein Bsp geben?

Ich glaube, du bist eher an der Reihe, uns mal ein komplettes Beispiel deiner Problemseite zu zeigen, damit man darauf auch näher eingehen kann, denn bislang weiß ich nicht, wo bzw. wie sich bei dir das Problem konkret darstellt.

mfg Maik

Tut mir Leid, aber wie gesagt, ich habe es noch nicht geschrieben. Aber um mein Bsp. mal zu detailieren: ich habe da 2 Arten von Unterseiten:

1) Ich habe ein Bild mit Einer Map. Im Bild sind einige Objekte, worüber ein Map-Area liegt. Wenn nun der User mit dem Curser über eines der Objekte geht, soll ein Rahmen um das Objekt aufleuchten. Das hatte ich mir so vorgestellt, dass ich Div-Ebenen über dem Bild Positioniere und über Javascript denen einen Border verpasse (entweder =0 (ausblenden) oder >0 (einblenden)).

2) Ich habe wieder eine Map, aber diesmal im direkten Sinne: ein Karte. Diese Karte besteht aus mehreren einzelnen Elementen, wie Pixel (nur halt etwas größer). DIíese werden durch kleine Bilder dargestellt, die mithilfe einer Div-Ebene positioniert werden. Der Sinn bei dieser Variante ist (anstatt, dass ich wieder ein Map von 1. verwende und die "Pixel" auf ein großes Bild male), dass die einzelnen Elemente interaktiv sind, d.h. ich kann sie direkt verlinken und bei Aktionen vom User neu designen (z.B. Aufleuchten eines Elements bei MouseOver).

Die Hauptseite sieht in beiden Fällen gleich aus. SIe besteht aus einer Tabelle, wo Bilder und Texte enthalten sind. Eine Zelle der Spalte soll für die Unterseite gedacht sein.

Hilft die das weiter?.

Zitat von thomy800

Tut mir Leid, aber wie gesagt, ich habe es noch nicht geschrieben.

Und was treibt dich dann zu der Annahme, dass da ein Problem mit den Positionierungen existiert?

Nimm's mir bitte nicht übel, aber für mich sind das bisher nur "ungelegte Eier", über die wir uns hier unterhalten, solange du hier keinen akuten Problemfall vorbringen kannst, den man sich in den unterschiedlichen Browsertypen zunächst mal anschauen kann, um zu den Ursachen was Konkretes sagen bzw. raten zu können.

Mir ist wohl bewußt, dass es mit absoluten und/oder relativen Positionsangaben ganz schnell zu Darstellungsfehlern in dem einen oder anderen Browser führen kann, aber so ins Blaue hinein, ohne Einsicht in den vollständigen Quellcode, kann ich dazu leider nichts weiter sagen.

mfg Maik

Ok. Ich habe mir das mal von nem Bekannten erklären lassen. Damit du weißt, was ich meinte, hier die Lösung:

HTML-Code:

<table border ="2">
	<tr>
		<td width=70>
			hallo
		<td width=70>
			123
	</tr>
	<tr>
		<td width=70>
			abc
		<td width=70>

			blakeks
	</tr>
	<tr>
		<td width=70>
			unterseite:
		<td width=70>
			<div style="position:relative; width:400px; height:200px;">
				<div style="position:absolute; left:100px; top:100px;">
					ABSOLUTE?
				</div>

			</div>
	</tr>
</table>

Mein Problem war, dass ich die Größenangaben (width & height) des Containers vergessen hatte :P

MfG thomy

Mal abgesehen von der fehlenden Boxendimension, von der ich mit deinen mageren Codeangaben auch nichts wissen konnte, hab ich mit meinem zweiten Post doch mitten ins Schwarze getroffen

mfg Maik