phpBB.de • Dreiteiliger Hintergrund - prosilver

Seite 1 von 4

Dreiteiliger Hintergrund - prosilver

Verfasst: 28.04.2011 19:15

von FrostAgent

Moin,

ich habe zurzeit ein Testboard laufen, dort möchte ich gerne an einem Design arbeiten, als Grundlage dafür, habe ich das vorinstallierte prosilver genommen.
Derweil bin ich unter anderem damit beschäftigt den Hintergrund in drei Teile einzuteilen, sprich Header, Mittelteil und Footer, jedoch funktioniert dies nicht wie gewünscht.

Ich habe bereits die Grafiken für den Header, den Mittelteil und den Footer fertig, muss ich sie bloß nurnoch in das Design implementieren, da die Grafiken allerdings etwas größer sind als der dafürvorgesehne Platz gestaltet dies sich nicht so schön.

Per Firebug habe ich bereits testweise die Grafiken einmal eingesetzt, bloß, wie gesagt der Platz ist bereits irgendwo auf eine bestimmte Größe festgelegt. Ich habe schon versucht den Hintergrund in einer einzelnen Grafik einzubauen, allerdings sieht das relativ unschön aus und am Ende der Seite wiederholt sie sich, wenn die Seite mal etwas länger ist, ich möchte die Bilder fest oben am Header und unten am Footer fest verankern, sieht sonst ziemlich unschön aus.

Das aktuelle Problem ist, wenn ich die Grafiken einfüge werden sie in einen vorgefertigten Rahmen einfach eingeschoben und es passt optisch einfach nicht, ich möchte, dass sich die Bilder frei entfalten können.

Der Header soll bis Beginn der Forentabellen gesetzt sein und der Footer mit Ende der Forentabellen, wie kann ich das festlegen?
Ansonsten wiederholt es sich ja in einer einzigen Grafik, wenn eine Seite mal etwas länger als das Bild ist.

Habe bereits etwas herumprobiert und tu es immer noch, aber irgendwie komme ich nicht zum gewünschten Ziel, hier nochmal ein Link zum Testboard.

Ich hoffe ihr könnt mir da etwas weiterhelfen und versteht mein Anliegen.

Beste Grüße!

Re: Dreiteiliger Hintergrund - prosilver

Verfasst: 28.04.2011 23:45

von DaSasha

Hallo Frost Agent

erstmal muss ich sagen das ein Bild im Mittel teil in dem Forum einfach nicht reinpasst da es maximal 5 Pixel frei ist zwischen den Foren und man somit auch kein Bild erkennen kann.

Erstmal um den Hintergrund wegzubekommen musst du dir folgene Zeilen anschauen in der .css datei

Code: Alles auswählen

#wrap {
    background: none repeat scroll 0 0 #C5D0FC;
    border: 2px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0 auto;
    padding: 0 5px;
    width: 1200px;

none repeat ist dort überflüssig weil eine Farbe den Hintergrund füllt.
Füge da das Bild ein welches du haben möchtest mit background-image.

jetzt kopierst du die zeilen und setzt es darunter das du 2 mal das gleiche hast.
am unteren Teil änderst du

Code: Alles auswählen

#wrap {

in

Code: Alles auswählen

#wrap2 {

und natürlich das bild welches im header soll.
jetzt gehst du in die overall_header.html und suchst dort #wrap
dies änderst du in #wrap2. jetzt speichern, hochladen und den chache leeren

Vorsicht: Hab ich nicht getestet, also bitte ein backup machen der Datein

edit: Hab gesehn du hast ein Fussball Forum, der Name von Nür...berg darf laut dem FussballClub nicht offiziel ausgeschrieben werden und auch das Bild darf nicht verwendet werden. Kenne jemand der schon eine Email von dennen bekommen hat und auch es entfernen musste

Re: Dreiteiliger Hintergrund - prosilver

Verfasst: 29.04.2011 10:26

von FrostAgent

Moin,

danke hat geklappt, beim Footer musste ich das zwar noch ein klein wenig anders machen, aber nach ein wenig Tüftelei habe ich das nun auch hinbekommen.

Und danke für den Tipp mit N..berg, werds mir merken.

Re: Hintergrundbild - Prosilver / Ausrichtung

Verfasst: 29.04.2011 11:06

von Talk19zehn

Hello,

im IE sehe ich u.a. noch den Ursprung des Site-Logo-gifs im Container <div class="headerbar"> . Bei einer Auflösung von 1024px x 768px muss ich nach rechts scrollen und die Navigation ragt ohne Mouseover bereits ein wenig in den Forenbereich. Schalte ich nun noch die Sidebar im FF-Browser ein, sind 1000px in der Breite offenbar bereits zu breit bemessen?

Beste Grüße

Re: Dreiteiliger Hintergrund - prosilver

Verfasst: 29.04.2011 13:05

von FrostAgent

Moin,

danke für die Bemerkung, das Logo habe ich jetzt entfernt, bei der Breite sollte ich dann am Besten nicht mit absoluten Beträgen arbeiten oder? Ich habe die Breite im wrap jetzt mal in Prozentangaben, anstelle von Pixel angegeben, bezweifle aber gerade ob das denn schon ausreichend ist, denn wenn ich den Browser mal etwas mehr zusammenziehe "schrumpft" die Seite nicht mit, was muss ich denn da noch alles anpassen?

Re: Hintergrund - prosilver

Verfasst: 30.04.2011 12:00

von Talk19zehn

Hello FrostAgent, reine Gedanken - nicht gänzlich getestet.

Mir wird jene Konstruktion angezeigt:

Code: Alles auswählen

#wrap2 {
    background-image: url("styles/prosilver/theme/images/header_sticker1.png");
    background-repeat: no-repeat;
    margin: 0 auto;
    padding: 0 5px;
    width: 1200px;
}

Was passiert, wenn du die Original ID Wrap ( ohne 2 ) änderst?

von:

Code: Alles auswählen

/* Main blocks
---------------------------------------- */
#wrap {
	padding: 0px 20px;
	min-width: 650px;
}

auf: Beispiel

Code: Alles auswählen

/* Main blocks
---------------------------------------- */
#wrap {
padding: 0px 20px 0px 20px;
width: 94%;
margin: 0 auto;
}

Falls du mit dem Wert 20px nicht hinkommst, einfach mal ausprobieren, was geschieht, wenn du 30px oder gar 40px ansetzt. Überprüfe bitte dabei stets weitere Ansichten im Forum selbst (persönlicher Bereich, PNs.... etc.).

Grafik derzeit: 1.600px × 300px (Skaliert zu 1.008px × 189px)
Im nächsten Schritt Deine Grafik noch ein wenig anpasst/skallierst bspw. --> ca. width = 800px und die ID Wrap2 wie folgt verwendest:

Code: Alles auswählen

#wrap2 {
background-image: url("styles/prosilver/theme/images/header_sticker1.png");
background-repeat: no-repeat;
margin: 0 auto;
}

In der overall_header.html den Versuch unternimmst, das Konstrukt zu kombinieren(?):

Code: Alles auswählen

<div id="wrap">
		<div id="wrap2"></div>

usw. usw.

Meiner Meinung nach wäre dann in Folge der Abstand --> margin: 0 auto ---> von oben <-- in der ID Wrap ( ohne 2 ) auf die Grafikhöhe erneut auszulegen: Beispiel Grafikhöhe 120px zzgl. 1-2px.

Code: Alles auswählen

#wrap {
padding: 0px 20px 0px 20px;
width: 94%;
margin: 122px auto;
}

Das Problem, dass man als Betrachter wegen der Transparents nicht alles lesen kann, sollte sich eigentlich legen, wenn du nur die ID Wrap2 in den transparenten Container legst.
Eine augenfreundliche Hintergrundfarbe regelt dies sicherlich zusätzlich.

Wenn du noch die Abstände zwischen den Kategorien ein wenig erhöhen möchtest:
Suche ----> .forabg und ersetze/ergänze/erhöhe dort inhaltlich margin-bottom auf die gewünschte Abstandshöhe.
Beispiel

Code: Alles auswählen

margin-bottom: 16px;

Wie gesagt, ich habe es nicht auf deiner Konstruktion "ausgetestet". Es mag zutreffend sein, dass ich mich in deiner Konstellation verlaufen haben könnte, daher ohne Gewähr. Denn auch Firebug zeigt mir nicht unmittelbar alle Konstruktionen im Zusammenhang an.

Ggf. hilft es dir bei deinen Überlegungen und Einsatzmöglichkeiten von CSS und Co

weiter.

Viel Glück und beste Grüße

Re: Dreiteiliger Hintergrund - prosilver

Verfasst: 30.04.2011 20:52

von FrostAgent

Moin,

danke, also die Foren-Tabellen habe ich jetzt soweit, dass sie sich auch mit zusammenziehen, wenn ich das Browser-Fenster zusammenziehe, allerdings macht der Header nocht nicht ganz, allerdings schwindet der Header mit der Zeit, er wird leider nicht mit "zusammengezogen".

Ein weiteres Problem, der Hintergrund überschneidet sich ziemlich unschön, am oberen Bildrand kann man nun feststellen, dass das Holzmuster einfach nicht mehr passend übereinander setzt, kann man dies mittles CSS nicht auch irgendwie in den Griff bekommen ohne gänzlich auf einen anderen bg zurückgreifen zu müssen?

Im overall_header habe ich jetzt einfach vor wrap2 noch einen wrap div-Container gesetzt, sollte ja denk ich kein Problem sein (?)

Code sieht derzeit so aus:

Code: Alles auswählen

#wrap {
	padding: 0px 20px 0px 20px;
	width: 95%;
	margin: 0 auto;
	
	background-image: url("./images/bg_holzmuster.jpg");
	#myBox 
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;


}
/* Header*/
#wrap2 {
	width: 75%;
	margin: 0 auto;
	padding: 0px 20px 0px 20px;
	background-image: url("./images/fansfrenzy_header.png");
	background-repeat:no-repeat;

}

Dann noch eine Frage, beim Arbeiten am overall_header etc. ist mir irgendwie der 'Pfad' verloren gegangen, was ich meine sind diese Links:
[ externes Bild ]
Hat eventuell jemand diesen Code-Snippet parat, damit ich den Pfad wieder einfügen kann?

Re: Dreiteiliger Hintergrund - prosilver

Verfasst: 01.05.2011 11:09

von Talk19zehn

Hello,

du hast doch das Hintergrundbild "Grauer Lattenzaun" bereits hier

definiert:

Code: Alles auswählen

html, body {
    background-image: url("styles/prosilver/theme/images/bg_holzmuster.jpg");
    color: #EEEEEE;
}

Und fügst es im body --> unter wrap noch einmal

Code: Alles auswählen

#wrap {
    background-image: url("styles/prosilver/theme/images/bg_holzmuster.jpg");
usw. usw.

hinzu, so dass es zu der Überlappung kommt. Diese Anweisung kannst du an der Stelle löschen.

So sieht dein oberer Bereich des Forums bei mir auf dem Netbook aus: 1024x768
[ externes Bild ]
Das Logo ist m.E. mit 1000px immer noch zu groß. Du gewinnst, wenn du es auf rd. 800px in der Breite ausgibst. Es ist einfach professioneller, denke ich. Weniger ist eben manchmal mehr...

ich weiß nicht, was du mit "Bildschirm zusammen ziehen" meinst. Es sind m.E. andere Funktionen, die nicht unmittelbar mit der Auflösung zu tun haben müssen: Vgl. bitte auch u.a. Zoom oder Schriftgradänderung etc. je Browser. Das sollte natürlich auch gut funktionieren. In aller Regel können die Browser das ausrichten. Die Schriftgradänderung finde ich derzeit auf deiner Seite nicht mehr.

Einen Homepage Resolution Tester findest du bspw. u.a. auf onlyfree . de

Code: Alles auswählen

http://www.onlyfree.de/generatorresolution.php

Oder du stellst deine eigene Bildschirmauflösung um, um selbst zu testen, wie andere Auflösungen aussehen.

Das AddOn ist bei der Überprüfung auch sehr nützlich:

Web Developer :: Firefox Add-ons

The Web Developer extension adds various web developer tools to a browser.
https://addons.mozilla.org/de/firefox/ ... -developer

Wenn dir Zeilen oder Anweisungen verloren gegangen sind, vergleiche besser das jeweilige Verzeichnis mit dem Original.

FrostAgent hat geschrieben:Moin,
...(...)... allerdings schwindet der Header mit der Zeit, er wird leider nicht mit "zusammengezogen".

Reiner Erfahrungswert: Das hört sich an einem nicht geschlossenem Div oder falsch verschachtelten Div bzw. ggf. nach unterschiedlichen Prozentangaben ( bitte daher kontrollieren) oder gar dem Versäumnis, den Cache zu leeren, an??? ( Vorherige Sicherung nicht vergessen ).

Die runden Ecken, sehe ich bspw. im Firefoxbrowser nicht. Das liegt ggf. daran, dass die Abstände nicht ausgerichtet sind? Denn der Firefoxbrowser sollte eigentlich in der Lage sein, diese auszugeben. Der IE 6 bis 8 zeigt auch keine "eckigen Ecken" an.

Wenn du nun deinem Forum einen Rahmen mit runden Ecken geben möchtest, würde ich es folgendermaßen lösen:

CSS-Anweisung in der common.css hinzufügen. Die Hintergrundfarbe und den Innenabstand habe ich mal auskommentiert.

Code: Alles auswählen

/* CSS 3 Runde Ecken 
---------------------------*/
.forenrahmenrundecken {
border: 6px solid #00046A;
/*background-color: #CCCCCC;
padding: 20px 25px 20px 25px;*/
-moz-border-radius: 10px;
-khtml-border-radius: 30px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Da ich die Klasse der id Wrap zugewiesen habe, so dass die Abstände bzw. die Hintergrundfarbe greifen müsste, die im Wrap in meinem Falle

Code: Alles auswählen

#wrap {
	padding: 15px 25px;
	width: 94%;
	margin: 0px auto;
}

definiert ist. Ausgegeben hab ich das in der overall_header.html wie folgt:

Code: Alles auswählen

<div id="wrap" class="forenrahmenrundecken">
usw. usw.

Probiere es einfach mal aus. Sicherung bitte nicht vergessen. Es kann sein, dass mit Ausgabe der "runden Ecken" erneute CSS-Abstandsregelungen oder andere Veränderungen getroffen ( Breite des Forums uvm. ?) werden müssen. Von Fall zu Fall sozusagen...

.

Offenbar fehlen im Tabmenü ( neue Klasse? ) IF-Anweisungen und ein separater Button? Das können wir ja später noch einmal gern betrachten.
Nach den gefloateten (Tab)Elementen sollte meiner Auffassung besser gecleart werden.

Code: Alles auswählen

<div style="clear: both;"></div>

Allerbeste Grüße

Re: Dreiteiliger Hintergrund - prosilver

Verfasst: 01.05.2011 12:05

von FrostAgent

Moin,

das Überlappen habe ich jetzt raus, das Sprichwort doppelt hält besser hat hier nicht unbedingt zugetroffen.

Ich habe die Grafik jetzt auch mal auf 800px Breite verkleinert, allerdings habe ich jetzt das Problem, dass die Grafik nicht mehr zentriert ist, die vorher so große Breite hat dies ja quasi automatisch erledigt, zumindest bei meiner Auflösung.
Mit text-align: center in der css-Datei oder <div id="wrap2" align="center"> im overall_header bekomme ich das Bild leider auch nicht in die Mitte gerückt, bloß der textliche Inhalt der Forentabellen wird zentriert, darin liegt leider auch nicht mein Anliegen.

Muss ich den header vielleicht ganz explizit im overall_header aufführen, damit ich ihn zentrieren kann, sprich mit <img src..>, dann wäre eine Zentrierung ja besser möglich?

Das Tabmenü in der overall_header sieht derzeit so aus, nachdem ich deinen Screenshot gesehen ist mir das Fehlen von if-Anweisungen auch bewusst geworden, der Moderationsbereich etc. bei Gästen angezeigt wird, logischerweise sollen diesen nur Mods angezeigt bekommen.

Code: Alles auswählen

		<div id="tabs">
     <ul>
          <li<!-- IF SCRIPT_NAME == 'portal' --> class="activetab"<!-- ENDIF -->><a href="{U_PORTAL}"><span>{L_PORTAL}</span></a></li>
          <li<!-- IF SCRIPT_NAME == 'index' or SCRIPT_NAME == 'viewforum' or SCRIPT_NAME == 'viewtopic' --> class="activetab"<!-- ENDIF -->><a href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
          <!-- IF S_DISPLAY_SEARCH --><li<!-- IF SCRIPT_NAME == 'search' --> class="activetab"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
          <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF SCRIPT_NAME == 'memberlist' --> class="activetab"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
          <li<!-- IF SCRIPT_NAME == 'faq' --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a></li>
		  <li<!-- IF SCRIPT_NAME == 'football' --> class="activetab"<!-- ENDIF -->><a href="{U_FOOTBALL}"><span>{S_FOOTBALL_NAME}</span></a></li>
		  <li<!-- IF SCRIPT_NAME == 'pm' --> class="activetab"<!-- ENDIF -->><a href="{U_PRIVATEMSGS}"><span>{PRIVATE_MESSAGE_INFO}</span></a></li>
		  <li<!-- IF SCRIPT_NAME == 'profile' --> class="activetab"<!-- ENDIF -->><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><span>{L_PROFILE}</span></a></li>
		  <li<!-- IF SCRIPT_NAME == 'login_logout' --> class="activetab"<!-- ENDIF -->><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a></li>
		  <li<!-- IF SCRIPT_NAME == 'mcp' --> class="activetab"<!-- ENDIF -->><a href="{U_MCP}"><span>{L_MCP}</span></a></li>
		  
		  
       </ul> 
	   
    </div>

Die runden Ecken habe ich erstmal ganz rausgenommen, waren zuletzt auch wie du schon sagst nicht sichtbar, hatte lediglich vergessen den Code aus der CSS-Datei wieder zu entfernen, eventuell bau ich sie zu einem späteren Zeitpunkt einmal ein, dann werde ich deinen Tipp berücksichtigen.

Re: Dreiteiliger Hintergrund - prosilver

Verfasst: 01.05.2011 13:55

von Talk19zehn

Hello,

das ist der Begin deiner Forums in der overall.header_html: <div id="wrap"> --> hier hast du 95%

Code: Alles auswählen

#wrap {
    margin: 0 auto;
    padding: 0 20px;
    width: 95%;
}

Im Wrap2 hingegen hast du zur Zeit 75%

Code: Alles auswählen

#wrap2 {
    background-image: url("styles/prosilver/theme/images/ff_header.png");
    background-repeat: no-repeat;
    margin: 0 auto;
    padding: 0 20px;
    width: 75%;
}

Stelle nun die Prozentwerte einheitlich auf 95% ein und teste erneut. Denn 75% von 1024 sind recht knapp bemessen...

Bei 75% würde zudem die Zeile "Tabmenü" umbrochen werden. Und für das Portal ist der Wert auch einfach

zu gering?

Die jetzige obige "Logo-Ausgabe", auch in Verbindung mit der Suchfunktion passt sich doch schon recht optimal an. Das Logo muss nicht in dem Sinne zentriert sein ( meine ich mal so salopp ). Für die Zwecke der individuellen Anpassung an die Auflösungen, ist das aus meiner Sicht zweckmäßig gelöst. Für mein visuelles Empfinden entlastet es auch den Blick, -- wirkt nicht so standardisiert und darum eher ansprechend.

Muss ich den header vielleicht ganz explizit im overall_header aufführen, damit ich ihn zentrieren kann, sprich mit <img src..>, dann wäre eine Zentrierung ja besser möglich?

Ja klar, dies ginge natürlich auch. Die Ausgabe erfolgt dann bspw. oberhalb von <div id="wrap"> oder nach </head> .... Dazu gibt es sicherlich etliche Informationen hier im Board.

Beispielsweise:

Code: Alles auswählen

<div style="text-align:center; margin-bottom:6px;"><a href="{U_INDEX}" title="{L_INDEX}"><img src="./styles/prosilver/theme/images/logo.png" alt="Logo" width="558" height="122" /></a><p class="skiplink"><a href="#start_here">{L_SKIP}</a></p></div>

Das Beispiel hat natürlich weitere Umbaumaßnahmen zur Folge.

Irgendwie habe ich jedoch den Eindruck, dass Container in deinem Forum nicht geschlossen sind... ( grübel )
Zum vergleichen findest du hier die Originalpakete: http://downloads.phpbb.de/pakete/