Änderung von #centerthis in stylesheet.css

[cyjo5]

Hallo,

ich nutze phpBB 3.0.11 mit Subsilver2.

Ich habe die Breite des Forums auf 70% eingestellt und ein overall Hintergrundbild aufgelegt.

Das Forum ist unter http://www.aquarienberater.de/forum zu finden.

Nun wollte ich den Bereich zwischen Header und Footer (also zwischen den Menüs und den einzelnen Forenbereichen) nicht komplett transparent lassen.

Das Ergebniss sollte (zumindest weitgehend) so aussehen wie im Shop: http://www.aquarienberater.de/shop

Zunächst habe ich deshalb mit Firebug den richtigen Bereich rausgesucht (centerthis) und habe den Eintrag wie folgt geändert:

Code: Alles auswählen

#centerthis {
padding: 0 20px;
width: 70%;
background-color:  #ECE8E8; 
    /* zum mittig machen folgendes noch */
margin-left: auto;
margin-right: auto;
}

Somit habe ich nun erstmal einen silbernen Hintergrund zum testen geschaffen. OK, der Bereich stimmte, so war's geplant.

Dann wollte ich das ganze mit einer Grafik überlagern (halt so, wie für das Hintergrundbild).

Also habe ich folgendes reingeschrieben:

Code: Alles auswählen

#centerthis {
padding: 0 20px;
width: 70%;
background-color:  #ECE8E8;
background-image: url(./images/Trans50.giv); 
    background-position: center;
  background-repeat: repeat-x;
   background-size: cover; 
    /* zum mittig machen folgendes noch */
margin-left: auto;
margin-right: auto;
}

Die Datei wird auch angezeigt, allerdings nicht semitransparent, oder halt doch, aber die eingestellte bg-c liegt halt noch darunter. Nehme ich diese raus oder setze sie auf transparent, verschwindet dummerweise auch das bg-i.

Wo mache ich da einen Fehler, oder geht das gar nicht so wie ich mir das vorstelle?

Außerdem habe ich noch keine Möglichkeit gefunden, wie ich den Bereich der centerthis schmaler machen kann, damit er direkt auf Forenbreite aufhört und nicht links und rechts etwas übersteht. Kann man das evtl. auch ändern ?

lg Frank

[Crizzo]

Hi,

liegt da nicht ein Tippfehler vor? .giv soll doch sicher .gif heißen, oder?

Dann machst du einen Fehler in der Regel. Wenn die background-color entfernt oder auf "transparent" definiert wird, dann bleibt das background-image trotzdem noch da sein.

Zudem verstehe ich nicht, wieso du

Code: Alles auswählen

 background-position: center;
  background-repeat: repeat-x;
   background-size: cover

Die Position ist überflüssig, wenn du repeat nutzt. Cover ist CSS3 und streckt die 10x10px Grafik auf Elementbreite, wieso? Nimm doch das hier:

Code: Alles auswählen

background-repeat: repeat;

Aber selbst wenn ich das so einstelle, deine Hintergrundgrafik ist nicht transparent, ich kann wenn die da liegt dahinter nichts mehr sehen.

Außerdem habe ich noch keine Möglichkeit gefunden, wie ich den Bereich der centerthis schmaler machen kann, damit er direkt auf Forenbreite aufhört und nicht links und rechts etwas übersteht. Kann man das evtl. auch ändern ?

Finde:

Code: Alles auswählen

#centerthis {
    background-image: url("./images/Trans50.gif");
    background-repeat: repeat;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    width: 70%;
}

und setze das padding auf "0".

Grüße

[cyjo5]

Hallo Blackhawk87,

danke für deine Hinweise.

Den Tippfehler hab ich doch glatt übersehen. Sollte wirklich .gif sein.

Das mit der Grafik versteh' ich nicht. Die Verschwindet sobald ich die Farbe lösche. Hab's gerade nochmal probiert (nach deinen Änderungen).

Ich hatte den Code so von der Änderung des Hintergrundes übernommen und hatte geklappt. Leider kenn ich mich immer noch nicht so gut aus.
Aber dein Vorschlag ist kürzer und Eleganter. Habe ihn eingesetzt.

Das padding habe ich auf 0 gesetzt, habe ich irgendwie unbewußt ignoriert, dass ich da was ändern konnte

Nur das mit der Grafik, das ist mir echt zu hoch. Die gleiche Grafik habe ich doch auch im Shop benutzt. Da geht es doch ohne Probleme.
Habe jetzt grade nochmal eine neue 50%transparent erstellt, 1x als gif und 1x als png. Bei beiden der gleiche Effekt. Keine Halbtransparenz.

lg

Frank

[HabNurNeFrage]

Hi,

halbtransparente Gifs gibt es nicht.
Das würde mit einem .png funktionieren.

Hier einiges über Teiltransparenz: http://aktuell.de.selfhtml.org/artikel/ ... ansparenz/

Nach den Korrekturen an Deiner ID versuch mal Folgendes hinter Deinem Code:

Code: Alles auswählen

#centerthis img {
filter:alpha(opacity=60); /* IE */ 
-moz-opacity:0.6; /* Mozilla */ 
opacity: 0.6; /* CSS3 */
}

Dabei sind "60" und die "0.6" Angaben, die 40% Durchsichtigkeit ergeben.
Je nachdem, wie durchsichtig Du es willst, kannst Du die Werte anpassen.
Höhere Werte ergeben weniger Durchsicht.

LG

PS: Hier steht auch noch was hilfreiches dazu: http://www.w3schools.com/css/css_image_transparency.asp

[cyjo5]

Hallo,

danke für den Tip.

Mit dem gif stimmt. Hatte das im Shop erst mit der gif probiert und weil das nicht ging dann die png genommen.
Fürs Forum hab ich mich dann glatt wieder vertan und die falsche Grafik genommen.

Den Farbeintrag raus, und deine Ergänzung rein, und der Hintergrund wird wie beim Shop mit einer semitransparenten blauen Fläche überzogen.

Nur ein Problem gibt dabei noch: Der gesamte Header wird mit überzogen. Wie kann ich das ändern ? Mit padding geht's nicht.

Ach ja, kann ich das halbtransparente am Unteren Rand irgendwie ein Stück nach oben bekommen, so daß da die Grafik normal zu sehen ist (halt wie im Shop)

lg

Frank

[Crizzo]

Gib #wrapheader einfach einen Hintergrund der nicht durchscheint und den tranparenten überdeckt.

[cyjo5]

Hi,

funktioniert leider nicht. Wenn ich #wrapheader eine Grafik zuweise, wird damit auch der Bereich unter dem Buttonmenü (die Zeilen Anmelden und Dein letzter Besuch) abgedeckt. Am Zustand oben im Header ändert sich dadurch nichts.

Lege ich die Grafik in den Bereich #logodesc, habe ich zumindest nur den oberen Teil damit abgedeckt. Leider liegt das Halbtransparente über der Logografik, die neu eingefügte Grafik aber nicht. Bei einem Grafikprogramm würde ich jetzt sagen, die Logografik muß in die oberste Ebene versetzt werden.

lg

Frank

[HabNurNeFrage]

Hi,

in /styles/subsilver2/template/overall_header.html

ausschneiden: <div id="centerthis"> => dafür an gleiche Stelle eingeben: <div align="center">

finden: <div id="menubar">

füge in Zeile davor wieder ein: <div id="centerthis">

ganz unten vor den body-tag dann noch einmal hinschreiben: </div>

Dann Cache leeren

Solange Du keinen rechts/links-Überstand des halbtransparenten Bereiches neben dem Forenblock haben willst,
ist das eine Möglichkeit, den Header von der vornehmen Blässe auszusparen.
Mit dieser Methode würde ein eventueller Überstand dann unschön unterhalb des Headers einsetzen.

OT: Allerdings fand ich es schöner, als noch ein kleiner Überstand des blaen ins graue um den Forenblock zu sehen war...

Für den Abstand unten zum Fensterrand kannst Du so mal testen:

finde in /styles/subsilver2/theme/stylesheet.css

Code: Alles auswählen

#wrapfooter {
text-align: center;
clear: both;
}

ersetze mit:

Code: Alles auswählen

#wrapfooter {
text-align: center;
clear: both;
margin-bottom: 10px;
}

LG

[Talk19zehn]

Hello cyjo5,

Ach ja, kann ich das halbtransparente am Unteren Rand irgendwie ein Stück nach oben bekommen, so daß da die Grafik normal zu sehen ist (halt wie im Shop)

Du könnest versuchen mit margin-bottom zu operieren:

Code: Alles auswählen

#wrapfooter {
    clear: both;
    margin-bottom: 22px;
    text-align: center;
}

Die ID

Code: Alles auswählen

#centerthis img {
    opacity: 0.5;
}

bezieht sich ja auf auf alle img´s, da das Forum innerhalb der ID liegt. Damit sind natürlich alle Foren-Grafiken entsprechend dem Vorgabewert von 0.5 transparent.
Nur mal so gedacht:
Hast du probiert, ggf. mit einer namentlich anderen ID oder Klasse vorzugehen ( anstelle von #centerthis img )? Dies müsste doch machbar sein.

Oder du verlegst im Template die ID logodesc vor die ID centerthis, verlagerst quasi den Div-Container, und richtest die ID logodesc neu aus:

Code: Alles auswählen

#logodesc {
    background-image: url("./images/Trans0b.png");
    background-repeat: repeat;
    margin: 0 auto;
    margin-top: 13px;
    width: 70%;
}

Mit margin-top experimentiere bitte ein wenig. Der Wert für padding wäre m.E. 0. Von daher löschte ich zunächst jene Zeile.

Viele Grüße


Edit:
HabNurNeFrage war ja wieder fix...
Ich lasse mein Posting dennoch stehen.
LG

[cyjo5]

Hallo und vielen Dank für eure Hilfestellung.

Irgendwie scheine ich aber zu blöd zu sein.

@ HabNurNeFrage: Wenn ich das so mache, bleiben nur noch die beiden Zeilen mit Anmeldung und Dein letzter Besuch hinterlegt und auf 70% Breite. Der Rest ist wieder wie vorher und das Forum und der Header auf 100% Breite.
Die Sache mit dem #wrapfooter hat geklappt, Wert auf 20px eingestellt.

@ Talk19zehn: #wrapfooter hat wie grade schon erwähnt funktioniert.
Das mit der anderen ID oder Klasse ist mir (noch) zu hoch. Da bräuchte ich dann eine Schritt für Schritt Anleitung, was wo zu machen ist (halt für Dummies).
In der stylesheet.css habe ich die #logodesc an der alten Stelle rausgenommen und vor der #centerthis eingefügt. Dann habe ich die Werte nach deinen Vorgaben geändert.
Ergebnis: Der Header wird schmaler, das halbtransparente ist rechts und links daneben zu sehen und die Logografik wird immer noch überlagert. Was habe ich da falsch gemacht ?

Du hast ja geschrieben: "Oder du verlegst im Template die ID logodesc vor die ID centerthis, verlagerst quasi den Div-Container, und richtest die ID logodesc neu aus:"
In meinem Shop-System sind das zwei Dateien, eine style.css (Design) und eine mainpage.tpl.php (Template). Mit phpBB kenne ich mich noch ncht so aus, aber ich habe hier im prosilver nirgendwo etwas gefunden was nach einer sep. template-Datei aussieht.

lg

Frank

Ach ja, und noch 'ne dumme Frage: Kann ich irgendwie das Logobild etwas weiter nach links und nach unten versetzen? Wenn ja, wo und wie?