zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 Backgrounds auf einer Seite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.06.2005, 15:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2005
Beiträge: 35
malcomx befindet sich auf einem aufstrebenden Ast
Standard 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%; }
und
Code:
#doc { background: url(../img/bg_contentright.gif) repeat-y right; height: 100%; }
Der ID-Selektor '#doc' ist im HTML direkt unter <body>.

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>
Die Selektoren dazu:
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; }
Zur Info: Die Seite hat u.a. 3 Spalten (die mittlere ist flexibel in der Breite), die linke und rechte Spalte (fixe Breiten) sind absolut positioniert (left und right). Die mittlere hat keine fixe Positionierung. Das HTML-Gerüst muss so bleiben, denn nur so habe ich ein flexibles Layout mit 3 Spalten, dass meiner Meinung nach das beste zur Zeit zu emfhelende Modell ist das ohne irgendwelche Hacks in allen erdenklichen Systemkonstellationen ordentlich funktioniert.

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.
Angehängte Grafiken
Dateityp: gif 3colsprob.gif (4,9 KB, 301x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.06.2005, 15:22
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

http://www.css4you.de/background-attachment.html

Das dürfte helfen.
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.06.2005, 15:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard Re: 2 Backgrounds auf einer Seite

Zitat:
Zitat von malcomx
Zur Info: Die Seite hat u.a. 3 Spalten (die mittlere ist flexibel in der Breite), die linke und rechte Spalte (fixe Breiten) sind absolut positioniert (left und right). Die mittlere hat keine fixe Positionierung. Das HTML-Gerüst muss so bleiben, denn nur so habe ich ein flexibles Layout mit 3 Spalten, dass meiner Meinung nach das beste zur Zeit zu emfhelende Modell ist das ohne irgendwelche Hacks in allen erdenklichen Systemkonstellationen ordentlich funktioniert.
das ginge auch mit float zu lösen. Das halte ich für noch flexibler als absolute Positionierung.

Zitat:
Zitat von malcomx
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%.
wenn Du den Hintergrund nicht "kachelst" (also in x und/oder y Richtung wiederholst) ist das Hintergrundbild nicht größer als es ist. Skalierbar ist ein Hintergrundbild nicht. Wenn das Element, das den Hintergrund beinhaltet, kleiner ist als der Hintergrund, ist das Bild natürlich abgeschnitten.

Bezgl. scrollen musst Du das Background-attachment definieren.

Zitat:
Zitat von malcomx
Gibt es denn eine Möglichkeit im body- und html-Tag background-Bilder einzubinden? Hatte bei mir in einigen Browsern nicht geklappt.
na klar. Du kannst dem Body ein Hintergrundbild zuweisen.

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.06.2005, 09:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2005
Beiträge: 35
malcomx befindet sich auf einem aufstrebenden Ast
Standard

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).
Mit Zitat antworten
  #5 (permalink)  
Alt 16.06.2005, 16:16
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 20.06.2005, 11:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2005
Beiträge: 35
malcomx befindet sich auf einem aufstrebenden Ast
Standard

@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.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.06.2005, 12:07
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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%; 
}
Eventuell kann man das so lösen.
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
  #8 (permalink)  
Alt 20.06.2005, 20:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2005
Beiträge: 35
malcomx befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:33 Uhr.