Mittlerer Teil des Forums weiß einfärben.

Jan

2010

Guten Abend.

So meine Lieben bin nun von der Idee soweit fertig, brauche aber noch den letzten Funken.

Bitte schaut mal kurz mein Testforum an:

http://alfaromeotest.forumieren.com/portal.htm

Dort habe ich per CSS nun den oberen Teil mit einem Bild versehen, ebenso den unteren Teil.

Was ich nun brauche, ist ein Code welcher den mittleren Teil mit weißer Farbe füllt.

body {
background-attachment:fixed;
background-color:#857171;
background-image:url(http://www.abload.de/img/weiyuo3.png);
background-repeat:no-repeat;
background-position:center;
}

Dieser Code würde von der Theorie her gehen, allerdings füllt er mit dem weißen Bild (Link) das Forum von oben bis unten und ich möchte nur den mittleren Teil weiß eingefärbt haben, also von oben dem weißen Rand oben bis an den Footer.
Wie dies aussieht, wenn man ihn so einsetzt das seht ihr hier:

http://www.abload.de/image.php?img=12345jqsm.png

Um meinen Wunsch zu verdeutlichen habe ich eine Grafik erstellt:

Die blauen linien signalisieren den weiß zu färbenden Bereich.

http://www.abload.de/image.php?img=sosollsseinpske.png

Sofern es euch hilft:

Dieser Code zeigt das Bild des oberen Teil des Forums:

Code:: #pun-intro { margin: 0; padding: 1.5em 1em 1em 1em; border-bottom: 0px solid #296fa5; background-color: transparent; background-image: url('http://www.abload.de/img/header2dmdm.png'); background-position: center; text-align: left; background-repeat: no-repeat; height: 270px; margin-top: -5px; margin-left: -12px; width: 950px; }

...und dieser bearbeitet den Footer:

Code:: #pun-foot { background-image: url('http://www.abload.de/img/testfooter9t02.png'); background-repeat: no-repeat; margin-left: -10px; width: 950px; background-position: bottom; height: 400px; margin-bottom: -5px; }

Ich bitte vielmals um Antwort, da ich inzwischen fast mein Ziel habe, aber nun am verzweifeln bin.
Ich danke tausend mal im Voraus.

Liebe Grüße, Lukas.

Antworten

1 terra-outlaw, am 31/01/2010 at 19h32

Hallo.

Habe noch ein Beispiel gefunden in welche Richtung ich das dachte.

http://demo.nicetheme.com/index.htm?theme_id=147647

Wer löst die knifflige Aufgabe und verdient all meinen Respekt ? Very Happy

2 steive, am 31/01/2010 at 20h34

naja wollen wir mal nich so sein^^

ich guck mir das mal an uns sage dir dann bescheid.

3 steive, am 31/01/2010 at 21h05

würde dir das reichen`?
kannst dir auch in meinen testi angucken:
http://steive.forumieren.de/index.htm

Code:: .bodyline{ background-image:url(http://www.abload.de/img/weiyuo3.png); border: 1px # solid; }

4 terra-outlaw, am 31/01/2010 at 22h36

Hallo steive.

Erstmal tausend Dank für dein Bemühen.

Ich habe den Code in mein Testforum eingefügt, allerdings passiert nichts.

Habe das weiße Bild nochmals bei imageshack hochgeladen, auch das brachte nichts.

Hier der komplette Code:

Code:: /*--Fix für das ausblenden der Link Unterstriche --*/ .pun a:focus, .pun a:active, .pun a:link, .pun a:visited { text-decoration: none; } /*--- ENDE FIX ---*/ #pun-navlinks li a { margin: 0; } .pun .frm .frm-buttons input { background-color:#7A0202; } .select { margin: 40px 0 0 -30px; } .module.main { border:0px solid #660000; margin:0 !important; text-align: center; } #page-body { margin:-5px 0; width:100%; } .main .main-head, .main .main-foot { background-color:#transparent; color:#transparent; font-weight:normal; padding:0.7em 1.3em; } .main .main-head { } .pun .main-content { background-color:transparent; border:0px solid #FFFFFF; } .post { background-color: #FFFFFF; } #pun-intro { margin: 0; padding: 1.5em 1em 1em 1em; border-bottom: 0px solid #296fa5; background-color: transparent; background-image: url('http://www.abload.de/img/header2dmdm.png'); background-position: center; text-align: left; background-repeat: no-repeat; height: 270px; margin-top: -5px; margin-left: -12px; width: 950px; } #pun-foot { background-image: url('http://www.abload.de/img/testfooter9t02.png'); background-repeat: no-repeat; margin-left: -10px; width: 950px; background-position: bottom; height: 400px; margin-bottom: -5px; } .bodyline{ background-image:url(http://img534.imageshack.us/img534/969/wei.png); border: 1px # solid; }

Schau mal bitte was du damit anstellen kannst.

Ich danke dir sehr.

Grüße, Lukas.

5 terra-outlaw, am 01/02/2010 at 00h28

Puh !

Ich habe durch Zufall nun entdeckt, dass der obere Teil des Forums gar nicht transparent ist, sondern die Hintergrundfarbe des Hintergrunds hat.

Also habe ich gebastelt und das Ergebnis sieht soweit schon richtig ordentlich aus. Ist zwar noch ein ungeschliffener Rohling, mir ging es aber nur ums Prinzip und das Verständnis !

http://alfaromeotest.forumieren.com/forum.htm

Allerdings finde ich es sehr umständlich die einzelnen Bausteine (Footer, Intro etc.) per Pixelangaben an die richtige Stelle zu rücken.

#pun-foot {
background-image: url('http://www.abload.de/img/footer99bc.png');
background-repeat: no-repeat;
margin-left: -5px;
width: 960px;
background-position: bottom;
height: 400px;
margin-bottom: -5px; }
#pun-foot h3 {
margin-top: 20px;
}
#pun-foot #pun-about ul li strong {
font-weight: normal;
}

Der normale Hintergrund ist genau 960 Pixel und die Intro und Footer Elemente auch. Dennoch muss ich sie immer hinjustieren, da sie irgendwie versetzt erscheinen wenn man den Link einfügt.
Kann man diese Justiererei irgendwie auch vereinfachen ?

Sieht es bei euch soweit bündig aus ?
Bitte schaut mal nach.

Ich danke euch.

Grüße, Lukas.

6 steive, am 01/02/2010 at 08h47

ahhhhh!! stimmt ja ich habe es in nen bb2 fprum probiert.. mach mich nachher mal rann und stell auf pun um...

7 terra-outlaw, am 01/02/2010 at 09h01

Kein Thema steive.

Habe rausgefunden, dass der Kopf des Forums (Tuning Forum) gar nicht transparent ist, sondern schwarz wie der restliche Hintergrund.

So überdeckt es nur den komplett durchlaufenden Mittelteil.
Also muss der nichtmal am intro anfangen und vor dem footer enden ...

Mal schauen wie es weiter geht. Bin trotzdem gespannt was du auf die Beine stellst.

Grüße, Lukas.