Re: Absolute Positionierung von Elementen auf der Foren Seite

von **#Frank** Mi 12 Okt 2011 - 11:22

Ich habe mir überlegt, das es am einfachsten ist, weil du auch deine Partner Bilder schon so eingefügt hast, wie sie im Hauptforum in der Fußzeile definiert sind es am besten wäre, wenn du das CSS deines Forums auch für die Tabelle benutzt.
Dazu musst du deiner Tabelle nur mitteilen welches CSS Datei diese benutzen soll.
Dazu machst du bitte volgendes:
Auf der HTML Seite der Tabelle hast du einen "head" Bereich.
Das ist der Bereich ganz oben, der zwischen:
<head>... und </head>
steht.
Nun setzt du bitte den Link zu deiner CSS Datei dort so ein:

Code:: <link rel="stylesheet" type="text/css" href="http://anime-central.forumotion.com/80-ltr.css">

und zwar direkt vor </head>
Nun verwendet deine Tabelle alle Einstellungen deines Hauptforums. Auch die Transparenz der Partnerbilder wird so mit übernommen.
Alle Links und sonstige Formatierungen die du in deinem Forum benutzt, sind so hier anwendbar.

Aber mal ganz unter uns. Bist du nicht inzwischen auch der Meinung, das du mit den Indexmodulen wirklich besser bedient gewesen währst?
Das ganze ist doch schon sehr aufwändig und schwer zu handeln.

Ach, und noch was dazu den Button in deinem Forum unter der Tabelle anzeigen zu lassen.
Es geht doch und zwar ist es ganz einfach.
Du hast ja in deinem Template dieses Teil eingefügt:

<TABLE style="Z-INDEX: 10000; POSITION: absolute; BOTTOM: 0px; LEFT: 0px"; >
<TBODY>
<TR>
<TD>
<IFRAME style="WIDTH: 600px; DISPLAY: none; HEIGHT: 400px" id=chatboxpop marginHeight=0 src="http://anipro-testforum.forumieren.net/h1-tabelle" frameBorder=0 marginWidth=0 scrolling=no></IFRAME>
</TD>
<TD style="VERTICAL-ALIGN: bottom"><IMG onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://www.abload.de/img/chat_open6ygu.png')?'block':'none';this.src=(this.src=='http://www.abload.de/img/chat_open6ygu.png')?'http://www.abload.de/img/chat_closedizhj.png':'http://www.abload.de/img/chat_open6ygu.png';" src="http://www.abload.de/img/chat_open6ygu.png"></TD></TR></TBODY></TABLE>

Das ist eine Tabelle mit zwei Spalten und einer Zeile (in der einen Spalte ist der Verdeckte Iframe und in der anderen ist der Button).
Um das nun in eine Tabelle mit einer Spalte und zwei Zeilen umzustellen brauchst du nur zwei einfache Einträge vorzunehmen (Bitte das Rot Markierte in dein Temlate einsetzen):

<TABLE style="Z-INDEX: 10000; POSITION: absolute; BOTTOM: 0px; LEFT: 0px"; >
<TBODY>
<TR>
<TD>
<IFRAME style="WIDTH: 600px; DISPLAY: none; HEIGHT: 400px" id=chatboxpop marginHeight=0 src="http://anipro-testforum.forumieren.net/h1-tabelle" frameBorder=0 marginWidth=0 scrolling=no></IFRAME>
</TD>
</tr>
<tr>
<TD style="VERTICAL-ALIGN: bottom"><IMG onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://www.abload.de/img/chat_open6ygu.png')?'block':'none';this.src=(this.src=='http://www.abload.de/img/chat_open6ygu.png')?'http://www.abload.de/img/chat_closedizhj.png':'http://www.abload.de/img/chat_open6ygu.png';" src="http://www.abload.de/img/chat_open6ygu.png"></TD></TR></TBODY></TABLE>

Das einfach dort an der Stelle einsetzen, absenden und veröffentlichen.
Dann ist der Button auch unter der Tabelle.

von **#Frank** Mi 12 Okt 2011 - 12:04

Ich sehe, das du es schon im Testforum eingesetzt hast.
Nun ergibt sich wieder das Problem mit der Frame Höhe.
Du musst nun für die Frame Höhe 2290 angeben.

von Leonides Mi 12 Okt 2011 - 12:54

Hallo #Frank, entschuldige bitte die spate Antwort.

Ich hab das jetzt eingefügt und es hat alles wunderbar geklappt. Das mit der Frame Höhe 2290 hab ich im nach hinein auch geändert.

Darf ich dich bitte noch mit einer einzigen Frage bitte belästigen?

Und zwar, wenn ich 2 von diesen Tabellen machen ist der Abstand zwischen den beiden Chat Open Button extrem groß. Ich hab schon versucht die Zahlen zu ändern aber der zweite Button bleibt dort wo er ist. (Dasselbe Problem hatte ich auch mit der einfachen Variante im Original Forum, da konnte ich an den Zahlen auch nichts ausrichten und dadurch blieb ein großer Abstand dazwischen. (Im Testforum hab ich vorerst auch die zweite Tabelle raus genommen.)

Könntest du mir vielleicht bitte noch erklären, wie ich das ändern kann?

Danke dass du dir die Zeit und Geduld genommen hast und mir dabei geholfen und dabei einige Stellen erklärt hast.

Zu deiner Frage:

Aber mal ganz unter uns. Bist du nicht inzwischen auch der Meinung, dass du mit den Indexmodulen wirklich besser bedient gewesen währst?

Du hast schon recht damit, dass die Indexmodule um einiges einfach gewesen wären, aber dadurch dass du auf meine Fragen eingegangen bist und diese auch super erklärt hast, habe ich auch ein wenig was dazu gelernt. Von dem her kann ich nur sagen, dass die Indexmodule einfacher gewesen wären, aber definitiv nicht so lehrreich als die aufwendige Variante gewesen wären und wie ich ja schon mal schrieb, will ich in diesem Bereich etwas dazu lernen und nicht auf der Stelle stehen bleiben. Smile

Deshalb noch mal ein großes Danke, dass du dir hier die Zeit genommen hast. Smile

Ich wünsche dir noch einen schönen Tag. Smile

Liebe Grüße
Leonides

von **#Frank** Mi 12 Okt 2011 - 13:14

Das Problem, das deine Buttons zum öffnen/schlissen so weit auseinander liegen, ist dadurch begründet, das immer der Platz resaviert wird, die deine Angegebene Höhe der einzelnen Frames einnimmt.
Das ist sozusagen ein Platzhalter.

Dir ist sicher schon der eintrag zindex=10000 aufgefallen.
Wenn du mal danach Googlst, dann wirst du eine Erklärung dazu finden.
Dieser Wert gibt an, auf welcher Position auf der Z Achse sich ein Element befindet.
Du kennst sicher das Koordinatensystem. Hier gibt es in einem Raum die Achsen X, Y und Z. So gibt es das hier auch.
Eine Seite besteht nicht nur aus zwei Dimensionen, Höhe und Breite, X und Y, sondern es gibt auch noch die dritte Dimension Z.
Das bedeutet, das du mit Hilfe der Angabe zindex auch noch die Position der einzelnen Elemente bestimmen kannst. Je höher der Wert hier um so weiter liegt der im Vordergrund.
Eventuell hilft dir das schon weiter.

von Leonides Mi 12 Okt 2011 - 13:51

Danke #Frank, die Erklärung hat geholfen und das Problem ist gelöst.
Wegen dem CSS Teil den ich in die HTML Seite einfügen musste, ist mir noch etwas aufgefallen!

Ich hab bei mir im Original Forum das CSS vorhin bearbeitet und die Hover-Sachen entfernt, aber Teilweise werden die Elemente obwohl sie entfernt wurden noch immer in der Tabelle im Testforum angezeigt.

Kann es sein das ich immer den neuen Link vom CSS-Grundgerüst verwenden muss, dass es im Testforum richtig angezeigt wird?

Liebe Grüße
Leonides

von **#Frank** Mi 12 Okt 2011 - 18:23

Das kann sein. Hast du Firebug auf deinem Firefox?
Dann schau bitte mal nach, welche CSS Datei nun verwendet wird. Ich habe hier nur den IE im Moment und kann das nicht sehen.

Ich habe es doch gefunden. Dein Aktuelles CSS hat nun die Bezeichnung:
83-ltr.css
und nicht mehr:
80-ltr.css
Das must du nun auf der HTML Seite noch angleichen.

von Leonides Do 13 Okt 2011 - 7:48

Guten Morgen #Frank!
Danke, es hat jetzt ohne Probleme geklappt. Smile

Ich wünsche dir noch einen schönen Start in den Tag. Smile

Liebe Grüße
Leonides

von **#Frank** Do 13 Okt 2011 - 10:41

Gut, dann werde ich nun hier das Thema mal abschließen, weil wir es nun mehr als genug erörtert haben. und nun das Ergebnis erreicht haben, was du eigentlich wolltest.

von Leonides Mo 17 Okt 2011 - 13:33

Hallo alle zusammen!

Also ich habe mal wieder eine Frage und zwar.
Ich möchte gern einzelne Elemente (Video, Text, Bilder) auf einer HTML Seite positionieren und hab dafür diesen Teil hier eingesetzt.

Code:: <div style="position: absolute; top: 70px; right: 1200px; width: 203px; height: 00px; z-index 1;"> INHALT </div>

Allerdings wenn ich dann bei der HTML Seite auf absenden geh und mir das Ganze im Forum anschauen möchte ist von den einzelnen Elementen nichts mehr zu sehen.

Vielleicht kann mir bitte hier jemand weiterhelfen und mir einen Rat geben wie ich auf einer HTML-Seite die Elemente positionieren kann, so dass es auch im Forum sichtbar wird.

Danke schon mal im Vorfeld.

Liebe Grüße
Lenonides

von **#Frank** Mo 17 Okt 2011 - 19:18

Du kannst doch nicht auf einer HTML Seite diese Elemente positionieren und dann davon ausgehen, das diese im Forum auch angezeigt werden.
Wenn überhaupt must du diese Sachen doch im Header oder im Footer platzieren.
Oder habe ich da was falsch verstanden?

von Leonides Mo 17 Okt 2011 - 19:39

Hallo #Frank, ich wünsche dir einen schönen Abend.

Also ich hab dich ja letzte Woche wegen diesen Tabellen auf der Seite genervt. Ich wollte bei der zweiten Box die ich rein gemacht habe, Video, Text und Bilder positionieren.

Ich dachte wenn ich dass hier für die Position verwende schaut es am Ende so aus wie ich es gerne in der zweiten Tabelle hätte.

Code:: <div style="position: absolute; top: 70px; right: 1200px; width: 203px; height: 00px; z-index 1;"> INHALT </div>

Auf der HTML-Seite bzw. auf der Vorschau hat es auch so ausgeschaut wie ich es gerne gehabt hätte, aber sobald ich auf absenden ging und mir das ganze im Forum ansah, war das Video, Text, Bilder aus der Tabelle weg.

Der Link von der HTML-Seite ist auch im Overall Header positioniert. Also genauso wie wir es letzte Woche besprochen haben. Nur das halt keine positionierung der einzelnen Elemente im Forum zu sehen sind.

Hab das jetzt auch erst mal weit gehend geändert, da irgendwie meine ganzen Versuche nachhinten los gingen. Das einzige was noch immer nicht zu sehen ist, ist das Video obwohl es auf der HTML-Seite eingesetzt und positioniert wurde.

Es wäre schön wenn du mir bitte weiter helfen könntest. Danke schon mal im Vorfeld.

Ich wünsche dir noch einen schönen Abend.

Liebe Grüß
Leonides

von **#Frank** Mo 17 Okt 2011 - 19:57

Findest du nicht, das es almählich einwenig überladen wird, wenn du so viel zeug auf deine Seite packst?
Du must auch mal bedenken, das all diese Daten immer auch mit geladen werden müssen. Unabhängig davon ob sie angezeigt werden oder nicht.
Den Datenfluß hast du trotzdem.
Ich denke das du dein Konzept in dieser Hinsicht noch mal überdenken must.
Dann hätte ich gerne malö die Adresse der HTML Seite und die Stelle wo es im Forum eingesetzt ist.

von jany Mo 17 Okt 2011 - 22:20

Ich möchte nicht dazwischen reden aber deine Seite lässt sich mach genau 37 sek bei mir vollstaendig anzeigen ... bei 6k Leitung ... Frank hat vollkommen recht deine Seite ist voll ....

von Leonides Di 18 Okt 2011 - 9:55

Hallo ihr zwei.
Also ich denk mal das du Jany im orginal Forum warst oder?
Ich finde es dort selbst extrem überfüllt, deshalb wollte ich es ja im Testform ändern und einige Elemente die im Portal waren in die Tabelle geben und den rest dann entfernen. Wobei ich noch mal an die erste Tabelle ran muss, weil ich es nicht wirklich so schön finde. o.o
Wenn es aber dann noch immer nicht den gewünschten Effekt hat, so wie ich es mir vorstelle wird definitiv noch etwas entfernt werden. o.o

Link

Code:: <TABLE style="Z-INDEX: 800; POSITION: absolute; top: 25px; LEFT: 0px"; > <TBODY> <TR> <TD> <IFRAME style="WIDTH: 600px; DISPLAY: none; HEIGHT: 922px" id=Tabelle marginHeight=0 src="http://anipro-testforum.forumieren.net/h2-tabelle1" frameBorder=0 marginWidth=0 scrolling=no></IFRAME> </TD> </tr> <tr> <TD style="VERTICAL-ALIGN: bottom"><IMG onclick="document.getElementById('Tabelle').style.display=(this.src=='http://www.abload.de/img/chat_open6ygu.png')?'block':'none';this.src=(this.src=='http://www.abload.de/img/chat_open6ygu.png')?'http://www.abload.de/img/chat_closedizhj.png':'http://www.abload.de/img/chat_open6ygu.png';" src="http://www.abload.de/img/chat_open6ygu.png"></TD></TR></TBODY></TABLE>

Ich hab mich auch heute schon mit einigen aus dem Forum unterhalten und gefragt ob sie Ladeprobleme haben, da mir persönlich keine Aufgefallen sind und die hatten bisher auch keine Probleme. o.o

Aber wie ich bereits oben gesagt habe, hab ich ja vor das noch einige Sache entfernt und geändert werden, da mich einiges selbst nicht wirklich anspricht, aber wenn ich nicht rumprobiere werde ich auch nicht wissen, wie es besser gehen würde. o.o

Deshalb danke noch mal für eure Ratschläge, ich werde es bei der weiteren Umsetzung im Testforum beherzigen.

Liebe Grüße
Leonides

von **#Frank** Di 18 Okt 2011 - 10:29

Da das jetz hier immer wieder die gleiche Frage ist und du scheinbar mit der Reihenfolge der Elemente nicht klar kommst, habe ich das Alte und das Neue Thema zusammengeführt und mal in den Diskusionsbereich verschoben.
So wie ich es sehe, hast du doch das Video auch über eine absolute Positionierung eingesetzt und deine Tabelle 2 öffnet sich nun hinter dem Video.
Hier scheint doch ganz eindeutig die Anordnung der Elemente auf der Z Achse nicht zu stimmen.

von **#Frank** Di 18 Okt 2011 - 11:16

Ich habe es mir jetzt noch mal angesehen. Du hast auf deiner Tabellenseite:
http://anipro-testforum.forumieren.net/h2-tabelle1
ein Video mit dieser Angabe platziert:

Code:: <div style="position: absolute; top: 70px; right: 1200px; width: 203px; height: 00px; z-index 1;">

Hier hast du eine Verschiebung vom rechten Bildrand von 1200 PX angegeben (right: 1200px;)
Damit ist doch klar was passiert. Auf deiner Seite in der sich öffnenden Tabelle wird das Video 1200 PX vom rechten Rand angezeigt. Da deine Tabelle Links ist und diese nur 600 PX breit ist, wird das Video über den Linken Bildrand in den Unsichtbaren Bereich verschoben.
Du musst hier vom linken Bildrand aus positionieren.
Also:
left: 12px; anstatt right: 1200px;
Wenn du auch nur etwas davon verstanden hättest, von dem was diese Positionierungen betrifft, dann hättest du auch wirklich selber darauf kommen können.
Du solltest dir dringend mal das hier Abspeichern:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm
Auch die Funktion der Z Index Ausrichtung ist dort erklärt:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index
Alles was du wissen musst ist dort mit Beispielen mehrfach erläutert.
Da das nun klar ist und ich auch wirklich keine Lust mehr habe das noch drei Wochen durch zukauen, mache ich hier nun zu.
Ließ dir die Beschreibungen auf http://de.selfhtml.org gründlich durch und verstehe die Begriffe left, right, top und bottom sowie die Positionen auf den Achsen deren Nullpunkt in der Unteren linken Ecke des Monitors ist.

von Gesponserte Inhalte