Neuling hat Probleme mit Stylesheets - bitte um Hilfe.

**Caesar** · 02.11.2011, 11:04

Hallo liebe Community,

ich arbeite seit kurzer Zeit mit an einer Contao-Page, nachdem jemand anders die Seite mit eigenem Template und allem eingerichtet hat.
Alles ist soweit fertig, allerdings möchte ich im Layout größere Änderungen vornehmen und brauche dafür Hilfe.
Ich habe sehr grundlegende HTML-Fähigkeiten und kritzele immer in den Stylesheets rum um die Layouts zu verändern, aber ich habe drei ungelöste Probleme:

1.: Wie oder wo kann ich die Farbe bzw. die Beschaffenheit des Bodys ändern? Klingt blöd, aber ich habe es nicht gefunden. Das Problem ist, dass ich immer nur die Hintergrundgrafik ändern kann, ich möchte aber quasi die Box ändern, in der der Haupttext angezeigt wird; Artikel usw..

Daraus resultiert 2.: Was muss ich dorthin schreiben um diesen Body/den Textbereich auf "durchsichtig" zu stellen, sodass die Hintergrundgrafik durchschimmert?

Und noch eine Frage, die wahrscheinlich keine beantworten kann:
3.: In meinen Header ist ein Logo eingebunden, auf den eine der Unterseiten verlinkt wurde. Wie und vor Allem WO kann ich diesen Link bearbeiten???

Das Problem ist, dass ich zu dem ursprünglichen Programmierer derzeit absolut keinen Kontakt herstellen kann, es wäre unheimlich lieb wenn sich jemand meiner Probleme annehmen könnte.
Beste Grüße,
Greta

**Alexander** · 02.11.2011, 11:19

Ave Caesar!

Hilfe immer gerne, doch damit ich mich nicht geistig verrenken muss, wäre ein Link zur Beschau der Seite / des Problems sehr hilfreich.
Ansonsten erst einmal soviel:
1. Wenn du die Hintergrundfarbe(?) des body ändern willst: http://www.css4you.de/background-color.html
Achte jedoch darauf, dass ein mögliches Hintergrundbild die Hintergrundfabe immer "überdeckt". Man sieht die Hintergrundfarbe nur an den Stellen, an denen kein Bild eingebunden ist.
2. Transparenz. Das Feature geht mit CSS-Bordmitteln erst seit Version 3 afaik.
Dein Stichwort lautet hier "opacity": http://www.css3.info/preview/opacity/
Dem entsprechenden Element musst du die Eigenschaft opacity zuweisen, also z.B.: #divid {opacity:0.4;}. Das würde bedeuten, dass #divid nur zu 40% deckt - also zu 60% transparent ist. 1 ist der Ausgangswert von jedem Element (100% Deckkraft).
3. Das kommt drauf an, wie das Logo eingebunden ist - als Modul, Inhaltselement, im Template selbst o.ä.? Hier braucht man den Link zum Problem.

Beste Grüße
Alex

**Caesar** · 02.11.2011, 11:30

Zitat von Alexander

Ave Caesar!

Hilfe immer gerne, doch damit ich mich nicht geistig verrenken muss, wäre ein Link zur Beschau der Seite / des Problems sehr hilfreich.

Zitat von Alexander

1. Wenn du die Hintergrundfarbe(?) des body ändern willst: http://www.css4you.de/background-color.html
Achte jedoch darauf, dass ein mögliches Hintergrundbild die Hintergrundfabe immer "überdeckt". Man sieht die Hintergrundfarbe nur an den Stellen, an denen kein Bild eingebunden ist.

Okay, ich habe mich falsch ausgedrückt: Ich möchte eben nicht diesen Hintergrund ändern sondern den eigentlichen Body, in dem der Text steht; auf der Page im Link ist dieser Bereich noch weiß.

Zitat von Alexander

3. Das kommt drauf an, wie das Logo eingebunden ist - als Modul, Inhaltselement, im Template selbst o.ä.? Hier braucht man den Link zum Problem.

Puuuuuuuh, das weiß ich gar nicht so ganz genau... Ich weiß nur, dass in den Stylesheets was dazu steht, ich aber nirgends die besagte Stelle fand, an der ein Link eingebunden ist.
Ich kann mal im Template suchen (*hust*), als Inhaltselement jedenfalls nicht soweit ich weiß.

Vielen lieben Dank schonmal!

**manfred** · 02.11.2011, 14:52

Hallo Caesar,

wenn Du mit Firefox im Netz bist, dann installiere doch das Addon Firebug, damit könntest Du u.a. feststellen, dass die Farbe Deines Containers von einer Grafik kommt...und nicht von einer angegebenen Hintergrundfarbe.

Gruß Manfred

**Caesar** · 02.11.2011, 15:36

Zitat von manfred

Hallo Caesar,

wenn Du mit Firefox im Netz bist, dann installiere doch das Addon Firebug, damit könntest Du u.a. feststellen, dass die Farbe Deines Containers von einer Grafik kommt...und nicht von einer angegebenen Hintergrundfarbe.

Gruß Manfred

Hey,

lieben Dank, aber hier ist es dasselbe Problem, glaube ich:
Ich möchte nicht den HINTERgrund ändern sondern den Hintergrund hinter dem TEXT, sprich: Die weiße Fläche!!
Und mich würde sehr stark wundern wenn diese über eine Grafik gesteuert würde, so eine Grafik ist auch nicht ind er Dateiverwaltung zu finden und es würde ja auch keinen Sinn machen.

LG

EDIT:
Der Dateiname ist eindeutig diese Lila-Rote Hintergrundgrafik, und genau die weiß ich ja wie zu ändern.

**manfred** · 02.11.2011, 15:59

Okay, dann klinke ich mich hier aus.....

**ATLAS** · 02.11.2011, 16:02

Das stimmt schon, was geschrieben wurde.
Wenn du das mal ändern würdest, also das Hintergrundbild mal entfernen und eine Farbe einsetzen, könntest du das sehen.

PHP-Code:


#container {      background-color: lightBlue;
    padding-bottom: 30px;    padding-top: 7px;}

Dein Bild hat eine Höhe von 10 Pixel und wird senkrecht nach unten wiederholt.

**Caesar** · 02.11.2011, 16:13

Ja, aber ich möchte ja nicht den Hintergrund ändern! Ich möchte den Bereich ändern in dem der Text angezeigt wird!!!
Ich weiß wie ich den Hintergrund ändern kann! Das nervt mich total aber ich blicke einfach nicht durch!

Und zu der anderen Frage:
Wo kann ich jetzt hier einen Zusatzcode einfügen in dem festgelegt wird, dass ein bestimmter Bereich "opacity" haben soll?

LG, danke für all eure Hilfe.

**peter64** · 02.11.2011, 17:23

Hallo Caesar,

der Container hat ein Hintergrundbild, das container_bg.gif heißt und vertikal wiederholt wird. Und eine Hintergrundfarbe, die als transparent definiert ist.
Beides ist festgelegt in #container.

Gruß
Peter

**Caesar** · 02.11.2011, 18:17

Das weiß ich doch!!!
Wie bereits mehrmals geschrieben, ich möchte den im Link weißen Bereich verändern!!! Nicht den farbig-dunklen!

EDIT:
Verzeihung, ist nicht böse gemeint, lieben Dank für die Tipps. Aber es geht halt nicht um den Container, den hab ich ja selbst schon geändert! Ich meine halt wirklich den weißen Bereich.

**Vollpfosten** · 02.11.2011, 18:53

Irgendwie bringst du etliche Sachen durcheinander.
Der braune Hintergrund ist im body definiert und bezieht sich auf die ganze Seite,
der weiße Hintergrund wird im #container definiert und überdeckt für alle Bereiche im Container (z.B #left und #main) das braune Hintergrundbild.
Um jetzt den weißen Bereich auzublenden, musst du aus #container das Background-Bild tl_files/fM_k0005/images/container_bg.gif entfernen (wenn du es richtig machst, ist auf der ganzen Seite der braune Hintergrund sichtbar)
Jetzt kannst du zum Beispiel für den #main Bereich eine neue Hintergrundfarbe wählen zB-
#main{background-color: white, opacity:0.5}

..ansonsten kann ich nur die Beiträge der anderen Helfer wiederholen: Firebug nutzen

**Caesar** · 02.11.2011, 19:58

Ach sooo... Okay, es tut mir ganz furchtbar leid, ich hatte euch falsch verstanden!
Ich habe jetzt den Container komplett gelöscht. Ergebnis: http://wolffudo.de/
Mh. (Also, es hat sich halt nichts geändert.)

**Vollpfosten** · 02.11.2011, 20:12

Es hat was gebracht, nach einem reload wird das Bild nicht mehr angezeigt, aber deine Vorgehensweise ist schon sehr komisch, Eigentlich solltest du nur in der CSS-Datei die Anweisung {background:url["...tl_files/..}unter dem Eintrag #container löschen und nicht einfach das Bild mit dem Titel "container_bg".

Edit: Anscheinend arbeitest du gerade an der Seite, denn Firebug zeigt ein paar neue Veränderungen an.
Hier ein paar Hilfestellungen :http://www.css4you.de/ bzw. http://www.w3schools.com/css/default.asp

**Caesar** · 02.11.2011, 20:35

Jetzt hat es geklappt, allerdings wird natürlich jetzt auch die Schrift nicht mehr 100% deckend angezeigt.
Wie kann ich das ändern? ich würde gern die Schrift voll deckend anzeigen und den Container weiterhin weniger deckend.
Derzeit:

background-color:#E4DFFF; opacity:0.1

**Caesar** · 02.11.2011, 20:47

Ach ja: Nochmal ganz lieben Dank an all die lieben, geduldigen Menschen!!

**Vollpfosten** · 02.11.2011, 21:06

Hier ein Beispiel: http://www.w3schools.com/css/css_image_transparency.asp

PS: Fand das vorherige Layout besser (rein subjektiv), aber CSS ist ja schnell gelernt.

**Caesar** · 02.11.2011, 21:11

Ja, das Layout wird sich komplett ändern, also da kommt ein ganz anderes Hintergrundbild rein und der ganze Stil... naja, wird mal einer. Ist alles noch sehr roh.
Ohjee, ich werd mich mal durchlesen...

Das Dumme ist, ich will bei der allerersten Seite nachher, dass der Container komplett transparent ist und aber eine Grafik zu sehne ist, ein Schriftzug.
Ich glaube ich muss mich mal wieder einlesen in den ganzen CSS-Kram. >.<

**Caesar** · 02.11.2011, 21:19

Oh maaan... Wie mache ich das denn? Ich müsste doch eigentlich nur durch einen Code die Schrift von dem opacity - Befehl ausschließen, oder?

**tblumrich** · 02.11.2011, 22:41

Mit welcher Contao Version arbeitest du denn? Wenns die 2.10 ist, dann guck dir doch einfach mal die Transparenzfunktion im Stylesheet-Editor an... die arbeitet auf Basis von RGBA. Vorteil... die Transparenz wirkt sich, wie gewünscht, nur auf die Backgroundfarbe aus.

Nachteil... ältere IE Versionen können das per default nicht. Contao hat da aber was eingebaut (ich drück das jetzt mal so platt aus), das es eben doch geht. Es gibt aber einen kleinen Bug, weil... ach lies mal in folgendem Thread:
http://www.contao-community.de/showt...icht-angewandt

Kannst du ansonsten nicht auch mit einem halbtransparenten PNG (Alpha) arbeiten? Funktioniert aber auch nicht in alten IEs (auch gibts Workarounds ala PNGfix)

Ich hoffe ich hab dich nicht noch mehr verwirrt.

Gruß
Thomas

**Caesar** · 03.11.2011, 00:13

Zitat von tblumrich

Mit welcher Contao Version arbeitest du denn? Wenns die 2.10 ist, dann guck dir doch einfach mal die Transparenzfunktion im Stylesheet-Editor an... die arbeitet auf Basis von RGBA. Vorteil... die Transparenz wirkt sich, wie gewünscht, nur auf die Backgroundfarbe aus.

Nachteil... ältere IE Versionen können das per default nicht. Contao hat da aber was eingebaut (ich drück das jetzt mal so platt aus), das es eben doch geht. Es gibt aber einen kleinen Bug, weil... ach lies mal in folgendem Thread:
http://www.contao-community.de/showt...icht-angewandt

Kannst du ansonsten nicht auch mit einem halbtransparenten PNG (Alpha) arbeiten? Funktioniert aber auch nicht in alten IEs (auch gibts Workarounds ala PNGfix)

Ich hoffe ich hab dich nicht noch mehr verwirrt.

Gruß
Thomas

Haha, nee, mehr Verwirrung ist in meinem eingerosteten Hirn derzeit wahrlich nicht mehr anzustiften...

Allerdings ist das wirklich um 20 Ecken.

Dumme Frage: geht es wirklich nicht direkter? Also, dass man eben einfügt, dass der "opacity"-tag nicht auf die font angewendet wird?

Aber ich versuche es mal zu kapieren, lieben Dank!!

**Caesar** · 03.11.2011, 00:23

So, jetzt hab ich es mit RGBA gemacht:
background-color:rgba(255,255,255,0.9);

Ist eigentlich super, allerdings moppert da natürlich der IE wieder. Möchte ich das umgehen soll ich laut dieser netten Seite so machen:

background-color: rgb(155,255,255);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5 0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50 );
opacity:0.9;

Doof daran: Dann ist die Schrift wieder mit in die Transparenz eingebunden. Beim RGBA oben war das NICHT der Fall, die Schrift war perfekt und unabhängig vom Hintergrund.
Meeeensch.
Wieviele Menschen benutzen denn so 'ne alte IE-Version?

**tblumrich** · 03.11.2011, 06:20

Zitat von Caesar

Wieviele Menschen benutzen denn so 'ne alte IE-Version?

In diesem Fall... leider viele, weil der IE8 das schon nicht kann.

So, wie es aussieht, machst du das alles händisch und du nutzt Contao nicht in der neuesten Version? Die Antwort bist du noch schuldig...

Es gibt ja auch noch die Möglichkeit für IE7/8 dem background im #container ein halbtransparentes PNG zu geben.

Gruß
Thomas

**Caesar** · 03.11.2011, 06:54

Oh, entschuldigung vielmals!
Ich nutze Version 2.9.2. Ja, das PNG wäre auch eine Möglichkeit, wohl wahr... Gibt es da nicht auch irgendwelche Komplikationen?

**tblumrich** · 03.11.2011, 10:23

Klar. Aber ich denke man muss dabei eher über die Verhältnismäßigkeit nachdenken... wenn irgendwann der Aufwand zu hoch und ein spezielles Feature nur noch mit Trick17 zu bekommen ist, sollte man es lassen oder eben mit ein paar Krücken leben.

Mal ehrlich, wenn ein Surfer mit uralt - Browser den Hintergrund eben nontransparent bekommt... was wird passieren? Wahrscheinlich nichts.

Zu Alpa-PNGs, deren Komplikationen und der Behebung findest du im Netz jede Menge.

Gruß
Thomas