Problem mit Farbübergängen an den Seiten

P

pad8626

New member
Schaut mal auf diese Seite http://www.pad8626.de/test/index.php

Hier wird man das Problem sehen ich will sowohl links als auch rechts einen Farbübergang haben der ins schwarze oder je nach dem was ich mir dann für ne Farbe aussuche übergeht. Auf der linken Seite funktioniert das aber auf der rechten Seite nicht.

Ich hab jeweils ein Bild erstellt für links und für rechts dazu jeweils ein <div> mit der passenden ID. Die Bilder sollen jetzt als Hintergrund für das <div> dienen und sich flexibel nach links bzw. rechts ausbreiten je nach dem was man für eine Auflösung hat.

Also habe ich in der Mitte eine Box die ca. 760px groß ist und die beiden Boxen links und rechts sollen dynamisch ans browser fenster angepasst werden dabei sollen die bilder immer auf 100% der jeweiligen Boxen verkleinert werden. Ich hab die Bilder erst mal so groß gemacht wie wahrscheinlich kein bildschirm (normal ) sein wird. Die Bilder sind einfach nur linien die 750px breit und 1 px hoch sind. Diese beinhalten den Farbübergang.

Das linke Bild wird über den ganzen Bildschrim gezogen und hört nicht an den grenzen der mittigen Box auf das ist so das Problem was ich habe.

Wahrscheinlich ist es nur ne Kleinigkeit vielleicht kann mir einer helfen.

Das die css Datei
Code: 
*
{
 	padding:0px;
	margin:0px;
}

html
{
}

body
{
	text-align:center;
}

#links
{
	left:0px;
	background: url(images/verlauf_links.png) repeat;
}

#rechts
{
	right:0px;
	background:url(images/verlauf_rechts.png) repeat;
}

#container
{
	width:759px;
	margin: 0px auto 0px auto;
	background-color:#C0C0C0;
	height:800px;
}

#header
{
	background: #000000 url(images/banner_test_2.jpg);
	width:759px;
	height: 130px;
	position:fixed;
	margin:auto;
	float:left;					
}

center{}

footer{}

Den Code des php Dokuments kann man sich im Seitenquelltext angucken

MfG
 
Ich kann dein Problem anhand deiner Erklärung nicht wirklich nachvollziehen.
Ein Vorschlag ohne jetzt zu wissen ob dich das deinem Ziel näher bringt:
Gib mal #links und #rechts
Code: 
position: absolute;
 
sLost schrieb:
Ich kann dein Problem anhand deiner Erklärung nicht wirklich nachvollziehen.
Ein Vorschlag ohne jetzt zu wissen ob dich das deinem Ziel näher bringt:
Gib mal #links und #rechts
Code: 
position: absolute;
Zum Vergrößern anklicken....

Also das hat nicht funktioniert.

Das problem ist das das bild links nicht links bleibt sondern rechts weiter geht.
 
Ich frage mich, wieso das so kompliziert sein muss.
Lass die beiden div's links und rechts weg.
Dann mach Dir ein Bild, meinetwegen 1400px, so das in der Mitte die 760px in der "Hintergrundfarbe" sind und links und rechts der Verlauf.
Das dann nur noch in body rein mit center und gut...
 
eigentlich so kompliziert weil die seite links und rechts von der farbe ins schwarze übergehen soll. und wenn ich ein 1400er bild mache dann verschwinden die hellen farben unter dem center teil
 
Du solltest diesen Kompromiss allerdings eingehen und Deinen Verlauf eben etwas umstricken, denn das, was Du vorhast, funktioniert nicht.
Ein Background-Image passt sich nicht via 100% der Breite eines Elementes an.
 
dkdenz schrieb:
Du solltest diesen Kompromiss allerdings eingehen und Deinen Verlauf eben etwas umstricken, denn das, was Du vorhast, funktioniert nicht.
Ein Background-Image passt sich nicht via 100% der Breite eines Elementes an.
Zum Vergrößern anklicken....

Wenn es so nicht funktioniert kann es denn in einer anderen Weise funktionieren ??
 
Naja deine Lösung ergibt aber nicht das ergebnis was ich gerne hätte also wär es eine alternative zu dem was ich gerne hätte und meine frage war dann ob es genau so irgnedwie anders möglich wäre
 
Hallo,

das erste, was mir aufgefallen ist: dass du deine divs nicht richtig geschlossen hast... da fehlten Ende-divs. Wenn man das berichtigt, wird dein Hintergrund gar nicht mehr angezeigt...

ich würd es so machen:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">	<head>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<title></title>
	</head>

	<body>
		<div id="links" style="overflow: hidden;">
			<div id="rechts" style= overflow: hidden; text-align: center;">
			
		<div id="container" style="margin: 0px auto; overflow: hidden;">

			<div id="header"><img src="images/banner_test_2.jpg" width="760" height="130" alt="" border="0"></div>
			
			
			<div class="center"></div>			
			<div class="footer"></div>
		</div>	
		
		
			</div><!-- #rechts geschlossen -->
		</div><!-- #links geschlossen -->
	</body>
</html>
Code: 
* {
	padding:0px;
	margin:0px;
}



body {
	text-align:center;
}


#links {
	background: url(images/verlauf_links.png) top left repeat-y;
}



#rechts {
	background:url(images/verlauf_rechts.png) top right repeat-y;
}



#container {
	width:759px;
	margin: 0px auto;
	background-color:#C0C0C0;
	height:800px;
}



#header {
	width:759px;
	height: 130px;
	margin:auto;
	float:left;					
}
Die css-Angaben stehen teilweise in der HTML-Datei, musst du noch richtig in die css-Datei reinsortieren. So ein Bild im Header würde ich immer direkt in die Datei einfügen und nicht als Hintergrund.

[sorry, ich bin zu blöd um HTML einzufügen, ich weiß nicht, warum das wieder so doof angezeigt wird :rolleyes: ]

planet4.
 
Zuletzt bearbeitet:
pad8626 schrieb:
Naja deine Lösung ergibt aber nicht das ergebnis was ich gerne hätte also wär es eine alternative zu dem was ich gerne hätte und meine frage war dann ob es genau so irgnedwie anders möglich wäre
Zum Vergrößern anklicken....
Gibt's das Ganze auch nochmal so, das ich es verstehe?
Ich hatte geschrieben, das Du einen Kompromiss eingehen musst, denn ein Hintergrundbild passt sich nicht an die Breite oder Höhe eines Elementes an.
Ergo setzt Du Dich vor Dein Grafikprogramm und versuchst, einen Kompromiss herzustellen.
In meinem Beispiel hat das Hintergrundbild eine Breite von 1400 Pixeln.
Also teilst Du Dein Bild in drei Bereiche ein.
Teil 1 hat eine Breite von 320 Pixeln und da machst Du Dir einen Verlauf rein, so wie Du ihn Dir vorstellst.
Teil 2 hat eine Breite von 760 Pixeln und da machst Du die Hintergrundfarbe rein, die Du Dir vorstellst.
Teil 3 ist wiederrum 320 Pixel breit und da machst Du einen umgekehrten Verlauf zu Teil 1 rein.
Dann kannst Du das Ganze mit einer Breite von 1400px und einer Höhe von 1px abspeichern.
In den body Deiner CSS schreibst Du dann: background:url(pfadzumbild.gif) top center repeat-y;!
 
@planet4:
Der gepostete Code sagt mir, das pad8626 ein paar Grundkenntnisse fehlen...
(sorry @pad8626, nicht beleidigt sein, aber jeder hat mal angefangen)
 
Zuletzt bearbeitet:
dkdenz schrieb:
das Du einen Kompromiss eingehen musst, denn ein Hintergrundbild passt sich nicht an die Breite oder Höhe eines Elementes an.
Zum Vergrößern anklicken....
ja und nein: das Hintergrundbild passt sich nicht an, aber wenn ich 2 Container ineinander lege, der eine bekommt das linke Hintergundbild links positioniert, der andere das rechte Hintergrundbild rechts positioniert und beide Bilder sind groß genug(also breit, was ja kein Problem ist, es sind ja nur 1 oder ein paar Pixel hohe Grafiken), dann funktioniert es sehr gut, da sie sich ja in der Mitte (hinter dem Inhalts-Container) überschneiden können.
(man könnte sie natürlich auch noch breiter machen und ins Transparente übergehen lassen, dann scheint quasi das andere Bild hindurch)

planet4.
 
Ich bin da anderer Meinung (und SelfHTML übrigends auch):
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image schrieb:
Wenn das Element, für das die Hintergrundgrafik definiert wird, in der Höhe oder Breite kleiner ist als die Hintergrundgrafik, wird die Hintergrundgrafik in der Darstellung an den Grenzen des Elements abgeschnitten.
Zum Vergrößern anklicken....
 
:confused:
ich versteh nicht, was du meinst...
das Element ist ja nicht kleiner. So, wie ich es oben gepostet hab, sind es 2 divs, die über die ganze Breite gehen...
und selbst wenn es abgeschnitten wird: es würde, wenn es breiter ist und in Transparenz übergeht immer dort abgeschnitten, wo es transparent ist, da es ja entsprechend links oder rechts positioniert ist.

planet4.
 
...hier mal so, wie es in der Auflösung 1280 x irgendwas aussieht
und so, wie es aussieht, wenn man sich im genialen Firefox die Container anzeigen lässt,
da sieht man das Übereinanderliegen der Hintergrundbilder sehr gut

planet4.
 

Anhänge

  • hintergrund.jpg
    hintergrund.jpg
    9,5 KB · Aufrufe: 9
  • hintergrund_box.jpg
    hintergrund_box.jpg
    12,9 KB · Aufrufe: 8
Ich blick' jetzt gar nicht mehr durch...
Ich orientiere mich am Ausgangspost.
Und so, wie das Code-technisch aussieht, geht es nicht.
Da steht z.B. "nur" left:0px;...
Und das funktioniert nur, wenn position (entweder absolute oder relative) angegeben wird.
 
ja klar, der Ausgangscode funktioniert nicht; meine Beispiel-Screenshots
stellen das dar, was ich an Code gepostet hab, mein Vorschlag, wie man es
machen sollte.
Das mit dem left:0px ohne es zu positionieren ist natürlich Quatsch

planet4.
 
Jungs Jungs Jungs ich bin euch erst mal für eure Diskussion ohne mich dankbar. Das es mit dem Ausgangscode nicht geht ist logisch deswegen hab ich den Thread gemacht weil ich gern ne Lösung hätte und mir auch der Denkanstoss gefehlt hat. Wie das halt o ist man hat dann ne Blockade und kommt nicht weiter.

So meine Kentnisse sind so weit da!!! Weil diese nicht geschlossenen div Tags macht man in XHTML nun mal so wenn kein Inhalt drinne steht. Beweis guckt euch den Validator auf W3c mit meiner Seite an und dann wisst ihr das es genau so wie ich es gemacht hab konform ist. Aber wer weiß schon alles :) . Und ich hab mein Studium ja grad mal angefangen *hehe* .


dkdenz schrieb:
Gibt's das Ganze auch nochmal so, das ich es verstehe?
Ich hatte geschrieben, das Du einen Kompromiss eingehen musst, denn ein Hintergrundbild passt sich nicht an die Breite oder Höhe eines Elementes an.
Ergo setzt Du Dich vor Dein Grafikprogramm und versuchst, einen Kompromiss herzustellen.
In meinem Beispiel hat das Hintergrundbild eine Breite von 1400 Pixeln.
Also teilst Du Dein Bild in drei Bereiche ein.
Teil 1 hat eine Breite von 320 Pixeln und da machst Du Dir einen Verlauf rein, so wie Du ihn Dir vorstellst.
Teil 2 hat eine Breite von 760 Pixeln und da machst Du die Hintergrundfarbe rein, die Du Dir vorstellst.
Teil 3 ist wiederrum 320 Pixel breit und da machst Du einen umgekehrten Verlauf zu Teil 1 rein.
Dann kannst Du das Ganze mit einer Breite von 1400px und einer Höhe von 1px abspeichern.
In den body Deiner CSS schreibst Du dann: background:url(pfadzumbild.gif) top center repeat-y;!
Zum Vergrößern anklicken....

Also das solltest du so verstehen das das was du mir als Alternative bzw. als Kompromiss angeboten hast von dem was ich erreichen will abweicht.
 
pad8626 schrieb:
Weil diese nicht geschlossenen div Tags macht man in XHTML nun mal so wenn kein Inhalt drinne steht.
Zum Vergrößern anklicken....
Was hältst Du dann bei Deinem Code von <title /> (auch wenn's kein div ist - ist aber leer)?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben