Seite 1 von 1

Automatische Anpassung

Verfasst: 30.06.2013 15:01
von Fenria
Hallo Zusammen.
Ich denke zwar das dieses Thema schon öfter behandelt wurde, kämpfe mich aber seit Wochen durch das Forum und kann einfach keine Lösung für mein Problem finden.
Ich benutze den Black Pearl Style auf der neusten PhP3 Version mit Galerie und Portal Mod.
Mein Problem ist ganz einfach folgendes:
Ich habe als Header das Top Logo auf meinem 21' Lappi so vergrößert, das es bei mir sowohl auf dem Portal als auch später im Forum einwandfrei mittig und in der gewünschen Größe erscheint.
Problem ist jetzt natürlich das sich das ganze nicht automatisch an alle Rechner von Größe und mittigkeit anpasst.
Hintergrundbilder lassen sich ja nach meinen Rescherchen im Netzt nicht Variabel stellen.
Es muss doch aber eine Möglichkeit geben das so via Code einzustellen, das sich das Forum/Portal automatisch an alle Bildschirmaüflösungen anpasst. In anderen Foren funktioniert dies doch auch.
Es wäre super nett wenn mir jemand mitteilen könnte wo und wie ich den Code abändern muss um das gewünschte Ergebnis zu erzielen. Muss dies nun bei Black Pearl in der css, der overall_header oder sonst wo gemacht werden? Und wenn wie muüsste der Code aussehen?

Der Link zu meinem Board lautet: http://www.sturm-auf-die-bastille-festival.de/hq

Für Eure Hilfe wäre ich mehr als Dankbar.

Re: Automatische Anpassung

Verfasst: 30.06.2013 16:52
von HabNurNeFrage
Hi,

wie bereits richtig bemerkt, ist es nicht ganz einfach ein formatfüllendes Bild automatisch an die Fenstergröße anzupassen.
Ein Ansatz wäre JavaScript. Ist aber unschön und funktioniert auch nur bei aktivem Scripting des Clients.

Es handelt sich bei dem Logo aber nicht um einen CSS-Background, sondern um ein normal aufgerufenes Bild.
Dabei würde ich das Bild in der Breite von ungefähr 800 Pixeln abspeichern und mittig platzieren.
Eine automatische Anpassung der Größe erfolgt dabei aber nicht. Ist der Bildschirm kleiner, kommt der Scrollbalken.

Wenn man es als CSS-Background einfügt, kann man es mit CSS3 dem Viewport bzw. dem Container anpassen.
Hier kann man diese Funktionalität ausprobieren: http://www.w3schools.com/cssref/playit. ... round-size

Allerdings fällt für diesen Fall dann die Verlinkbarkeit mit der Startseite flach, sodass man dafür dann noch eine durchsichtige Grafik darüberlegen müsste, die dann verlinkt ist und die Sicht auf den Hintergrund trotzdem ermöglicht.

LG

Re: Automatische Anpassung

Verfasst: 30.06.2013 17:39
von Kirk
Lies dir das mal durch viewtopic.php?p=1241992#p1241992

Re: Automatische Anpassung

Verfasst: 30.06.2013 18:48
von Talk19zehn
Nun, das wird mit der jetzigen Grundgestaltung der Grafik jedoch schwierig, da sie Text enthält. Besser wäre es, die Texte bei Anwendung lt. Link dann separat einzubinden. Und ja, leider trifft man immer wieder auf "Breitbild-Grafiken", die auch noch Texte beinhalten. :wink:


In Anlehnung: reine Beispiele
http://www.ongray-design.de/forum/viewt ... =339#p2107
http://www.ongray-design.de/forum/viewt ... Logo#p2112
http://www.ongray-design.de/forum/viewt ... eline#p710


Ich komme rein rechnerisch für eine 800er-Auflösung auf rd. 740px in der Breite. Das Bild ist zwar 800px Breit, wird jedoch auf 1400px in der Breite skalliert, was ihr sicherlich gesehen hattet. Demnach müsste wohl zumindest mit einer kleineren Grafikgröße unter Beachtung der Seitenverhältnisse vorgegangen werden. Eine passende Hintergrundfarbe, die sich im Container an das Bild "anschmiegt" kann dabei sodann auch sehr hilfreich sein und suggerieren, dass die Grafik sich anpasst(e). :wink:

Evtl. hilft max-width ????? Bin mir bei dem Style jedoch unsicher .... leider ist´s mir nicht möglich alle CSS-Angaben mittels Firebug im Forum von Fenria zu untersuchen. :(

Viele Grüße

Re: Automatische Anpassung

Verfasst: 30.06.2013 19:16
von Fenria
Hier zur Vereinfachung mal die css. Kopiert aus Styles/Black_Pearl/theme/stylesheet.css

https://www.phpbb.de/support/pastebin.p ... iew&s=1288


Ich für meinen Teil resigniere langsam...Danke für Eure Hilfe

Re: Automatische Anpassung

Verfasst: 30.06.2013 19:30
von Fenria
PS: Im Übrigen ist auch der Text in unserem Logo eine Grafik. Da beides, Sowohl Bild wie auch Text zu einer Grafik zusammengeführt wurden und erst dann als Bild/Logo in das Forum exportiert wurden via Styles/Black_Pearl/Imageset/sidelogo_smal.

Re: Automatische Anpassung

Verfasst: 30.06.2013 19:42
von Talk19zehn
Ja, richtig:
Fenria hat geschrieben:PS: Im Übrigen ist auch der Text in unserem Logo eine Grafik. Da beides, Sowohl Bild wie auch Text zu einer Grafik zusammengeführt wurden und erst dann als Bild/Logo in das Forum exportiert wurden via Styles/Black_Pearl/Imageset/sidelogo_smal.
Hattest du dich mit all den Alternativen bereits befasst? Das ging ja fix. Und nichts passendes dabei? Okay....
Verkleinere deine Grafik sodann proportional ( Seitenverhältnis beachten ) und richte sie aus. Beachte kleinere Auflösungen, wenn du die Seite im Anschluss erneut betrachtest.

Link zum Style, zum entsprechenden Download gibt´s sicherlich? Stelle ihn doch bitte bereit. Danke.


LG


Edit:
Kann es zutreffend sein, dass du weitere CSS-Angaben eingebunden hast? Firebug zeigt mir nämlich nicht alle CSS-Konstrukte zum testen an. Das ist mir etwas suspekt, um direkte Hilfeansätze anzubieten.

Edit 2:
01.07.2013
Wie ich sehe, akallierst du die Grafik nun auf 800px in der Breite. Duch die Abstände reicht das jedoch für kleine Auflösungen noch nicht so ganz.
BTW:
W3C zeigt Fehlerchen, die du bereinigen solltest. :wink: