Zerrissene Grafik. Nur bei großem Inhalt.In jedem Browser anders

[arno]

schönen guten tag !

ich habe bei meiner internetseite ein grundlegendes problem. ich habe bereits viel ausprobiert, komme aber einfach nicht weiter. ich denke jemand mit mehr html und css erfahrung als ich könnte mir auf die schnelle weiterhelfen.

das problem das ich habe ist folgendes: am unteren ende meiner webseite ist eine grafik, die immer am unteren ende des inhalts dargestellt werden soll. die grafik ist aber so aufgemacht, dass ein teil neben dem inhalt und ein teil unter dem inhalt dargestellt werden soll. eine korrekte darstellung kann man unter folgendem link sehen:

http://www.ratisbona-calling.de/index.php

der inhalt ist in einem, die grafik ist in zwei div containern untergebracht. der eine ist unterhalb des content containers und der andere relativ dazu darüber.
wenn nun aber mehr inhalt auf der seite dargestellt werden soll, wird die darstellung zerstört, und zwar in verschiedenen browsern auf unterschiedliche weise. im FF, unter Opera und bei Safari ist die grafik plötzlich zerteilt und der obere teil steht irgendwo rechts unterhalb des menüs an einer für mich nicht nachvollziehbaren position. im IE bleibt die grafik an ihrer stelle, dafür "bricht" der inhalt auf und verteilt sich bis nach rechts an den seitenrand. wenn ich auf dem ersten link mehr inhalt einfüge (durch einen weiteren newseintrag) passiert das gleiche. ein passender link hierzu:

http://www.ratisbona-calling.de/index.php?id=7

ich schätze ich habe einen simplen fehler gemacht, finde ihn aber leider nicht. ich bilde mir ein, als ich die webseite gebaut habe, war alles in ordnung, auch bei viel inhalt und ich kann mir nicht erklären, was ich dazwischen verändert habe um das zu zerstören. zum besseren nachvollziehen habe ich eine .rar datei gepackt, in der sich der basishtml aufbau, eine css datei und die beiden grafiken korrekt verlinkt befinden:

http://www.ratisbona-calling.de/hilfe.rar

tausend dank fürs helfen !!!

viele grüße

arno

[schwarze Piste]

Tachchen!

Die relevanten Grafiken sind aus meiner Sicht ganz klar Zier- und damit
Hintergrundgrafiken. Binde sie als solche in die bestehenden Elemente
deines HTML-Gerüstet ein.
Das erscheint mir unproblematisch solange man nicht den Seitenfuß an sich
in Frage stellt.

Gruß

Die schwarze Piste

[arno]

...verstehe das leider nicht. wenn ich es als hintergrundbild einbinde bleibt es ja am unteren ende des browserfensters stehen (ähnlich position:absolute unter css). ich möchte aber eine dynamische veränderung ermöglichen, dass die beiden grafiken immer am unteren ende (bzw. links unten im anschluss an die "footergrafik") des tatsächlichen contents abgebildet sind.

[Detlef G.]

Hallo arno

… wenn ich es als hintergrundbild einbinde bleibt es ja am unteren ende des browserfensters stehen

Nein, am unteren Ende des Elements dem du die Hintergrundgrafik zugewiesen hast.

… ich möchte aber eine dynamische veränderung ermöglichen, dass die beiden grafiken immer am unteren ende (bzw. links unten im anschluss an die "footergrafik") des tatsächlichen contents abgebildet sind.

Was hast du denn getan, damit es nicht so ist?
Wenn du es nicht durch entsprechen CSS-Angaben verhinderst, dann passt sich ein Element der Höhe der in ihm enthaltenen Elemente an.

Welche beiden Grafiken?
Zerschnipsele keine Grafiken, die in einem Stück angezeigt werden sollen!
(seltene Ausnahmen bestätigen die Regel)

Auf Wiederlesen
Detlef

[arno]

hallo !

also der grund, weshalb ich die grafik zerteilt habe ist folgender: wenn ich die grafik in einem stück unten an den content hänge (was selbstverständlich das einfachste und naheliegendste wäre) bekomme ich das problem, dass die grafik sich nicht im winkel um den content herum legt, sondern einfach unten angehängt wird wodurch ich immer einen leeren platz zwischen ende des contents und beginn der grafik habe. ich versuche das mal zu verdeutlichen:

contentcontentcontentcontent
        contentcontentcontentcontent
        contentcontentcontentcontent
grafik
grafik
grafik
grafikgrafikgrafikgrafikgrafikgrafik
grafikgrafikgrafikgrafikgrafikgrafik
grafikgrafikgrafikgrafikgrafikgrafik

statt

contentcontentcontentcontent
grafik  contentcontentcontentcontent
grafik  contentcontentcontentcontent
grafik
grafikgrafikgrafikgrafikgrafikgrafik
grafikgrafikgrafikgrafikgrafikgrafik
grafikgrafikgrafikgrafikgrafikgrafik

[arno]

ergänzend:

in meiner .rar datei lässt sich das was ich gemacht habe recht gut nachvollziehen.

[Detlef G.]

Hallo arno

also der grund, weshalb ich die grafik zerteilt habe ist folgender:

Deine Grafik hat überhaupt kein <img> zu sein. Sie ist Gestaltung, nicht Inhalt.

Baue die Seitenstruktur immer anhand des Inhalts passend auf. Erst dann füge mittels CSS das gewünschte Aussehen hinzu.

in meiner .rar datei lässt sich das was ich gemacht habe recht gut nachvollziehen.

Wozu sollte ich mir die .rar-Datei laden und auspacken, anhand des Onlinebeispiels sehe ich genug.

Beachte auch, was dir Beat geschrieben hat.

Auf Wiederlesen
Detlef

[arno]

hallo detlef.

vorneweg muss ich mal sagen: tausend dank für deine bereitschaft zur hilfe

also erstmal: wie kann ich das mit der validierung durchführen ? ich schätze, das was in meinem quelltext passiert ist, das ich selbst eine korrekte html-struktur baue und mir typo3 eine weitere generiert. wie kann ich das verhindern ?

und zu den grafiken: was für eine alternative habe ich zu dem img ?

dankeschön

[Detlef G.]

Hallo arno

also erstmal: wie kann ich das mit der validierung durchführen ?

z.B. The W3C Markup Validation Service oder SELFHTML-Validator

ich schätze, das was in meinem quelltext passiert ist, das ich selbst eine korrekte html-struktur baue und mir typo3 eine weitere generiert. wie kann ich das verhindern ?

Ich kenne Typo3 nicht.
Wenn du allerdings ein CMS verwendest, dann kannst du dort nicht einfach eine „korrekte html-struktur” einbauen, sondern musst die Besonderheiten des CMS berücksichtigen. Du musst also die Templates des Systems an deine Erfordernisse anpassen und/oder die durch das CMS generierten Seitenteile beachten, wenn du selbst Teile einfügst.

und zu den grafiken: was für eine alternative habe ich zu dem img ?

Wie bereits mehrfach geschrieben, sollten Grafiken, die nicht Inhalt sind sondern nur der Gestaltung dienen, als Hintergrundgrafiken definiert werden.

Suche mal in der site.css den Teil und füge ein:

/* ----------container zentriert das layout-------------- */  
  
#container {  
width: 950px;  
margin-bottom: 10px;  
margin:0 auto;  
/* Hintergrundbild einfügen und unten links positionieren */  
background:url(fileadmin/images/maingfx1.png) no-repeat left bottom;  
/* Platz für das Hintergrundbild schaffen */  
padding-bottom:235px;  
}  

Allerdings sollte es dann komplette Bild sein und nicht nur einer der beiden Schnipsel.

Auf Wiederlesen
Detlef

[arno]

hallo nochmal !

vielen dank für den ausführlichen - und sehr hilfreichen - beitrag ! unter opera und habe ich jetzt genau das was ich möchte !

leider ist es unter firefox und safari zu einem neuen - dem befürchteten - problem gekommen (http://www.ratisbona-calling.de/index.php?id=7). die hintergrundgrafik wird nicht an #content2 angehängt, sondern einfach ans untere ende des browserfensters gesetzt. dadurch kommt es zu überlappung.

im IE ist das problem dadurch erweitert, dass der inhalt von #content2 nicht im von mir definierten rahmen links vom menü bleibt sondern einfach ausbricht und sich bis zum rechten rand des browserfensters ausbreitet.

möglicherweise gibt es dazu auch einen hilfreichen rat ?

vielen vielen dank für die hilfe und die verschlankung und entwirrung meiner codes

viele grüße

arno

[arno]

hallo !

habe jetzt einen etwas uneleganten workaround gefunden, der aber seinen zweck erfüllt.

habe das hintergrundbild in einen footer container gepackt und mit folgenden angaben

position: relative;
height: 470px;
top: -250px;

dazu gebracht so auszusehen wie ich es möchte. per z-index habe ich dann die hierarchie sinnvoll angeordnet.
schätze diese lösung würde dem ein oder anderen zahnschmerzen bereiten, aber ich denke, es erfüllt seinen zweck. das logo rechts oben ist aber wie oben geraten eingebunden. danke nochmal

das einzige problem, das bestehen bleibt ist die sache mit dem nach rechts ausbrechenden text. interessanterweise kann ich das von der festplatte aus nicht replizieren. das problem taucht erst auf dem server auf.

viele grüße

arno

[Beat]

habe das hintergrundbild in einen footer container gepackt und mit folgenden angaben

position: relative;
height: 470px;
top: -250px;

dazu gebracht so auszusehen wie ich es möchte. per z-index habe ich dann die hierarchie sinnvoll angeordnet.
schätze diese lösung würde dem ein oder anderen zahnschmerzen bereiten, aber ich denke, es erfüllt seinen zweck. das logo rechts oben ist aber wie oben geraten eingebunden. danke nochmal

Alternativ: margins dürfen negative Werte annehmen.

mfg Beat

[arno]

das hatte ich zuerst probiert aber das hat nicht funktioniert :(, deshalb habe ich mich für die kompliziertere variante entschieden

[Detlef G.]

Hallo arno

leider ist es unter firefox und safari zu einem neuen - dem befürchteten - problem gekommen (http://www.ratisbona-calling.de/index.php?id=7). die hintergrundgrafik wird nicht an #content2 angehängt, sondern einfach ans untere ende des browserfensters gesetzt. dadurch kommt es zu überlappung.

Das ist sehr seltsam, genau die von mir gepostete CSS-Änderung hat bei mir im FF3 das gewünschte Ergebnis gebracht.

im IE ist das problem dadurch erweitert, dass der inhalt von #content2 nicht im von mir definierten rahmen links vom menü bleibt sondern einfach ausbricht und sich bis zum rechten rand des browserfensters ausbreitet.

Bitte bringe dein (X)HTML in Ordnung.
(Was eigentlich, HTML laut erster DTD oder XHTML laut zweiter DTD?)
Bei grob fehlerhaftem (X)HTML ist die genaue Darstellung durch die Browser eher Glückssache. Da lohnt es sich nicht, intensiver nach der Ursache von Darstellungsfehlern zu suchen.

Warum sind 4 CSS-Dateien eingebunden, wenn es zwei davon nicht gibt (404 Not Found), und außerdem noch einen CSS-Block und dann noch Inlinestyles?

Auf Wiederlesen
Detlef

[arno]

hallo !

danke für die hilfe. werde mich leider erst am WE darum kümmern können, aber erstatte dann bericht. sollten z.b. eigentlich tatsächlich nur zwei css dateien eingebunden sein.

mit der doppelten html sache...das ist ein typo problem. wenn ich allerdings die interpretation von html unter typo deaktiviere bricht mein layout komplett zusammen. werde das in meiner typo literatur nachlesen müssen und das schaffe ich vor dem WE einfach nicht.

habe deinen codingvorschlag - der mir auch mehr als logisch erscheint - ebenfalls unter ff3 getestet...eben mit dem nicht gewünschten ergebnis

danke schonmal und schöne tage bis dahin.

arno

[Detlef G.]

Hallo arno

das problem das ich habe ist folgendes: am unteren ende meiner webseite ist eine grafik, die immer am unteren ende des inhalts dargestellt werden soll. die grafik ist aber so aufgemacht, dass ein teil neben dem inhalt und ein teil unter dem inhalt dargestellt werden soll. eine korrekte darstellung kann man unter folgendem link sehen:

Diese Grafik ist wohl kein Seiteninhalt, sie dient lediglich dem Design. Dann sollte sie auch nicht als <img> sondern als Hintergrundbild eingebunden sein.
Du könntest sie #container als unten positioniertes Hintergrundbild zuweisen und dazu noch einen passenden padding-bottom.

Auf Wiederlesen
Detlef

[Beat]

Validieren hilft eventuell.

Du hast zum Beispiel zwei DOCTYPE Declarationen, 2 Bodys etc... in deinem Document.

mfg Beat