Ebenen Positionierung innerhalb einer zentrierten Tabelle?

Acarion · 16.11.2005, 15:35

Ich weiß, dass diese Frage schon einige mal in diesem Forum aufgetaucht ist, doch habe ich denke alles so getan, wie es schon beschrieben wurde. Aber leider führt die Ebene ihr eigenleben und tut einfach nicht was sie soll

... Wie schon erwähnt habe ich eine zentrierte Tabelle, in der sich eine Ebene befindet. Doch wenn ich nun die Auflösung des System ändere, verschiebt die Ebene sich nicht mit dem Rest der zentrierten Tabelle.
Was die Position(absolute, static, relativ...) angeht, da habe ich schon alle Möglichkeiten durchprobiert, jedoch ohne Erfolg.
Vielleicht könnt ihr mit dem Quellcode etwas anfangen:

Zitat:

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Unbenannte Seite</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"></style>
</head>

<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="middle" align="center">
<div id="Ebene1">
<img src="Aufbau/Main/main buttom trans2 .gif" alt="" width="691" height="308" border="0" /></div>
<div style="position:relative;width:1005px;height:768px;-adbe-g:m;">
<div style="position:absolute;top:0px;left:148px;width:690px;height:235px;">
<img src="Aufbau/Main/main top2.jpg" alt="" width="690" height="235" border="0" /></div>
<div style="position:absolute;top:0px;left:838px;width:169px;height:754px;">
<img src="Aufbau/Main/main right2.jpg" alt="" width="169" height="754" border="0" /></div>
<div style="position:absolute;top:0px;left:3px;width:184px;height:754px;">
<img src="file:///K:/hp/richtig/main left trans4.4.gif" alt="" width="184" height="754" border="0" /></div>
</div>
</td>
</tr>
</table>
</body>

</html>

Bitte um Hilfe,
danke schonmal

UweB · 16.11.2005, 19:31

Wenn du "Ebene1" relativ positionierst, verschiebt sie sich sehrwohl mit dem Rest der Tabelle. Fragt sich nur ob diese Konstruktion aus Ebenen und Tabelle das tut, was du erwartest.

Acarion · 16.11.2005, 23:32

Wie ich bereits in dem Forum in Erfahrung bringen konnte, sollte die Konstruktion aus einer zentrierten Tabelle und einer Ebene, funktionieren.
Nunja, was ich erwarte ist wie gesagt, das die Ebene ein Teil der Tabelle ist, und sich in ihr mit bewegt.
Jedoch konnte ich eben feststellen, da es soweit funktioniert, wenn es in dem Tabellenbasierten Raster zusammen gebaut wird.. allerdings kann ich damit im meinem Fall nicht meinen Wünschen nach kommen, weswegen ich das Layout-Raster benötige, in dem die "Verknüpfung" von Ebene und Tabelle (wie oben beschrieben) anscheinend nicht zu funktionieren scheint.
Aber wieso geht es im Layout Raser nicht??
Was kann ich tuen?

UweB · 17.11.2005, 06:53

Das funktioniet in Layoutrastern genauso, wie in normalen Tabellen.

Hier ein Beispiel:

Code:

<style type="text/css" media="screen"><!--
#Ebene1  {
	background-color: orange;
	visibility:        visible;
	position:          relative;
	width:             100px;
	height:            100px }


--></style>
...
<div align="center">
	<table width="687" border="0" cellspacing="0" cellpadding="0" bgcolor="#bd7373" cool gridx="16" gridy="16" height="442" showgridx showgridy usegridx usegridy>
		<tr height="128">
			<td width="160" height="441" rowspan="2"><spacer type="block" width="160" height="441"></td>
			<td width="526" height="128"><spacer type="block" width="526" height="128"></td>
			<td width="1" height="128"><spacer type="block" width="1" height="128"></td>
		</tr>
			<tr height="313">
			<td width="526" height="313" valign="top" align="left" xpos="160">
				<div id="Ebene1"></div>
			</td>
			<td width="1" height="313"><spacer type="block" width="1" height="313"></td>
		</tr>
		<tr height="1" cntrlrow>
			<td width="160" height="1"><spacer type="block" width="160" height="1"></td>
			<td width="526" height="1"><spacer type="block" width="526" height="1"></td>
			<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
		</tr>
	</table>
</div>

Gruß
Uwe

Acarion · 20.11.2005, 11:33

Sobald ich es in ein Layout Raster konvertiere, scheint die Ebene, die ich dann dort rein setze, nicht wirklich Inhalt dieses Raster zu sein. Deswegen bewegt sie sich dann anscheinend auch nicht mit, sobald die Auflösung geändert wurde. Das mit den Ebenen ist für mich so wichtig, da innerhalb der zentrierten Tabelle, Ebenen übereinander gelegt werden müssen (mit Z-index).

Dann habe ich von Uwe diesen Link bekommen, wo beschrieben wird, wie man es ohne ein "Tabellen-Ebenen-Mix", nämlich außschließlich aus Ebenen machen kann(mit der Zentrierung etc.)

Ich habe genau getan, was beschrieben wurde:

<div style="width:760px;margin:0px auto;">
Seiteninhalt...
</div>

Die Ebenen sind einfach nicht zentriert:
Es ist genau das selbe Problem wie bei den Ebenen in Tabellen (beim layout raster)... sobald ich eine Ebene für "Seiteninhalt" einsetze, scheint sie sich nicht in dem äußersten Rahmen (<div style="width:760px;margin:0px auto;">) zu befinden. Die Rahmengröße verändert ja nichteinmal ihre Größe, wenn ich eine Ebene(mit Bild) reinsetze, dann liegt sie dann einfach außerhalb, obwohl der gelbe Punkt einer Ebene sich in diesem gleich groß bleibenden Rahmen befindet.( Ansicht im layout Modus)
Wenn ich einfach einen Textschreibe, dann geht es...
Dann passt sich auch die Rahmengröße dem Text an, also wird sie größer, wenn der Textinhalt umfangreicher als die urpsrungsgröße Rahmengröße ist.
Genau so gut funktioniert es, wenn ich ein Bild einfach ohne Ebene dort einfüge... doch davon hab ich leider wenig

Die zweite dort beschriebene Lösung, mit dem body, führt leider zu dem selben Resultat.

Aber nicht mit Ebenen. Zählen Ebenen nicht auch als "Seiteninhalt"?

Also langsam verzweifle ich hier ...
Wieso funktionert es nicht?

Nachtrag:
Ich verwende übrigens Golive CS 2.

UweB · 20.11.2005, 12:46

Hallo Acarion,
damit andere verstehen können, worum es geht, hier noch einmal der Link.
http://www.css4you.de/wslayout1/ex0003.html
Die Beispielseite sollte doch auch bei dir zentriert erscheinen. Du siehst also, es funktioniert.
Siehst du dir eine Seite nur in der Layoutansicht an? Es die funktioniert leider nicht immer. Du solltest dir Seiten immer auch in der Vorschau und zusätztlich im IE und Firefox ansehen. Das geht direkt aus GL heraus über "Vorschau im Browser". Die einzelnen Browser musst du GL vorher natürlich eintragen (Siehe Handbuch/Onlinehilfe).
Ob deine Ebenen richtig ineinanderliegen, oder nicht vielleich doch über oder nebeneinander, wird dir niemand sagen können, der nicht deine Seiten und deren Quelltext gesehen hat. Du solltest deine Seiten also auch auf einen Server hochladen, und hier einen Link posten.
Weiter würde ich dir raten dich erst einmal in die Grundlagen von CSS hineinzuarbeiten. Sieh dir auf der Seite http://www.css4you.de also nicht nur das eine Beispiel an, sondern fange z.B. mit dem Workshop "Wie fange ich an" an. Natürlich kannst du auch andere Seiten durcharbeiten. Da findest du bei google einiges.

Gruß
Uwe

Acarion · 20.11.2005, 13:01

Oh, den Link wollte ich eigentlich auch noch posten, aber habe es dann leider vergessen.

Zitat:

Siehst du dir eine Seite nur in der Layoutansicht an? Es die funktioniert leider nicht immer. Du solltest dir Seiten immer auch in der Vorschau und zusätztlich im IE und Firefox ansehen. Das geht direkt aus GL heraus über "Vorschau im Browser". Die einzelnen Browser musst du GL vorher natürlich eintragen (Siehe Handbuch/Onlinehilfe).

Ja, das ist mir bekannt, und ich mache es auch immer

Aber dort geht es genauso wenig.

Zitat:

Ob deine Ebenen richtig ineinanderliegen, oder nicht vielleich doch über oder nebeneinander, wird dir niemand sagen können, der nicht deine Seiten und deren Quelltext gesehen hat. Du solltest deine Seiten also auch auf einen Server hochladen, und hier einen Link posten.

Ok, ich werde mich mal drum kümmern und es dann bald hier posten.

Danke ersteinmal für die Antwort.

Acarion · 20.11.2005, 14:34

Erst einmal möchte ich als kleine Information bekannt geben, dass es eine Game-Page wird, die ich für ein paar Freunde anfertigen will.

Nach dem Hochladen, habe ich es bisher nur im IE versucht, also bitte ich euch ihn für diesen Versuch zu verwenden.

Hier ist ein Link, wie es aussieht, wenn ich Tabelle (layout raster) + Ebenen verwende. Wenn ihr nun bei euch die Auflösung 1024&768 nehmt, werdet ihr sehen, dass alles soweit optimal positioniert ist. Wechselt ihr nun aber zu einer Auflösung wie z.b. 1280&1024, dann seht ihr, dass die 2 Ebenen nicht mit der restlichen Tabelle die Position wechseln.
http://www.thomas-toepfer.homepage.t...de/index4.html

Versuche ich das ganze nun nach dieser Methode,(http://www.css4you.de/wslayout1/ex0003.html) ist es zwar für eine bestimmte Auflösung (1280x1024) in Ordnung, aber wenn ihr dann zu einer niedrigeren Auflösung wechselt, entsteht auf der linken Seite ein Rand.
Hätte ich es anders angefangen, und es für 1024x768 zusammen gebastelt, wäre wiederum bei einer höheren Auflösung auf der rechten Seite der Rand. Man sieht also, die Ebenen sind nicht zentriert. (siehe meine letzten Beiträge in diesem Topic)
http://www.thomas-toepfer.homepage.t....de/test2.html

/Nachtrag
Wäre möglich, dass die linke Seite nicht angezeigt wird. Wird halt ein Bereich, wie auf der rechten Seite, wo später Buttons und links aufgelistet werden.
/Nachtrag 2
Habe die linke Seite in eine Ebene getan, nun wird sie auch angezeigt.Aber leider wird sie wie die anderen 2 Ebenen bei "falschen" Auflösungen auch falsch positioniert . Bei der Auflösung 1024x768 wäre nun alles optimal.
http://www.thomas-toepfer.homepage.t...de/index3.html

UweB · 20.11.2005, 16:54

Du solltest doch die Ebenen nicht absolut positionieren.
Positioniere relativ oder static. Dann gehen die Ebenen mit der Zelle mit.
Auch im CSS4YOU beispiel wird statisch positioniert ( keine Angabe = static ).

Acarion · 20.11.2005, 17:01

Ich dachte ich hätte schon erwähnt, aber Punkt ist der, dass ich egal mit welcher Positionsangabe, das gewünschte Resultat leider nicht erhalte. Zwar verändert sich dann die Position, aber eben eher unwillkürlich. Z.b. ist die Ebene bei statisch dann immer über dem gesamten Komplex und bei Relative irgendwo mittendrin.

/Nachtrag

Ist es normal, dass wenn ich die Ebene auf statisch setze, sie im Layout Modus aus der Ebenen Palette verschwindet und nicht mehr als Ebene angeklickt werden kann?( somit alle Eigenschaften dieser Ebene über den Layout Modus nicht mehr verändert werden können).
Und im Quellcode allerdings keine Veränderungen vorliegen, das auf so etwas deuten würde?

UweB · 20.11.2005, 17:25

Das liegt daran, dass du Abstände (left, top) gesetzt hast, die natürlich nur mit absoluter Positionierung Sinn ergeben. Sie sollen doch genau an der Stelle erscheinen, an der du sie einfügst.

Unwichtig, aber auch nicht richtig: du hast der Ebene1 zwei verschiedene Werte für z-index gegeben.

Acarion · 20.11.2005, 18:45

Zitat:

Unwichtig, aber auch nicht richtig: du hast der Ebene1 zwei verschiedene Werte für z-index gegeben.

Stimmt, danke.

Zitat:

Das liegt daran, dass du Abstände (left, top) gesetzt hast, die natürlich nur mit absoluter Positionierung Sinn ergeben. Sie sollen doch genau an der Stelle erscheinen, an der du sie einfügst.

Eigentlich habe ich gar keine Abstände gestetzt. Gibt dies nicht nur die Position an, wo ich es halt hingeschoben habe?
Was soll ich nun tuen? Top/Left entfernen bringt irgendwie nichts.

UweB · 20.11.2005, 18:49

Zitat:

Top/Left entfernen bringt irgendwie nichts.

Doch, das sollte schon etwas bringen.
Nur darfst du die Ebenen nicht mehr durch Anfassen verschieben. Ich meine, dann werden sie wieder absolut positioniert.

Acarion · 20.11.2005, 19:19

Ich hab nun beides auf "unverändert" gestellt, womit im Quellcode die Angabe Top/Left weggefallen ist. Also sollte es nun keine Abstände mehr haben.
Aber die Ebene verschiebt sich nun haargenau so falsch, wie mit den Top/Left Angaben auch.
Also irgendwas stimmt doch hier nicht

Wieso geht es einfach nicht? *deprimiert ist*

UweB · 21.11.2005, 07:40

Zitat:

Also irgendwas stimmt doch hier nicht

Sicher, aber ich habe eigentlich keine Lust mehr mich zu wiederholen:
Wir können nicht sehen, was bei dir nicht stimmt. Du hast ja wieder keinen Link gesetzt.

Ich denke, so kommst du nicht weiter. Du solltest dich erst einmal mit den Grundlagen vertraut machen. Sieh dir z.b. bei css4you auch die anderen Beispiele an, ganz besonders die mehrspaltigen Layouts. Und verabschiede dich von der Vorstellung die Ebenen in der Layoutansicht von GL bearbeiten/verschieben zu können. Ich würde sie noch nichteinmal über diese Ansicht einfügen.