Überschneidene Grafiken/Ebenen fixiren/alternative zu iFrame

[StupidBoy]

Hi,
habe kürzlich mit HTML begonnen und nun mit einer kleinen Seite angefangen (www.blogging-online.com).
Die Seite befindet sich noch im Aufbau und ich hab sie erstmal nur hoch geladen um es euch anschaulicher erklären zu können.
Problem ist nun folgendes:
Auf der linken Seite unter der Sidebar sollen einige kleine Images von Partnerseiten kommen, nun weiß ich aber nicht wie ich diese Grafiken über der bereits vorhanden platziere. Ich habe es mit einer neuen Ebene versucht, das gelingt im Prinzip auch allerdings verschiebt ich die Grafik respektive die Ebene aber immer wenn sich Bildschirmauflösung oder Fenstergröße des Browsers ändert. Wäre schön wenn da jemand helfen könnte.
Das gleiche Problem habe ich auch bei der Sidebar, nur dass ich hier nicht mit Grafiken die vorhandene Grafiken überlagern möchte sondern mit Text, hoffe ihr versteht wie ich mir das vorstelle.

Außerdem suche ich noch nach einer guten alternative zu einem InlineFrame um dann letztendlich auch Inhalte in die Seite einzufügen, vorzugsweise PHP-Seiten (Gästebuch, News etc.).

MFG SB

[harry b.]

Hi,

hi!

Auf der linken Seite unter der Sidebar sollen einige kleine Images
von Partnerseiten kommen, nun weiß ich aber nicht wie ich diese
Grafiken über der bereits vorhanden platziere.

versuch mal die grafik nicht in die tabelle zu legen, sondern als hintergrundgrafik einzubauen.
probier mal folgendes in die betreffende td einzubauen:

style="background-attachment:fixed; background-image:url(deine-grafik.gif); background-position:left; background-repeat:no-repeat;"

damit kannst du die zelle befüllen wie du willst....

Das gleiche Problem habe ich auch bei der Sidebar, nur dass ich
hier nicht mit Grafiken die vorhandene Grafiken überlagern möchte
sondern mit Text, hoffe ihr versteht wie ich mir das vorstelle.

siehe oben

Außerdem suche ich noch nach einer guten alternative zu einem
InlineFrame um dann letztendlich auch Inhalte in die Seite
einzufügen, vorzugsweise PHP-Seiten (Gästebuch, News etc.).

du könntest ein cms-system wie typo3, mambo, oder ähnliches nutzen....
spart dir auch ne menge zeit beim erstellen der einzelnen inhalte...

keep it easy,
harry b.

[StupidBoy]

Danke soweit, ich hoffe ich kann das umsetzen, werde mich nacher mal ransetzen.

Außerdem suche ich noch nach einer guten alternative zu einem
InlineFrame um dann letztendlich auch Inhalte in die Seite
einzufügen, vorzugsweise PHP-Seiten (Gästebuch, News etc.).

du könntest ein cms-system wie typo3, mambo, oder ähnliches nutzen....
spart dir auch ne menge zeit beim erstellen der einzelnen inhalte...

CMS sagt mir nur vom Namen her etwas, der Inhalt sollte neben neben einem Gästebuch (BurningBook von WoltLab) noch ein fertiges Newssystem sein bei dem ich, wenn es installiert ist, ähnlich wie in einem Forum, News einfach erstellen und posten kann. Zudem kommt evt. noch eine Phtogallerie hinzu.
Macht da ein CMS sinn oder ist das im Prinzip das gleiche?
Mit einem IFrame bekomm ich es ja schon hin, bloß gefällt mir das ganze noch nicht so gut und es müsste doch eigentlich auch noch andere Möglichkeiten geben um PHP- bzw. HTML-Seiten in diese Seite einzubinden oder nicht?

Grüße SB

[StupidBoy]

Hmm, habs veruscht und bin gescheitert.
Wär super wenn mir da noch einmal jemand auf die Sprünge helfen könnte :)
Hier der Originalcode:
<tr height="312">
    <td width="246" height="312" valign="top" align="left" xpos="0"><img src="left_3.gif" alt="" height="312" width="209" border="0"></td>
    <td width="1" height="312"><spacer type="block" width="1" height="312"></td>
   </tr>
Wenn mir da jetzt zeigen könnte wie ich Das genau machen soll wär ich sher dankbar.

Grüße SB

[Thomas J.S.]

Hallo,

Wär super wenn mir da noch einmal jemand auf die Sprünge helfen könnte :)
Hier der Originalcode:

<td width="246" height="312" valign="top" align="left" xpos="0">

HTML kennt kein Attribut xpos.

<spacer type="block" width="1" height="312">

Es gibt in HTML kein Element namens "spacer".

Wenn mir da jetzt zeigen könnte wie ich Das genau machen soll wär ich sher dankbar.

Das ginge aber nur dann, wenn du HTML schreiben würdest, so kann man dir leider wirklich nicht viel helfen, denn dein Code wird offensichtlich von irgendeinem Programm produziert, und das ist kein HTML.
Versuche die verschiedenen Fehler - du hast auch viele Tippfehler im code - erst zu bereinigen:

<http://validator.de.selfhtml.org/validate/?uri=http://www.blogging-online.com/&lang=ge&doct
ype=doctypeAUTO&charset=charsetAUTO>

oder
http://validator.w3.org/check?verbose=1&uri=http%3A//www.blogging-online.com/

Grüße
Thomas

[StupidBoy]

Hi Thomas,
ja mein Code wurde von GoLive generiert.
Warum? Weil ich nicht die Zeit haben um alles von Hand zu schreiben.
Wenn du mir nicht helfen magst, auch gut.

MFG SB

[Der Martin]

Hallo,

ja mein Code wurde von GoLive generiert.

Aha, deshalb. Wenn das Programm wirklich HTML generieren würde, wäre das ja auch völlig in Ordnung.

Warum? Weil ich nicht die Zeit haben um alles von Hand zu schreiben.

Natürlich. Lieber verbringst du Stunden oder gar Tage mit der Suche nach Fehlern, die du bei händischer Erstellung des Codes gar nicht drin hättest. Und wenn das Ding Phantasie-Tags und Attribute einsetzt, kannst du nicht erwarten, dass das Ergebnis im Browser dann so angezeigt wird, wie du es dir vorgestellt hast.

So long,

Martin

[SB]

Bisher wird das ding so dargestellt wie ich das erwartet hatte, ich weiß bloß gerade nicht weiter.
Ich weiß zwar nicht was sie für einen Sinn darin sehen sich darüber regelrecht zu echauffieren, nur soviel, das hilft mir kein Stück weiter und sie dürften auch eher wenig davon haben.
Wenn sie die Zeit und die Muße haben alles per Hand zu coden dann freut mich das für sie, ich habe aber, wie bereits erwähnt, diese Zeit nicht und würde mich über konstruktive Hilfe freuen.
Alles andere brauchen sie gar nicht erst schreiben.

Grüße SB

[Thomas J.S.]

Hallo,

Bisher wird das ding so dargestellt wie ich das erwartet hatte, ich weiß bloß gerade nicht weiter.

Ja, darum geht es. Dass es bisher so dargestellt war. Es gibt eben keine Garatie dafür, dass GoLive-Code vom Browser dargestellt wird.

Ich weiß zwar nicht was sie für einen Sinn darin sehen sich darüber regelrecht zu echauffieren, nur soviel, das hilft mir kein Stück weiter und sie dürften auch eher wenig davon haben.

Du schriebst mir "Wenn du mir nicht helfen magst, auch gut."
Ich möchte aber dir helfen, nur ich kann es unter diesen Umständen schlicht nicht. Ich werde mir GoLive nicht kaumfen, nur damit ich mir ansehen kann was das Programm an Code produziert, da es auch keinen Sinn macht, schließlich wird der Code von den Browser nicht verstanden.

Ich kann dir leider eben nicht helfen: weil ich auch nicht die Zeit und die Lust habe, mir deine Seite zu runterladen, den Code zu bereinigen, so dass es korrektes HTML - was alle Browser verstehen - ist und mich erst dann auf das eigentliche Problem konzentrieren zu können.

Wenn sie die Zeit und die Muße haben alles per Hand zu coden dann freut mich das für sie, ich habe aber, wie bereits erwähnt, diese Zeit nicht und würde mich über konstruktive Hilfe freuen.

Du muss auch nicht alles von Hand schreiben, es gibt wirklich genügend Tools und Programme auf dem Markt.
Egal was wir dir vorschlagen, es wird definitiv so lange nicht klappen, bis entweder du den Code bereinigst, so dass damit jeder Browser und jeder Helfer was anfangen kann, oder bis sich ein GoLive-Besitzer meldet und dir die Benützung des Programms erklärt.

Alles andere brauchen sie gar nicht erst schreiben.

Sei nicht eingeschnappt und akzeptiere die sachliche und durchaus konstruktive Kritik.
Du wirst die Zeit so oder so aufbringen müssen: entweder muss du das Handbuch zum Programm gründlich durchlesen oder den Code bereinigen.

Grüße
Thomas

[Stupid.Boy]

Es erscheint mir etwas SInnlos die Diskussion hier noch weiter zu führen, aber ein letzter Versuch soll noch sein.
Es mag sein, dass der Code den GoLive ausspuckt alles andere als schön geschweige denn sauber ist, es geht mir aber auch nicht darum das diese  Website ein Musterbeispiel für das befolgen der W3C-Richtlinien geht ;-)
Bisher wurde alles richtig angezeigt, sowohl im IE6 als auch im FF, so dass es mir peröhnnlich genügt.
Ich erwarte auch von niemanden, dass er hier für mich den Debugger macht.

Aber zurück zum eigentlichen Problem:
Ich habe nun einiges probiert und denke, dass ich nun das eigentliche Problem etwas näher beschreiben kann.
Mit hilfe eines Layers ist es mir gelungen, die geünschte Grafik über der bereits vorhanden Hintegrrundgrafik zu platzieren.
Siehe hier: www.blogging-online.com/index4.html.
Da die gesamte Seite aber in der Breite statisch ist und ich sie deshalb aus Gründen der Optik zentriert angelegt habe, der Layer sich aber am linken Fensterrand ausrichtet, verschiebt sich der layer inkl. Grafik beim Vergrößern und Verkleinern des Bowserfensters.
Eine möglichkeit die ich sehe ist den Layer auf die gleiche breite zu bringen wie den Rest der Seite und ebenfalls zu zentrieren was mir bisher allerdings nicht gelang, wenn dann wurde nur der Inhalt des Layers zentriert.
Deshalb wäre ich sehr dankbar wenn mir jemand eine Möglichkeit nennen könnte um den Layer (ohne den Inhalt) zu zentrieren. Einfach ein beispiel wie dieser Code ausshen könnte währe schon eine große Hilfe.

MfG SB

PS: Ich bin nicht eingeschnappt, ich habe bloß manchmal das Gefühl, es kommt bei SELFHTML mehr auf die Qualität des Codes als auf das Ergebniss an.

[Thomas J.S.]

Hallo,

Es mag sein, dass der Code den GoLive ausspuckt alles andere als schön geschweige denn sauber ist, es geht mir aber auch nicht darum das diese  Website ein Musterbeispiel für das befolgen der W3C-Richtlinien geht ;-)

Das ist an sich OK, wenn du weisst was du mit dem Code machst.

Bisher wurde alles richtig angezeigt, sowohl im IE6 als auch im FF, so dass es mir peröhnnlich genügt.

Eben, das ist das Problem, was ich dir schon die ganze Zeit zu erklären versuche: _bisher_!
Du fängst jetzt an Inhalte einzubringen und du wirst bei jedem Buchstaben genau dasselbe Problem haben was du jetzt mit diesem Bild hast. [1]

Aber zurück zum eigentlichen Problem:
Mit hilfe eines Layers ist es mir gelungen, die geünschte Grafik über der bereits vorhanden Hintegrrundgrafik zu platzieren.

Nein. Ich bitte dich deinen Code anzusehen: (das wäre die Zeile in der du die Grafik jetzt plazieren willst):

<td xpos="0" align="left" height="21" valign="top" width="246"><img src="index4_files/left_2.gif" alt="" border="0" height="21" width="209"></td>

Du hast keine einzige Hintergrundgrafik!

Alle Grafiken die du bisher verwendet hast, liegen als _Inhalt_ ganz normal in der Tabellenzelle.
Das haben dir schon jetzt einige hier zu erklären versucht.
So lange du nicht tatsächlich _Hintergrundgrafiken_ verwendest -> [1] bekommst jedesmal das Problem, dass dir die Inhalte in der Zelle dein Layout total auseinanderreisen und das bei jedem einzelnen Buchstaben! Es wird dir auch nicht möglich sein, jeden Text, jedes Bild welches du als eigentlicher Inhalt nutzen willst in Layers zu leben und so positionieren, dass sie dann auch noch korrekt angezeigt werden.

PS: Ich bin nicht eingeschnappt, ich habe bloß manchmal das Gefühl, es kommt bei SELFHTML mehr auf die Qualität des Codes als auf das Ergebniss an.

Es ist leider sehr oft so, dass jemand sagt "ich habe hier ein Problem" und wenn dann man zu helfen versucht, fragt man sich natürlich zuerst "was verursacht den Fehler", wenn dann der Code wirklich fehlerhaft ist, muss der Helfer sich erst um diese Fehler kümmern, denn sonst kann man wirklich nur noch raten was denn die eigentliche Ursache ist. Das ist wirklich mühsam und bürdet den, der helfen will unnötige Arbeit auf. Es wird also einfach und vollkommen richtig empfohlen "berinige deinen Code".
Damit lösen sich a) die meisten Probleme und b) die Helfer können sich auf das tatsächliche Problem konzentrieren.

Grüße
Thomas

PS: nicht als Belehrung oder Beleidigung gemeint (und es liest sich auch ganz lustig): http://www.lugbz.org/documents/smart-questions_de.html

[StupidBoy]

Ok, jetzt versteh ich auch was du meinst, damit wird deine Kritik für mich verständlich.
Da ich in HTML allerdings nicht sehr belsen bin muss ich einmal nachfragen:
Die Grafiken also nach wie folgt als Hintergrundgrafik definieren:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" width="105" align="center" background="name_der_datei.gif"></td>
</tr>
</table>

Richtig so? Ich werds mal versuchen.

Grüße

[Thomas J.S.]

Hallo,

Ok, jetzt versteh ich auch was du meinst, damit wird deine Kritik für mich verständlich.

<td height="20" width="105" align="center" background="name_der_datei.gif"></td>
</tr>
</table>

Ja, so kannst du deine Bilder als Hintergrundgrafik einbinden:
zwei Tipps dazu:

1. verwende eine DOCTYPE wie:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

damit alle Browser im standard-konformen Mode arbeiten (siehe dazu auch die Seite http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch)

2. verwende für die Tabellen "fixed-layout": einfach in dein CSS ein:
     table { table-layout:fixed; }
   schreiben. Erklärung siehe: http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout

Grüße
Thomas

[StupidBoy]

Danke für die Tipps ;-)
Hab mal angefangen aber wie erwartet ist das ganze ziemlich pronlematisch.
Mir hats das gesamte Layout zerissen und während im IE wenigstens noch alle Grafiken zu sehen sind, siehts im FF noch schlechter aus.
Habe dann noch etwas mit dem rumprobiert was harry mir weite roben vorgeschlagen hatte ( style="background-attachment:fixed; background-image:url(image_name.gif); background-position:left; background-repeat:no-repeat;" ), während dass bei den ersten (oberen) Grafken teilweise noch fuktionierte wars dann aber auch damit schnell aus.
Wär ganz hilfreich wenn mir jemand noch das eine odere Stichwort geben könnte. http://www.blogging-online.com/index14.html

PS: Der W3C Validator findet nun noch ganze zwei Fehler, immerhin etwas ;)

[Detlef G.]

Hallo StupidBoy,

Hab mal angefangen aber wie erwartet ist das ganze ziemlich pronlematisch.
Mir hats das gesamte Layout zerissen und während im IE wenigstens noch alle Grafiken zu sehen sind, siehts im FF noch schlechter aus.

Zähle mal deine Tebellenzellen, kontrolliere die Werte bei rowspan und
colspan, setze zum Test einmal border="1" und schau dir das dann an.

Auf Wiederlesen
Detlef

[StupidBoy]

Zähle mal deine Tebellenzellen, kontrolliere die Werte bei rowspan und
colspan, setze zum Test einmal border="1" und schau dir das dann an.

Hi,

Spalten habe ich 4, Zeilen allerdings für jede einzelne Grafik eine.

Habe probiert mit row- und colspan was zu dran zu drehen aber wirklich besser ist es nicht geworden.
Sieht nun wie folgt aus: http://www.blogging-online.com/index16.html
Ich bekomme weder die einzelne Grafiken zusammen, noch kriege ich die Grafiken die nicht auf der richtigen Seite sind dahin wo sie hin sollen. Ganz zu schweigen von der Darstellung im Firefox.

PS: Verscuhe gerade noch mehrere Grafiken in eine Zeile zu bekommen.

Grüße

[StupidBoy]

Tschuldige, sind 5 Spalten, hatte ine übersehen.

MfG

[Detlef G.]

Hallo StupidBoy

Tschuldige, sind 5 Spalten, hatte ine übersehen.

Nein, deine Tabelle ist Chaos.
Ich werde mir nicht die Mühe machen, nachzuzählen, wo du genau die Fehler
gemacht hast, ich kann mich nur wiederholen:

Zähle mal deine Tebellenzellen, kontrolliere die Werte bei rowspan und
colspan, setze zum Test einmal border="1" und schau dir das dann an.

Von deiner Seite:

background-attachment:fixed; background-image:url(right.jpg); background-position:left; background-repeat:no-repeat;

Das geht wesentlich kürzer:

background:url(right.jpg) no-repeat fixed left;

Das bedeutet die Grafik "right.jpg" soll, ohne gekachelt zu werden (no-repeat),
ganz links in der Mitte (left) als Hintergrund angezeigt werden.

fixed sagt, sie soll nicht mitscrollen und ihre Position soll sich aufs
Browserfensters beziehen.
Soll sie das wirklich?
Ich dachte, sie soll mit der Tabellenzelle mitscrollen.

Auf Wiederlesen
Detlef

[StupidBoy]

Ok danke soweit, habe eben erst <a href="http://forum.de.selfhtml.org/my/?t=119272&m=765633">diesen Post</a> gelesen da ich ihn davor übersehen hatte.
Werde nun erstmal versuchen da durchzusteigen und mich ggf. wieder mit einer Frage an euch wenden.

Vielen dank für die Hilfe, auch nach den anfänglichen Shcwierigkeiten *hüstel*.

Grüße

[Thomas J.S.]

Hallo,

Habe probiert mit row- und colspan was zu dran zu drehen aber wirklich besser ist es nicht geworden.

ist auch nicht notwendig.

Sieht nun wie folgt aus: http://www.blogging-online.com/index16.html
Ich bekomme weder die einzelne Grafiken zusammen, noch kriege ich die Grafiken die nicht auf der richtigen Seite sind dahin wo sie hin sollen. Ganz zu schweigen von der Darstellung im Firefox.

Siehe https://forum.selfhtml.org/?t=119272&m=765633

Grüße
Thomas

[Thomas J.S.]

Hallo,

Hab mal angefangen aber wie erwartet ist das ganze ziemlich pronlematisch.
Mir hats das gesamte Layout zerissen und während im IE wenigstens noch alle Grafiken zu sehen sind, siehts im FF noch schlechter aus.
Habe dann noch etwas mit dem rumprobiert was harry mir weite roben vorgeschlagen hatte ( style="background-attachment:fixed; background-image:url(image_name.gif); background-position:left; background-repeat:no-repeat;" ), während dass bei den ersten (oberen) Grafken teilweise noch fuktionierte wars dann aber auch damit schnell aus.
Wär ganz hilfreich wenn mir jemand noch das eine odere Stichwort geben könnte. http://www.blogging-online.com/index14.html

Ich habe das jetzt doch gemacht, deine Seite etwas umgestellt (basierend auf deinen früheren index4.html):

http://www.meta-text.net/test/index4a.html

wenn du http://www.meta-text.net/test/index4b.html dir anschaust, wird auch klar, warum die zwei Bilder in der Mitte falsch positioniert sind. Nämlich die Spalte die da nur 1px sein sollte ist breiter.

Wenn man jetzt noch in der Tabelle die Spalten vordefiniert:
<colgroup>
 <col width="246">
 <col width="265">
 <col width="292">
 <col width="1">
 <col width="176">
 <col width="1">
</colgroup>
und backgrund durch entsprechende style="background-image ..."

bekommt man als Ergbnis: http://www.meta-text.net/test/index4c.html.

Und da meckert auch kein Validator mehr :)
http://validator.de.selfhtml.org/get/http://www.meta-text.net/test/index4c.html

Grüße
Thomas

[Ashura]

Hallo Thomas.

bekommt man als Ergbnis: http://www.meta-text.net/test/index4c.html.

Und da meckert auch kein Validator mehr :)
http://validator.de.selfhtml.org/get/http://www.meta-text.net/test/index4c.html

Dafür ist der gesamte Aufbau strukturell unbrauchbar.

Einen schönen Samstag noch.

Gruß, Ashura