Hintergrund nicht lang genug (Tabellenhöhe 100%)

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich habe ein kleines Problem… ich versuche mal, das Ganze hier einigermaßen verständlich zu erläutern.

Folgendes: Ich habe ein grafisches Design mit diversen Farbverläufen. Das Design soll horizontal zentriert werden, der Hintergrund ist allerdings nicht einheitlich (und zu allen Seiten hin verschieden).

Mein Versuch Nr. 1: Eine Tabellenkonstruktion

Ich hab also zunächst mal eine Tabelle mit drei Spalten gebastelt, die mittlere mit fixer Breite, die rechte und linke relativ, damit der jeweilige Hintergrund für eine Seite bis zum Bildschirmrand geht, aber die Mitte auch wirklich zentriert ist. Die mittlere Spalte, ebenfalls mit einem eigenen Hintergrund, enthielt dann das Design. Das klappte ganz wunderbar, bis mir dann auffiel, dass der Hintergrund nur so lang wie das Design selbst ist - sobald der längere Inhalt (in einem Div) darüber liegt, sieht man, dass die Tabelle nicht 100% hoch ist, sondern nur genau so hoch, wie das Design selbst. Nach dessen Höhe folgt also gähnende Leere.

Mein Versuch Nr. 2: Tabelle + Div

Also hab ich mir überlegt, ein wenig zu tricksen. Meine Überlegung: Immer noch eine Tabelle für die „Hintergrundteile“ zu benutzen, aber das Layout aus der mittleren Spalte rauszunehmen und mit einem Div, zentriert, darüber zu legen. Aber auch in dieser Version ist der Hintergrund nicht „lang“ genug, er bricht ab, bevor der Inhalt aufhört. Seltsamerweise aber später als vorher (war also vorher der Hintergrund exakt so lang wie das Design, ist er jetzt schon etwas länger, aber nicht lang genug). Wieso? Ich habe keine Ahnung.

Ich hab die Tabellen (in jeder Ebene) auf 100% Höhe stehen, ich hab auch schon versucht, den Body in der Höhe zu definieren, weil ich in einem anderen Forum gelesen hatte, dass die falsche Interpretation der Höhe auch daran liegen könnte… den Doctype will ich nicht löschen, der hat ja seine Berechtigung (war ein weiterer „Lösungsvorschlag“, aber der funktioniert sowieso nicht), und ich weiß langsam nicht mehr, was ich noch machen soll.

Es tut mir leid, wenn die Frage irgendwie doof ist… aber das ist so frustrierend, dass das jetzt schon wieder nicht geht, und mir gehen langsam die Ideen aus.

Würde mich wirklich sehr über eine Antwort freuen!

2

Hallo.

Ein Link zu einer Seite ist immer hilfreich.
Solange wir nicht wissen was du gemacht hast können wir dir auch keine Lösungsvorschläge anbieten.

Gruss
Elroy

3

Hallo also ohne Link ist schlecht und mit Tabelle anzufangen auch :O).

Versuch 2 habe ich gar nicht verstanden und 1 vielleicht ein bisschen :O)
Was Spricht gegen Body Hintergrung was sich Vertikal wiederholt und ein div hintergrund mit einem großen Bild was Zentriert ist und sich nicht wiederholt.

Ich habe z.b hier nur 1 großes Bild als Hintergrund: Seite mit großen BG

Cheffchen

4

Hallo :slight_smile:

Danke erst einmal für eure Antworten.

Ne, die Lösung und auch die mit dem großen Bild gehen beide nicht und das aus einem ganz einfachen Grund. Das Design hat zu jeder „Kante“ hin einen anderen Farbverlauf, also nicht mal eine einheitliche Hintergrundfarbe. Ich bin darauf angewiesen, dass, egal wie groß das Browserfenster auch sein mag, der Hintergrund nicht verrückt. Links vom Design muss ein bestimmter Hintergrund sein, rechts ein anderer, nach unten wiederum ein anderer. Das Problem bei diesen großen Hintergrundbildern ist, dass sie bei verschiedenen Bildschirmauflösungen verschieden aussehen. Ein einfaches Hintergrundbild, dass sich im Body vertikal wiederholt, geht also auch nicht, weil’s horizontal nicht flexibel ist.

Die Seite ist nicht online, sondern noch offline, und in diesem desolaten Zustand wird sie auch nie online gehen :wink: Ich werde aber gleich mal alles Wesentliche rauswerfen und eine neutrale Version meines Quelltextes hochladen, vielleicht hilft das weiter.

Ich kann mir allerdings nicht wirklich vorstellen, dass ich die erste Person auf dieser Welt bin, die ein solches Konstrukt benötigt… (btw, ich mag Tabellen :P)

Ich danke euch schon einmal für eure Antworten und schaue mal, was aus meinem Quelltext ihr für eine Fehleranalyse benötigt. Ich habe die leise Vermutung, dass das ganze Problem in den Grafiken selbst wurzelt, aber ich werd noch nicht so wirklich schlau draus.

Grüße

So, ich habe den Quelltext jetzt mal fertig gemacht (ich seh nur gerade, dass man hier keine html-Dateien hochladen darf, deswegen gibt’s den Quelltext nur als *.txt). Ich habe den Blindtext absichtlich etwas ausgereizt, damit man das Problem auch wirklich sehen kann. Ich hoffe, dass das so ok ist…?

An der Datei kann man jetzt allerdings auch gut sehen, dass es doch nicht an den Grafiken liegt, denn auch mit einfachen Hintergrundfarben ist die Tabelle einfach nicht lang genug… woran liegt das denn? Wahrscheinlich ist das irgendeine Kleinigkeit und ich sehe sie nur wieder nicht… :neutral:

5

Hallo,

hm, gute Frage.
Ich würde immer noch micht 1 bis 2 Hintergrundbilder Arbeiten.

  1. für Body 1800px breit 10px hoch, wo von der mitte aus 500 Links/Rechts grau und der rest neach links/recht den Verlauf. Das position center, vertikal wiederhollen. jetzt müsste der Verlauf rechts links passen, oder willst was anders
  2. Bild den oberen Bereich Inhalt in der mitte entweder 1000px breit und 800px hoch oder wie viel du möchtest oder auch 1800px breit und 800px hoch das es wieder über die ganze breite geht.

Wo Du hin möchtest ist mir noch nicht 100% klar aber schau mal hier, habe extra meins geändert, das nehme ich später wieder raus :O). Hintergrundbild mit Spalten Optik

Cheffchen

6

Den letzten Satz würde ich gerne unterstreichen :wink: Ich versteh deinen Lösungsvorschlag ehrlich gesagt nicht so richtig, aber wenn mir das helfen könnte, möchte ich es gerne verstehen :slight_smile:

Du meinst also, ich soll ein großes Hintergrundbild machen? Wie groß macht man das am schlausten, um jeder möglichen Auflösung (inkl. Leuten mit 2 Bildschirmen und mehr) gerecht zu werden? Und ist es möglich, ein so riesengroßes Hintergrundbild auch horizontal zu zentrieren? Das wüsste ich nämlich nicht (hätte ich noch nie was von gehört), aber sonst bringt mir das nichts…

Also wo ich hin möchte… ist eigentlich ganz einfach. Ich will, dass mein Design mittig ist, der Hintergrund links davon auch wirklich links davon anfängt, der Hintergrund rechts davon auch wirklich rechts anfängt und dass der Hintergrund nach unten, der also unter dem Design liegt, wirklich so lang ist wie die gesamte Seite. Ich dachte, das ginge mit Tabellen oder Divs, beides geht nicht und langsam nervt mich das ein wenig…

7

Hallo,

also denn must mir Zeigen der mit 2 und mehr Bildschirmen surft, als 1 Browser und 1 Hintergrundbild zu Zentrieren geht ja.

Und ist es möglich, ein so riesengroßes Hintergrundbild auch horizontal zu zentrieren? Das wüsste ich nämlich nicht (hätte ich noch nie was von gehört), aber sonst bringt mir das nichts
Was meinst damit?

Wie schon gesagt wenn mal um ein Festes Hintergrundbild mach ich das 1800px breit (nicht nur ich :O) ).
Selbst einer der ein 2meter Bildschirm hat hat ja dann eine Auflösung die halt passt und nicht 2milionen x 1.6milionen, dann braucht der eine Lupe :O).

Hier mal 3 Bilder womit ich das machen würde, aber wie gesagt 100% verstehe ich dein Design nicht ohne eine richtige Zeichnung.

1: Body Zentriert Vertikal wiederholen
2: Div Inhalt 1000px Breit im Body Zentriert, top keine wiederholung
3: ist das Ergebnis was raus kommt.

dass mein Design mittig ist, der Hintergrund links davon auch wirklich links davon anfängt, der Hintergrund rechts davon auch wirklich rechts anfängt und dass der Hintergrund nach unten, der also unter dem Design liegt, wirklich so lang ist wie die gesamte Seite

Ah: was ist bei dir „wirklich links davon anfängt“

oder

Jetzt habe ich das glaube geschnallt was du möchtest, ist doch easy wenn ich das richtig verstehe:
3div

links rechts jeweil 100%breit mit jeweils 1 Hintergrundbild Link ausgerichte und 1 rechts.
Inhalt ist 1000px breit und zentriert und da ist das Hintergrundbild halt 1000breit und wiederholt sich vertikal und vielleicht nich min-heigte.

Wenn das nicht passt keine Ahnung.

Cheffchen

8

Mir fallen ganz spontan drei Leute allein aus meinem Bekanntenkreis ein. Ehrlich :wink:

Das hab ich auch schon probiert. Kommt das gleiche bei raus wie bei meiner Tabelle, die sind nicht lang genug. Zumal ich im mittleren Div das Design nicht einbauen darf, sondern es darüberlegen muss aufgrund der Eigenart meines Grafikprogramms, um alles einen transparenten Rand zu legen, der mir dann eine 1px-breite Lücke beschert…

Ach keine Ahnung, mich frustriert das ungemein. Wieso denkt die Tabelle denn, dass die Seite zu Ende ist? Wieso orientiert sich die Seitenhöhe denn nicht an dem Div-Container mit dem Inhalt? Ich versteh das echt nicht.

Danke dir trotzdem für deine Mühe! Mal schauen, da muss ich wohl noch ein bisschen basteln.

Bamboo

So, eine Sache habe ich jetzt zumindest herausgefunden: Die 100% Höhe beziehen sich nur auf die Größe des Browserfensters, das der Benutzer sieht, wenn der Inhalt länger ist, hört ab dem Moment der Hintergrund auf. Das sieht man ganz besonders schön, wenn man das Fenster bei der geöffneten Seite skaliert, der Hintergrund hört dann immer an einer anderen Stelle auf.

Gibt es eine Möglichkeit, die 100% auf den Seiteninhalt zu beziehen? Den Body zu definieren reicht dafür nicht aus, das hab ich schon versucht…

So, ich hab’s gelöst.

Ich hab meine Tabelle für den Hintergrund gedoppelt, einmal in einem fixen Div (z-index 0), einmal in einem absoluten (z-index 1), das wegscrollt und die Hintergrundgrafiken leicht abgewandelt (halt je nach Position des Divs). Dafür hab ich den Doctype zunächst auf strict geändert (weil das mit der Positionierung des Divs bei transitional nicht funktioniert hat) und dann auf xhtml 1.0 transitional, um den Quellcode meines Grafikprogramms mit einbinden zu können (der html Doctype hat mir die Tabelle meines Grafikprogramms zerschossen, sah sehr unschön aus).

Das hört sich jetzt wahrscheinlich alles äußerst simpel an, hat mich aber bald verzweifeln lassen. Ich dachte mir aber, dass ich meinen Lösungsweg hier zumindest noch einmal kurz zusammenfasse, denn ich weiß ja, wie das ist, wenn man googelt und googelt und igendwann steht da zwar „gelöst“, aber nicht, wie :wink:

So long.