Hintergrund

[Elsa U.]

Guten Abend liebe SELFHTML-User!

Ich habe da ein kleines Problem.
Ich habe ein Layout kreiert und den Header mit Div-Ebenen fixiert.
Den Rest des Blogdesigns wiederholt sich ständig in die Richtung nach unten. Da ich nicht möchte, dass sich bei hohen Auflösungen nach einer Weile das Design anfängt zu wiederholen im rechten Bildrand, und ich meinen Usern längere Ladezeiten ersparen möchte indem ich den rechten, eintönigen Rand auf ein paar 1000px verlängern würde, suche ich nach einer Lösung.

Ich dachte mir, den Hintergrund auszuschneiden (1px x 660px) und diesen dann als Hintergrund bei der td-Funktion in einer Tabelle zu nehmen. So weit, so gut - Nur was für einen Befehl muss ich angeben, dass die Tabelle bis zum unteren Rand des Fenster gesrecht wird, und den Hintergrund darstellt? (Je nach Auflösung beträgt die erforderliche länge der Tabelle ja andere Zahlen).

Mein Code im Moment:

<div id="2" style="position:absolute; width:660; height:100%; top:144; left:-1">
<table cellspacing="0" cellpadding="3" border="0" width="100%">
<tr><td background="bg.gif"></td></tr></table></div>

Dankeschön und ein schönes Wochenende!
Elsa U.

[Cheatah]

Hi,

Da ich nicht möchte, dass sich bei hohen Auflösungen

Browserfensterinnengrößen. Die Auflösung hat in *keinem* Fall auch nur den geringsten Belang für Dich.

und ich meinen Usern längere Ladezeiten ersparen möchte indem ich den rechten, eintönigen Rand auf ein paar 1000px verlängern würde,

Hast Du mal probiert, um wie viel sich die Dateigröße erhöhen würde, von der Ressourcengröße ganz zu schweigen?

Ich dachte mir, den Hintergrund auszuschneiden (1px x 660px) und diesen dann als Hintergrund bei der td-Funktion in einer Tabelle zu nehmen.

Wie kann Dir bei Layout-Angelegenheiten HTML helfen? Das ist nur und ausschließlich Sache von CSS. HTML, insbesondere Tabellen, helfen Dir hier kein Stück.

So weit, so gut - Nur was für einen Befehl muss ich angeben,

Weder in HTML noch in CSS gibt es Befehle.

dass die Tabelle bis zum unteren Rand des Fenster gesrecht wird,

Dieses Problem existiert nicht, weil Dein Anliegen keine Änderung im HTML-Code bedingt.

Mein Code im Moment:
<div id="2" style="position:absolute; width:660; height:100%; top:144; left:-1">

Die ID sowohl drei der fünf CSS-Eigenschaftswerte sind ungültig.

<table cellspacing="0" cellpadding="3" border="0" width="100%">
<tr><td background="bg.gif"></td></tr></table></div>

Keines der Attribute hat etwas in HTML verloren. Alles (in Worten: *alles*), was Darstellung ist, ist CSS.

Cheatah

[Gunnar Bittersmann]

Hi,

Wie kann Dir bei Layout-Angelegenheiten HTML helfen? Das ist nur und ausschließlich Sache von CSS.

HTML Transitional sieht das anders. Weshalb man es auch nicht verwenden sollte.

HTML, insbesondere Tabellen, helfen Dir hier kein Stück.

Cyx23 sieht das anders. Weshalb man ihn auch nicht verwenden sollte.

<div id="2" style="position:absolute; width:660; height:100%; top:144; left:-1">

Die ID sowohl drei der fünf CSS-Eigenschaftswerte sind ungültig.

Was Cheatah damit meint, sagten Ashura und ich in https://forum.selfhtml.org/?t=112895&m=715413.

Live long and prosper,
Gunnar

[Marc Reichelt]

Hallo Gunnar,

HTML, insbesondere Tabellen, helfen Dir hier kein Stück.

Cyx23 sieht das anders. Weshalb man ihn auch nicht verwenden sollte.

Also _das_ erinnert mich irgendwie an die guten alten Adventuregames, wie z.B. Day of the Tentacle oder Sam & Max Hit the Road, die mit ScummVM übrigens sogar wunderbar auf Linux laufen... ;-)

Grüße

Marc *SCNR* Reichelt || http://www.marcreichelt.de/

[Ashura]

Hallo Marc.

HTML, insbesondere Tabellen, helfen Dir hier kein Stück.

Cyx23 sieht das anders. Weshalb man ihn auch nicht verwenden sollte.

Also _das_ erinnert mich irgendwie an die guten alten Adventuregames, wie z.B. Day of the Tentacle oder Sam & Max Hit the Road, die mit ScummVM übrigens sogar wunderbar auf Linux laufen... ;-)

YMMD. :-)

Einen schönen Samstag noch.

Gruß, Ashura

[Hopsel]

Hi Ashura!

YMMD. :-)

Meinen auch. Ich nehm mir das als Anlass, mal wieder Monkey Island zu spielen.

MfG Hopsel

[Marc Reichelt]

Hallo Hopsel,

YMMD. :-)

Meinen auch. Ich nehm mir das als Anlass, mal wieder Monkey Island zu spielen.

Tja, dem Kommentar vom Gunnar zur Folge werde auch ich die von mir erwähnten Spiele mal wieder mit ScummVM starten und mal wieder ein bisschen Clicken & Pointen... *g*

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Elsa U.]

Guten Abend noch einmal!

Danke für die Hilfe. Ich habe das Ganze nun in CSS umgetippt und bei margin-top sowie margin-left "0px" angegeben. Doch wie mache ich es nun, dass der Hintergrund bis auf den unteren Rand des Browserinnenfensters angezeigt wird?

Vielen Dank und einen charmanten Abend,
Elsa U.

[Der Martin...]

Hallo Elsa,

bisher bist du mir noch nicht als Forumsteilnehmerin aufgefallen; ich vermute daher, dass du relativ neu in dieser Runde bist.

Danke für die Hilfe.

Und du scheinst ein Ausnahmefall zu sein. Respekt!
Es ist wirklich eine Seltenheit, dass ein Neuling Cheatahs präzisen, knappen, aber dadurch manchmal schroffen Antwortstil positiv aufnimmt. Die meisten reagieren am Anfang beleidigt, eingeschüchtert, oder auch nur verunsichert. Diesen Eindruck habe ich bei dir nicht, und deswegen - wie gesagt - Hut ab!

Doch wie mache ich es nun, dass der Hintergrund bis auf den unteren Rand des Browserinnenfensters angezeigt wird?

Die CSS-Eigenschaft background-repeat wird dir wahrscheinlich noch ein Stück weiterhelfen. Ach so, bevor du danach fragst: Nein, das Hintergrundbild lässt sich leider (zur Zeit noch) nicht auf ein bestimmtes Maß strecken oder stauchen, sondern nur kacheln.

Schönes Wochenende noch,

Martin

[Elsa U.]

Hallo Martin,

Ja - Ich bin "recht".. eh.. ganz neu hier ;-)

Danke für deinen Tipp, nur scheine ich ihn falsch anzuwenden?

Weder:

div#home_background {
    float: left; width: 660px;
    margin-top: 0px; padding: 0;
    margin-left: 0px; padding: 0;
    background: #F5F7F9 url(hg.jpg)
    background-repeat: repeat;
    border: 0px;
  }

noch:

div#home_background {
    float: left; width: 660px;
    margin-top: 0px; padding: 0;
    margin-left: 0px; padding: 0;
    background: #F5F7F9 url(hg.jpg);
    background-repeat: repeat;
    border: 0px;
  }

funktioniert.

Ich hoffe du kannst mir noch einmal helfen, bitte!
Dankeschön!

Elsa U.

[Marc Reichelt]

Hallo Elsa,

habe deinen Code mal ein wenig verbessert und strukturiert:

  
div#home_background {  
  float: left;  
  width: 660px;  
  margin-top: 0;  
  margin-left: 0;  
  padding: 0;  
  background: #F5F7F9 url(hg.jpg);  
  background-repeat: repeat;  
  border: 0;  
}  

Was meinst du mit "funktioniert nicht"?

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Elsa U.]

Vielen lieben Dank für die Korrektur!
Macht es eigentlich einen Unterschied ob man alles in eine Zeile schreibt oder immer eine neue anfängt (außer der Übersichtlichkeit)?

Nun ja, der Hintergrund wiederholt sich leider nicht bis "unten", es ist lediglich eine kleine Spalte vom Hintergrund zu sehen :-(

Grüße,
Elsa U.

[Detlef G.]

Hallo Elsa

Nun ja, der Hintergrund wiederholt sich leider nicht bis "unten", es ist lediglich eine kleine Spalte vom Hintergrund zu sehen :-(

Dann wird div#home_background wohl nicht größer sein.

Was befindet sich in div#home_background?
Wie sind die darin befindlichen Elemente positioniert?

Am besten wäre, wenn du einen Link zu der Seite angibst, damit dein Problem
im Zusammenhang gesehen werden kann.
Viele Tipps bzw. Lösungsmöglichkeiten sind oft vom Rest der Seite abhängig.

Auf Wiederlesen
Detlef

[Elsa U.]

Hallo nochmal zur frühen Stunde!

Ich dachte das man auch so den Hintergrund bis nach 'unten' laufen lassen könnte, ohne das Ganze mit Text zu füllen - Sorry!

Einen schönen SOnntag & Gute Nacht,
Elsa U.

[Der Martin...]

Hallo,

Macht es eigentlich einen Unterschied ob man alles in eine Zeile schreibt oder immer eine neue anfängt (außer der Übersichtlichkeit)?

Nein. Im CSS ist es wirklich egal, solange du selbst den Überblick hast.

Nun ja, der Hintergrund wiederholt sich leider nicht bis "unten", es ist lediglich eine kleine Spalte vom Hintergrund zu sehen :-(

Mit dem CSS-Code aus dem Vorposting sollte sich das Hintergrundbild aber über das gesamte DIV erstrecken. Deine Beobachtung lässt mich eher vermuten, dass das DIV selbst nur sehr niedrig ist. Wie groß das DIV wirklich ist, siehst du recht gut, wenn du ihm probehalber mal ein border gibst. Ich habe übrigens keine Höhenangabe in deinem CSS gesehen, und deshalb dürfte das DIV gerade so hoch sein wie sein Inhalt. Wenn es leer ist, also nur ein schmaler Streifen.

Sorge für entsprechend viel Inhalt oder gib dem Element eine Höhe, dann sollte es in deinem Sinne funktionieren.

So long,

Martin