Div Seitengröße Background

S

stahl

Grünschnabel
Ich bastel gerade an meiner Seite und möchte.

3 Divs nebeneinander. In dem Div in der mitte möchte ich andere Bilder darüber Positionieren (daher Festes Bild mit fester Größe).

Die Divs rechts und links sollen von der Kante des Mittel divs so breit sein wie der Rest des Bildschirmes. (Die 3 Divs ergeben danach ein Hindergrundbild, In der mitte ein festes, und aussen werden die Bilder per repeat aufgefüllt) sein.

Ist das nur mit Css möglich und wenn ja welche Größe muss ich den rechten und linken Div geben das diese den Bildschirm füllen.

danke schon mal

Micha
 
Zuletzt bearbeitet:
stahl hat gesagt.:
Die Divs rechts und links sollen von der Kante des Mittel divs so breit sein wie der Rest des Bildschirmes. (Die 3 Divs ergeben danach ein Hindergrundbild, In der mitte ein festes, und aussen werden die Bilder per repeat aufgefüllt) sein.

Ist das nur mit Css möglich und wenn ja welche Größe muss ich den rechten und linken Div geben das diese den Bildschirm füllen.
Zum Vergrößern anklicken....
Mission Impossible ;-)
 
dreifragezeichen hat gesagt.:
Mission Impossible ;-)
Zum Vergrößern anklicken....

Um bei den Filmtiteln zu bleiben:
Never say never.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<style type="text/css">
			body{
				overflow-x: hidden;
			}
			#links, #mitte, #rechts{
				top: 0px;
				position: absolute;
				height: 100%;
			}
			
			#mitte{
				background: red;
				width: 400px;
				margin-left: -200px;
				left: 50%;
				
			}
			#links{
				right: 50%;
				margin-right: 200px;
				background: url(http://www.google.at/images/logos/ps_logo2.png);
				width: 50%;
				background-repeat: repeat-y;
				background-position: right;
			}
			#rechts{
				left: 50%;
				margin-left: 200px;
				width: 50%;
				background: url(http://www.google.at/images/logos/ps_logo2.png);
				background-position: left;
				background-repeat: repeat-y;
			}
		</style>
	</head>
	<body>
		<div id="links">
		links
		</div>
		<div id="mitte">
			mitte
		</div>
		<div id="rechts">
		rechts
		</div>
	</body>
</html>

wobei #links und #rechts nicht nur bis zum "Rand" gehen sonder darüber hinaus (aber das ist egal).

Die einfachere, schönere und warscheinlich auch auf allen Browsern funktionierende, Lösung wäre einfach nur die Mitte als div zu machen.
Wenn diese Zentriert positioniert wird und angenommen 200px breit ist gibst du dem Body ein background mit repeat-y und background-position: center;
Dann gestaltest du deinen Hintergrund so dass er in der mitte einfach 200px weiß (oder was auch immer) ist und links und rechts entsprechend das gewünschte Bild.

Gruß
 
@franz007: Dein Code erfüllt aber nicht diese (fettmarkierte) Vorgabe:

stahl hat gesagt.:
Die Divs rechts und links sollen von der Kante des Mittel divs so breit sein wie der Rest des Bildschirmes.
Zum Vergrößern anklicken....

Insbesondere interessant, wenn alle drei "Bildsequenzen" nahtlos aneinanderpassen und den horizontalen Viewport vollständig ausfüllen, ihn aber nicht überschreiten sollen, wie es mit deinem Code offensichtlich am linken Element zu erkennen ist, dessen Inhalt ("links") aus dem Sichtbereich verschwunden ist - eine Konsequenz deiner jeweiligen width- u. margin-Regeln.

franz007 hat gesagt.:
wobei #links und #rechts nicht nur bis zum "Rand" gehen sonder darüber hinaus (aber das ist egal).
Zum Vergrößern anklicken....
Wie kommst du zu der Schlußfolgerung, dies sei egal? Wegen deiner gesetzten overflow-x:hidden-Regel, die dies unterschlägt?

Was, wenn der horizontale Scrollbalken im Browser nicht unterdrückt werden soll, damit der Seitenbesucher ihn bei kleinerem Anzeigebereich zur Verfügung hat und ihn frei nutzen kann?

Es bleibt somit bei meiner nicht unbegründeten Aussage - unbefriedigende Tricks bzw. Schummeleien wie dein Vorschlag außen vor gelassen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück