[WBB 3.1.x] Seitenrahmen halb transparent

Member

Friday, January 1st 2010, 4:50pm

Seitenrahmen halb transparent

Hallo,

ich möchte gern, dass mein Seitenrahmen nicht ganz transparent sondern eine transparenz von 70% beträgt. Wie mache ich das in der CSS-Deklaration an besten?

Gruss Dornensplittter

Gruss Dornensplitter

Go to the top of the page

tom

Member

Posts: 3,171

2

Friday, January 1st 2010, 5:25pm

Ich weiss jetzt nicht welche ID der Seitenrahmen hat...

#seitenrahmen {
background-color:#fff;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
}

Mal versuchen?

Ich würde lieber ein transparentes PNG nehmen.

„Gorgeous designs. We did it. You'll love it.“

Go to the top of the page

dornensplitter

Member

Posts: 10

3

Friday, January 1st 2010, 5:59pm

Danke, hat aber leider nicht geklappt

Quoted from "tom"

Ich weiss jetzt nicht welche ID der Seitenrahmen hat...

Joa, dat is der springende Punkt. Ich weiß nämlich auch nicht welche ID er hat

wie mache ich dat denn mit ´nem png per css?

Gruss Dornensplitter

Go to the top of the page

tom

Member

Posts: 3,171

4

Friday, January 1st 2010, 6:44pm

Du hast gar keinen Seitenrahmen im Forum, vorhin war er noch da, wollte mal eben nachschauen, nun ist er weg. Mit #seitenrahmen geht es natürlich nicht

Du hast doch schon Transparenzen im Forum, so wie du die gemacht hast, machst du das auch mit dem Seitenrahmen. Wenn du den noch mal einschaltest, kann ich mal schauen wie der heisst.

Edit:

#main {
background-color:#fff;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
}

Versuch das mal, mit #main wird der Seitenrahmen angesprochen.

Edit 2:

Jepp klappt, aber nimm lieber 30%:

#main {
background-color:#fff;
filter:alpha(opacity=30);
-moz-opacity:0.30;
opacity: 0.30;
}

„Gorgeous designs. We did it. You'll love it.“

This post has been edited 2 times, last edit by "tom" (Jan 1st 2010, 6:57pm)

Go to the top of the page

dornensplitter

Member

Posts: 10

5

Friday, January 1st 2010, 6:57pm

Dat wär echt super!

Ich habe das jetzt mal mit #main/#page versucht und es war natürlich nicht richtig. Dann mach den seitenrahmen wieder an.

Gruss Dornensplitter

Go to the top of the page

tom

Member

Posts: 3,171

6

Friday, January 1st 2010, 7:01pm

Also #main müsste gehen wenn der Seitenrahmen an ist, habs mal mit dem Header versucht:

15%:

index.php?page=Attachment&attachmentID=40870

30%:

index.php?page=Attachment&attachmentID=40869

Eventuell die Hintergrundfarbe im Stileditor ganz weglassen und alles über CSS machen.

„Gorgeous designs. We did it. You'll love it.“

Go to the top of the page

dornensplitter

Member

Posts: 10

7

Friday, January 1st 2010, 7:24pm

Bei mir siehts so aus klick mich!

dornensplitter has attached the following images:

Gruss Dornensplitter

Go to the top of the page

tom

Member

Posts: 3,171

8

Friday, January 1st 2010, 8:03pm

Hmm ok, ich habs mal ausprobiert. Wenn ich den Seitenrahmen aktiviere, ihm eine Hintergrundfarbe im Stileditor gebe und folgendes eintrage:

#main {
filter:alpha(opacity=30);
-moz-opacity:0.30;
opacity: 0.30;
}

Sieht das so aus:

index.php?page=Attachment&attachmentID=40884

Auch das funktioniert nicht:

#headerConatiner, #mainContainer, #footerContainer {
background-color:#FFF;
filter:alpha(opacity=30);
-moz-opacity:0.30;
opacity: 0.30;
}

index.php?page=Attachment&attachmentID=40885

Ich würde sagen, das geht per CSS nicht. Auch wenn ich einen negativen Z-Index verwende, bleibt diese Falschdarstellung.

Dir bleibt also wohl keine andere Möglichkeit als ein transparentes PNG zu verwenden und so einzubinden (Seitenrahmen aktivieren):

#main {
background-image: url("../images/deinStilordner/deinPNG.png");
}

Das PNG dann in den Stilordner legen.

Edit:

Hab dir mal 4 PNGs gemacht, im ZIP-File.

tom has attached the following file:

pngs.zip (2.3 kB - 30 times downloaded - latest: Apr 17th 2013, 3:57pm)

„Gorgeous designs. We did it. You'll love it.“

Go to the top of the page

dornensplitter

Member

Posts: 10

9

Friday, January 1st 2010, 8:41pm

Ich bin schon fast am Ziel.

Danke für deine Hilfe bis hierher und für die Zip. Ich hab sie noch schnell mal farblich angepasst. Nun fehlt noch ein bischen wat vom Seitenrahmen.

Hast du noch ´ne Idee? Ich schau nochmal die Style css durch. Vielleicht find ich noch was.

Das Design sollte in etwa so sein wie auf meiner Website die Boxen mit normaler Backgroundfarbe und den Rest zu 50% - 70% Transparent (außer Header und Footer).

Gruss Dornensplitter

Go to the top of the page

tom

Member

Posts: 3,171

10

Friday, January 1st 2010, 8:49pm

Ah, mist, ich habs verbockt, versuch es mal damit:

#footerContainer, #headerContainer, #mainContainer {
background-image:url("../images/dornensplitter/70.png");
}

Damit sollte dann der transparente Hintergrund bis zum Rahmen gehen.

Und das mit

#main {
background-image:url("../images/dornensplitter/70.png");
}

raus, das war Blödsinn.

„Gorgeous designs. We did it. You'll love it.“

Go to the top of the page

dornensplitter

Member

Posts: 10

11

Friday, January 1st 2010, 8:56pm

Ist nicht schlimm. Vielleicht lag´s ja auch an mir.

Danke schön, das hat super geklappt.

Gruss Dornensplitter

Go to the top of the page

Nino

Unregistered

12

Thursday, May 27th 2010, 4:27pm

Hallo liebe Comm,

wenn ich den Hintergrund transparent mache, habe ich das Problem, dass genau unter den Menübuttons ein Strich von links nach rechts geht. Wenn ich die Transparenz rausnehme, dann ist der Strich komischerweise verschwunden. Liegt es am Header bzw. Maincontainer oder am Mainmenü?

Hat jemand eine Idee? Ich bin schon am verzeifeln ...

www.pixelhorde.de

Update: Ich habe es jetzt wie folgt behoben -> margin: 0px 0px 1px;

Go to the top of the page

Black Rider

Moderator

Posts: 26,870

13

Thursday, May 27th 2010, 4:29pm

Gehe mal hier nach dem ersten Beitrag vor: http://wbbler.de/forum/b10-anleitungen-u…inmenu/#post351

Mit freundlichen Grüßen
Best regards

KittBlog Stile - Ihr Kit für Stile, Software und Knowhow
Your kit for styles, software and knowhow

Erste Linkliste zu Erweiterungen und Support rund um Burning Board©
First linklist for plugins and support around Burning Board©

Go to the top of the page

Nino

Unregistered

14

Thursday, May 27th 2010, 4:31pm

Danke Black Rider.

Werde ich bei Gelegenheit auch mal testen.

Go to the top of the page

webpexel

Member

Posts: 53

Occupation: Kaufmann

15

Thursday, March 29th 2012, 9:03am

Quoted from "Nino"

Hallo liebe Comm,

wenn ich den Hintergrund transparent mache, habe ich das Problem, dass genau unter den Menübuttons ein Strich von links nach rechts geht. Wenn ich die Transparenz rausnehme, dann ist der Strich komischerweise verschwunden. Liegt es am Header bzw. Maincontainer oder am Mainmenü?

Hat jemand eine Idee? Ich bin schon am verzeifeln ...

www.pixelhorde.de

Update: Ich habe es jetzt wie folgt behoben -> margin: 0px 0px 1px;

Ich möchte dieses alte Thema aufgreifen, weil ich gerade vor dieser Herausforderung stehe. Der Link "Zitat ... Gehe mal hier nach dem ersten Beitrag vor: http://wbbler.de/forum/b10-anleitungen-u…inmenu/#post351 ... funktioniert nicht mehr.

Über einen Lösungsansatz würde ich mich sehr freuen.