✔ Farbverlauf auf Website mit <div> darstellen

Status
Nicht offen für weitere Antworten.
B

ben_19

Mitglied
Hallo zusammen!

Ich sitze nun schon den ganzen Vormittag daran einen Farbverlauf hinzubekommen.

Doch zuerst seht euch einfach mal das Problem an:

Link zum Problem

Erläuterungen:

Hier handelt es sich um 4 div-boxen, welche die folgende Funktionen haben:

div-left: enthält die hintergrundfarbe weiß und sollte sich mit dem ändern der fenstergröße des browserfensters mitändern
div-right: selbiges nur mit der farbe #333333
div-middle: enthält die farbverlaufs-grafik >Grafik< welche mit position-y auf die browsergröße angepasst werden soll
und schlussendlich div-inhalt: welche die swf-datei enthält - diese ist allerdings schon richtig angeordnet

Mein Problem:

Ich möchte dass sich div-left und -right mitändert während sich div-middle mit div-inhalt mitbewegt, wenn die fenstergröße geändert wird.

Kenne mich leider mit <div> noch nicht so aus um das bewerkstelligen zu können.

Hier der dazugehörige CSS-Code:

Code: 
#left {
	background-color: #FFFFFF;
	background-repeat: repeat-y;
	background-position: left;
	float: left;
	height: 600px;
	width: 30%;
	position: relative;
	z-index: 1;
}
#middle {
	background-image: url(farbverlauf.jpg);
	background-repeat: repeat-y;
	background-position: center;
	height: 600px;
	width: 600px;
	position: absolute;
	z-index: 1;
	margin:0 0 0 250px;
}
#right {
	background-color: #333333;
	background-position: right;
	background-repeat: repeat-y;
	float: right;
	height: 600px;
	width: 30%;
	position: relative;
	visibility:visible;
}
div#inhalt
{
   position:absolute;
   left:50%;
   top:50%;
   height:400px;
   width:600px;
   margin-top:-200px;
   margin-left:-300px;
}

Könnte sich bitte jemand den Code ansehen und mir sagen was ich ändern muss damit ich zu einem befriedigenden Ergebnis gelange?

Vielen, vielen Dank im Voraus!!
 
Zuletzt bearbeitet:
Hi,

vielleicht hilft dir dieses Modell weiter?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
html,body {
margin: 0;
padding: 0;
}

div#wrapper {
position: absolute;
top: 50%;
margin-top: -300px;
width: 100%;
height: 600px;
}

div#leftCol {
height: 500px;
background: #fff url(http://www.4ahwim.com/phoenician/farbverlauf.jpg) repeat-y right top;
margin-right: 30% !important; /* Für moderne Browser */
margin-right: -3px; /* 3px-Bug im IE aufheben */
text-align: right;
padding-top: 100px;
}

div#rightCol {
float:right;
width: 30%;
height: 600px;
background: #333333;
margin-left: 0 !important; /* Für moderne Browser */
margin-left: -3px; /* 3px-Bug im IE aufheben */
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="rightCol"></div>
     <div id="leftCol">
          <div id="inhalt">
               <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="600" height="400" id="intro" align="middle">
                       <param name="allowScriptAccess" value="sameDomain" />
                       <param name="movie" value="http://www.4ahwim.com/phoenician/intro.swf" />
                       <param name="quality" value="high" />
                       <param name="bgcolor" value="#ffffff" />
                       <embed src="http://www.4ahwim.com/phoenician/intro.swf" quality="high" bgcolor="#ffffff" width="600" height="400" name="intro" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
               </object>
          </div>
     </div>
</div>

</body>
</html>
 
hey!

Vielen, vielen Dank für Deine Hilfe!!

Hab das jetzt mal umgesetzt: Link zu deinem Vorschlag

Ist wirklich perfekt, bis auf einen kleinen Schönheitsfehler und zwar, dass der schwarze Bereich breiter ist als der weiße und der weiße Bereich sich ändert aber der schwarze nicht. Kannst du mir dabei noch helfen das gleich zu machen? Also dass die swf-Datei zentriert ist im Browser?

Bitte - wäre unglaublich nett :)

Danke schonmal im Voraus für alles!
 
Zuletzt bearbeitet:
Okay, ich hab dem Konzept eine Schönheitskur verschrieben. ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
html,body {
margin: 0;
padding: 0;
}

div#wrapper {
position: absolute;
top: 50%;
margin-top: -300px;
width: 100%;
height: 600px;
}

div#leftCol {
float: left;
width: 49%;
height: 600px;
background: #fff;
}

div#rightCol {
float: right;
width: 49%;
height: 600px;
background: #333333;
}

div#centerCol {
position: absolute;
top: 0;
left: 50%;
margin-left: -300px;
width: 600px;
height: 600px;
background: url(http://www.4ahwim.com/phoenician/farbverlauf.jpg) repeat-y;
}

div#inhalt {
margin-top: 100px;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="leftCol"></div>
     <div id="rightCol"></div>
     <div id="centerCol">
          <div id="inhalt">
               <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="600" height="400" id="intro" align="middle">
                       <param name="allowScriptAccess" value="sameDomain" />
                       <param name="movie" value="http://www.4ahwim.com/phoenician/intro.swf" />
                       <param name="quality" value="high" />
                       <param name="bgcolor" value="#ffffff" />
               <embed src="http://www.4ahwim.com/phoenician/intro.swf" quality="high" bgcolor="#ffffff" width="600" height="400" name="intro" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
               </object>
          </div>
     </div>
</div>

</body>
</html>
 
jaaaaa .. genauso Fertige Seite

Vielen Dank (und das is noch untertrieben .. hehe) .. würd dir ja gern die Hand schütteln oder so, aber das is schwer möglich, also fühl dich geshaked .. hehe :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück