Peter Körner: dynamischer / flexibler Farbverlauf

Beitrag lesen

SELF-Forum

dynamischer / flexibler Farbverlauf

Peter Körner
– Informationen zu den Bewertungsregeln

Hi
Also zunächstmal hab ich gelernt dass am Computer prinzipiell alles möglich ist -- es ist nur eine Frage des Aufwandes und der kompatibilität (konkret: in welchen Browsern funktioniert es dann)..

Zu deinem Problem:
Geb dem body den linken Verlauf als hintergrund, repeat-y, position left. Darein ein div mit dem rechten verlaufals hintergrund, repeat-y, position right. darein dann dein container.
Noch zwei Tips: Um den Banner oben darzustellen kannst du ein <h1> mit einer image-replacement-technik [http://meiert.com/de/publications/articles/20050513/] verwenden. Der vorteil ist, dass du z.B. b4eim Drucken statt des Banners den Titel anzeigen lassen kannst.
Um den container auf volle höhe zu bringen, musst du html, body und dem container jeweils eine höhe von 100% spendieren.

Wenn du das alles zusammenbaust sieht das dann so aus:

- 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" media="screen" />  
  <title>Titel</title>  
 </head>  
  
 <body>  
  <div id="box">  
   <div id="container">  
  
    <h1>Titel</h1>  
  
    blup  
    <div class="center" ></div>  
    <div class="footer" ></div>  
   </div>  
  
  </div>  
 </body>  
</html>

- CSS -

* {  
  padding:0px;  
 margin:0px;  
}  
  
html { height: 100%; }  
body {  
 text-align: center;  
 background: url(images/verlauf_links.png) repeat-y left;  
 height: 100%;  
}  
  
#box {  
 background: url(images/verlauf_rechts.png) repeat-y right;  
 height: 100%;  
}  
  
#container {  
 text-align: lefT;  
 width:759px;  
 margin: 0px auto;  
 background-color:#C0C0C0;  
 height:100%;  
}  
  
  
h1 {  
 background: url(images/banner_test_2.jpg) no-repeat;  
 width: 760px;  
 height: 130px;  
 font-size: 1px;  
 color: black;  
}

Beachte auch die media-angabe bei der einbindung des Stylesheet. Dadurch gilt das CSS nicht in der druckansicht und der Titel wird dort wieder normalgroß dargestellt.

Gruß, Peter

Beitrag melden
–
Informationen zu den Bewertungsregeln