Streifen mit 100% höhe

[Peter Pensionist]

Hi!

Ich habe auf einer HTML Seite einen "schmalen" (WIDTH: 5px;) DIV Container mit einer Höhe von 100% (HEIGHT: 100%;) gefüllt mit einer Farbe.
Die 100% beziehen sich auf leider auf den sichtbaren Bereich des Browsers, sobald ich also herunter "scrolle" ist im vorher nicht sichbaren Bereich kein Streifen mehr.
Wie kann ich es erreichen das sich dieser Streifen über die komplette Höhe der Seite erstreckt.

Danke

[Ashura]

Hallo Peter.

Wie kann ich es erreichen das sich dieser Streifen über die komplette Höhe der Seite erstreckt.

Erzeuge eine äquivaltente Grafik und setze diese per http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background@title=background-Eigenschaft und hier explizit http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat@title=background-repeat:repeat-y.

Einen schönen Freitag noch.

Gruß, Ashura

[Perter P.]

Hi, danke

Erzeuge eine äquivaltente Grafik und setze diese per http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background@title=background-Eigenschaft und hier explizit http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat@title=background-repeat:repeat-y.

Das habe ich getan:
background-image:url(../img/stripe.gif);
background-repeat:repeat-y;
Leider ist der Effekt der gleiche, sobald ich scrolle, ist dort kein "Streifen" mehr.
Mein Fehler ist doch sicherlich "Height: 100%;" das bezieht sich offebar nur auf den "initial" sichtbaren bereich des Browsers.

Peter

PS:
#Stripe
{
    BORDER-RIGHT: 1px;
    BORDER-TOP: 1px;
    Z-INDEX: 5;
    LEFT: 5px;
    BORDER-LEFT: 1px;
    WIDTH: 5px;
    BORDER-BOTTOM: 1px;
    POSITION: absolute;
    TOP: 0px;
    HEIGHT: 100%;
    background-image:url(../img/stripe.gif);
    background-repeat:repeat-y;
}

[Ulrich]

Hi

Dein Problem ließe sich mBMn lösen, wenn Du dieses Div als Bereich _fixierst_. Wenn es 100% Hoch ist, dann scrollt es aber mit, wenn der Inhalt entsprechend höher ist. Wenn Du ihn aber fixierst, bleibt er trotz scrollen des Inhalts mit 100% Höhe im viewport (kann man das eigentlich mit Sehhafen übersetzen?).
Nur in Opera wird das nicht funktionieren, wenn der User das Browserfenster in der Größe ändert. Man könnte dem mit JS entgegenwirken, [onresize (mach das weg) ] aber da frage besser jemanden, der sich mit JS auskennt. Für meinen Teil bin ich mir sicher das OperaBenutzer [OB - in der Regel sind wir voll!] das schon zu Genüge kennen und damit umgehen können. Auch ohne fremde Hilfe.

DAU's benutzen den Opera sowieso eher weniger vermute ich!

Selbst für den IE lassen sich mit hängen und around-würgen solche Dinge bewerkstelligen.

Ich empfehle zur Lektüre in selfhtml alles zu "fixe Bereiche" und "Browserweichen" zu inhalieren was dir bei entsprechender Recherche in den Sehhafen einläuft!

Maritime Grüße und gutes Gelingen
Ulrich

P.S.
Ansonsten fiele mir nur noch eine Tabelle ein, aber das will bestimmt niemand wissen ;)

[Peter.P.]

Hey, danke!

Eine ähnliche Idee hatte ich auch: background-attachment:fixed;, was aber natürlich nicht zum Ziel führte.
Dein Vorschlag wurde umgesetzt und läuft, danke euch beiden

Peter

[Ulrich]

Hey, danke!

Eine ähnliche Idee hatte ich auch: background-attachment:fixed;, was aber natürlich nicht zum Ziel führte.
Dein Vorschlag wurde umgesetzt und läuft, danke euch beiden

Peter

Hey, wenn dem so ist, habe ich heute meinen ersten hilfreichen Tipp gegeben.
Ich habe hier soviel an know-how "abgesaugt" daß ich mich sehr freue, wenn ich Dir einen hilfreichen Tipp geben konnte.

Es war mir eine Freude!
Ulrich

[Gunnar Bittersmann]

Hello out there!

Dein Problem ließe sich mBMn lösen, wenn Du dieses Div als Bereich _fixierst_.

Sein Problem ließe sich lösen, wenn er dieses div rausschmeißt und den den Hintergrund wie gewünscht gestaltet.

Deine „Lösung“ kann wegen ihrer Kompliziertheit kaum als solche bezeichnet werden.

Ich empfehle zur Lektüre in selfhtml alles zu "fixe Bereiche" und "Browserweichen" zu inhalieren was dir bei entsprechender Recherche in den Sehhafen einläuft!

Weder das eine noch das andere ist hier erforderlich, um so’n lumpigen Streifen als Hintergrundbild hinzubekommen.

See ya up the road,
Gunnar

[Ulrich]

Hi Gunnar,

wenn ich Dich richtig verstehe einfach dem body als background-image
repeat-y fixed verpassen?

gruß
Ulrich

[Gunnar Bittersmann]

Hello out there!

wenn ich Dich richtig verstehe einfach dem body als background-image
repeat-y fixed verpassen?

Du hast mich richtig verstanden. Und ich denke, Ashura meinte das auch so.

See ya up the road,
Gunnar

[Ulrich]

Hello out there!

Du hast mich richtig verstanden. Und ich denke, Ashura meinte das auch so.

Ok, würde das aber auch funktionieren, wenn der body bereits vergeben wäre? Wenn man sich z.B. wahsagas Seite anschaut. Da liegt im body schon die Automatik (45er tippe ich). Wenn man dort etwas in einer "höheren" Ebene anordnen will, mit einem 100% hohen Streifen, was dann?
Thoretisch könnte man das in die "body" Grafik einfügen. So wie er es dort mit dem schwarzen gedotteten Rand gemacht hat.
Nur wenn der Hintergund und der Bereich für den der Streifen gelten soll unabhängig von einander agieren, z.B. wenn er neben einem Nav-div floated. Was dann?

Wo auch immer
Ulrich

[Gunnar Bittersmann]

Hello out there!

Ok, würde das aber auch funktionieren, wenn der body bereits vergeben wäre?

Es gibt noch andere Elemente, denen man einen Hintergrund zuweisen kann: das Wurzelelement bietet sich an.

Unfähige Browser wie IEs versagen aber bei der Darstellung von Hintergrundbildern für html und body.

See ya up the road,
Gunnar

[MudGuard]

Hi,

Unfähige Browser wie IEs versagen aber bei der Darstellung von Hintergrundbildern für html und body.

Siehst Du im IE auf O o ostern ... auf beiden Seiten einen Verlauf oder nur auf einer?
Wenn nur auf einer: welcher? Und welche IE-Version?

cu,
Andreas

[Gunnar Bittersmann]

Hello out there!

Siehst Du im IE auf O o ostern ... auf beiden Seiten einen Verlauf oder nur auf einer?
Wenn nur auf einer: welcher? Und welche IE-Version?

IE 5.0: nur rechts, also den vom body.

See ya up the road,
Gunnar

[MudGuard]

Hi,

Siehst Du im IE auf O o ostern ... auf beiden Seiten einen Verlauf oder nur auf einer?
Wenn nur auf einer: welcher? Und welche IE-Version?
IE 5.0: nur rechts, also den vom body.

Du beziehst Dich also nur auf Versionen, die noch hoffnungsloser veraltet sind als die letzte offizielle Version?

cu,
Andreas

[Gunnar Bittersmann]

Hello out there!

Du beziehst Dich also nur auf Versionen, die noch hoffnungsloser veraltet sind als die letzte offizielle Version?

Hab grad keinen 6er hier. Sehe auch (noch) keinen Grund für einen IE-Upgrade.

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Du beziehst Dich also nur auf Versionen, die noch hoffnungsloser veraltet sind als die letzte offizielle Version?

Hab grad keinen 6er hier. Sehe auch (noch) keinen Grund für einen IE-Upgrade.

IE 5.5: tut nicht. (Siehe 5.0)
IE 6.0: tut. (Im Quirksmodus dagegen nicht.)

Einen schönen Samstag noch.

Gruß, Ashura

[MudGuard]

Hi,

IE 6.0: tut. (Im Quirksmodus dagegen nicht.)

Ist also nicht nur mein Exemplar, daß das kann.

cu,
Andreas

[Gunnar Bittersmann]

Hello out there!

Erzeuge eine äquivaltente Grafik und setze diese per http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background@title=background-Eigenschaft und hier explizit http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat@title=background-repeat:repeat-y.

Das habe ich getan:
background-image:url(../img/stripe.gif);
background-repeat:repeat-y;
Leider ist der Effekt der gleiche, sobald ich scrolle, ist dort kein "Streifen" mehr.

Muss man dir noch sagen, auf welches Element du das anwenden solltest? Oder kommst du self drauf?

Das div-Elements fliegt angesichts seiner Überflüssigkeit raus.

See ya up the road,
Gunnar