Zweifarbiger Contenthintergrund, prozentuale Höhe

martinhahn90

Servus ihr,

für einen Bekannten soll ich eine Homepage neu programmieren und dabei möchte ich wieder mit CSS und HTML arbeiten, statt wie die Vorgängerin scheinbar mit Flash.
Die VOrgängerin hat, wie auf www.münsterländersporttalk.de zu sehen ist, den Hintergrund des Contents so eingerichtet, dass jeweils 50% des Hintergrunds gelb und 50% blau sind. "Drauf" liegt eine weiße Contentebene.

Nun gibt es kleinere Umstrukturierungen, dass es wie folgt aussehen soll:
heartkick.de/muenster

Allerdings weiß ich nicht, wie ich es hinbekomme, dass der Hintergrund der Homepagebreite zu jeweils 50% orange/blau ist. Ein 1px Bild, weches Orange/Blau ist einzubauen, geht ja nicht, da damit die prozentuale Streckung weg wäre, richtig?
Denn wird der Text und damit der Contentbereich länger, sollen trotzdem noch 50% blau udn 50% orange sein...

Wäre euch dankbar. Viele Grüße,

Martin

gamefreaxx

Hi Martin,

also mit einem Hintergrundbild würde das schon auch gehen, aber das ganze ist dann etwas komisch. Da es das "Background-width" in CSS nicht gibt, musst du ein Bild in einer Farbe erstellen, dass in der Höhe 1px hat, allerdings so breit ist, dass es garantiert immer breiter als die Hälfte des Bildschirms ist - das ganze würde dann so aussehen:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

{doctype}
<html>
<head>
<title>test</title>
<style type="text/css" media="all">
.bg
{
 background-color: #Farbe1;
 background-position: 50%;
 background-repeat: repeat-y;
 background-image: url(Bild_mit_Farbe2.jpg);
}
</style>
</head>

<body class="bg">
...
</body>
</html>

Alternativ kannst du auch mit DIV-Containern oder Tabellen arbeiten - bei Tabellen zum Beispiel zwei Spalten mit den unterschidlichen Farben anlegen:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

...
<table cellpadding="4" cellspacing="0" border="0" style="width: 100%; height: 100%;">
 <tr>
  <td width="50%" bgcolor="#Farbcode1">...</td>
  <td width="50%" bgcolor="#Farbcode2">...</td>
 </tr>
</table>
...

P.S.: Bist oder warst du mal beim BR?! Augenzwinkern

martinhahn90

Servus,

erst einmal ein großes Dankeschön. Habe mir aber selber eien Lösung ausgedacht, die nicht zu 100% funktioniert, aber immerhin die Gegenseite zufriedengestallt hat. Das Prinzip funktioniert, nur die Proportionen der Farben (50/50) passen leider nicht ganz.

Meine Lösung findest du hier: heartkick.de/muenster/style.css und live und in Farbe dann auf heartkick.de/muenster hehe.
Wie du siehst, habe ich nun doch ein BG-Image genommen. 1px breit und in der Höhe bei ca. der Hälfte mit einem Farbwechsel. Höhe 1000px, damit klappt es bei längeren Contents ganz gut, bei einem sehr kurzen aber eher wenig.

BR? Sagt mir nun auf Anhieb nichts, aber es kann sein. Gab so einige Projekte, wo ich bin oder war. hmmm...klär' mich auf, hehe.
Also, nochmal vielen Dank. Da du aber etwas von "Breite" und width schriebst, glaube ich, ist deine Lösung für eine Homepage mit Farbaufteilung in der Breite, oder? Vielleicht weißt du ja noch einen einfachen Optimierungstipp für meine Version, ansonsten ist es auch so in Ordnung.

Danke nochmal

Edit: Lese gerade nochmal genau. V1 sieht gut aus und müsste so doch auch klappen, sofern ich für das BG-img dann repeat-x angebe, oder? hm, wobei, brauche ich ja eigentlich nichtmal...warte mal, kann ich das repeat nicht sogar weglassen`dann liegt das bg-image bei 50 über der bg-color, gell?

Forensoftware: Burning Board, entwickelt von WoltLab GmbH