|
|||
2 Backgrounds auf einer Seite
Hallo!
Ich muss 2 Background-Bilder in eine Seite einbinden. Beide Dateien sollen sich in der Höhe über den ganzen Browser strecken auch wenn ich diesen in der Höhe dehne. Folgendes habe ich zur Zeit als CSS: Code:
html, body { margin: 0; padding: 0; background: url(../img/bg_contentleft.gif) repeat-y left; height: 100%; } Code:
#doc { background: url(../img/bg_contentright.gif) repeat-y right; height: 100%; } Das Gerüst für die 3 Spalten sieht grob so aus: Code:
<div id="docContent"> <div id="columnLeft"> <div class="columnIn">Lorem ipsum...</div> </div> <div id="columnRight"> <div class="columnIn">Lorem ipsum...</div> </div> <div id="columnMiddle"> <div class="columnIn">Lorem ipsum...</div> </div> </div> Code:
#docContent { } #columnLeft { width: 225px; position: absolute; left: 10px; } #columnLeft .columnIn { padding: 0 10px 0 0; } #columnMiddle { margin: 0 235px; } #columnMiddle .columnIn { padding: 0 10px; } #columnRight { width: 225px; position: absolute; right: 10px; } #columnRight .columnIn { padding: 0 0 0 10px; } Was jetzt in Firefox 1.04 und Opera 7.5 passiert ist (vielleicht auch noch wo anders), dass 'bg_contentright.gif' nur bis zum Ende des Browserfensters gestreckt wird, was auf den ersten Blick gewünscht wird, doch falls man horizontale Scrollbalken hat und nach unten scrollt hört der Hintergrund auf. Er erstreckt sich also nur auf den ersten Blick auf 100%. Im Anhang ein Bild, dass das etwas näher veranschaulicht. Gibt es denn eine Möglichkeit im body- und html-Tag background-Bilder einzubinden? Hatte bei mir in einigen Browsern nicht geklappt. |
Sponsored Links |
|
||||
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
Sponsored Links |
|
|||
Re: 2 Backgrounds auf einer Seite
Zitat:
Zitat:
Bezgl. scrollen musst Du das Background-attachment definieren. Zitat:
Im übrigen sieht Deine Skizze aus, als ob entweder overflow mit visible definiert ist, oder ein flaot (was Du ja nicht nutzt, oder?) nicht gecleart wurde. Sonst würden die äusseren Boxen nicht überstehen. |
|
|||
Danke schon mal für die schnellen Antworten, hätte damit nicht so schnell gerechnet
Nun zum Thema: Bevor ihr mich missversteht, hier der Link zur Site: http://punkt.de/ Diese ist noch nicht ganz zu 100% CSS-optimiert; es gibt da noch kleine Opera-Probs. Die Site wird durch das CMS TYPO3 erschaffen, also bitte nicht ausrasten wenn irgendwas nicht ganz syntaktisch korrekt ist - ich gebe mein bestes Die Idee mit background-attachment hatte ich auch schon, jedoch kein Glück. Falls ihr Firefox oder Mozilla einsetzt und die Web developer Erweiterung installiert habt, könnt ihr sehr genau sehen, was eigentlich passiert (Funktion: Block Level Elemente hervorheben). |
|
||||
bei der Klasse, mit content_right oder wie das war, sprich mit dem Bild, das sich nciht korrekt wiederholt:
1. aus height:100% wird min-height:100%; 2. per * html klasse{height:100%} min-height für den IE nachahmen.
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
|
|||
@The Doc:
Die Idee mit min-height: 100% funktioniert nur solange, wie mein linker oder rechter Container, die absolut positioniert sind, nicht höher sind als die mittlere Spalte. Werde es mal ohne absolute Container versuchen, sprich mit float etc. Hatte das zwar schon bis zum Exzess versucht, doch nicht die optimale Variante bis jetzt gefunden. |
|
||||
Hmm, das Problem liegt dadrin, dass das ganze auch in der Breite variabel sein soll, deshalb musst du es so machen:
Code:
/* angenommen die Spalten links und Rechts sind 30% breit */ #links,#rechts { width:30%; } html,body { min-width:100%;min-height:100%; } html{ background:url("links.gif") repeat-y 30%; } body { background:url("rechts.gif") repeat-y 70%; }
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
|
|||
In der Breite variabel ist nur die mittlere Spalte.
Brauchst dich (The Doc) aber nicht mehr weiter abrackern. Nehme jetzt die float-Variante, damit kann ich auch den Footer über die ganze Breite ausdehnen ohne, dass dieser durch die absolut positionierten Container evtl. überdeckt wird. Trotzdem Danke für eure Hilfe |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Seite in Seite | B3ndech0 | Javascript & Ajax | 12 | 06.01.2010 14:42 |
Wordpress Seite Passwort-Schützen? | sepp88 | Serveradministration und serverseitige Scripte | 5 | 01.11.2009 13:56 |
Seite wird auf anderem Computer falsch dargestellt | Patrick Egli | CSS | 3 | 01.11.2009 11:40 |
Shtml auf jeder Seite einbinden - counter | iVx | Serveradministration und serverseitige Scripte | 1 | 13.09.2007 18:31 |
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite | Chico_wau | CSS | 2 | 14.05.2007 19:08 |