[phpBB2] flexible Breite des Forums abhängig von Fenstergröße mit Maximalbreite

[Tierfreund-97]

Hallo!

Ich wollte meinem Forum eine flexible Breite zu ordnen abhängig von der Größe des Fensters. Das geht ja über die width-Angabe mit % dahinter, allerdings entspricht dies nicht ganz meinen Vorstellungen.

Ich möchte diese flexible Breite so haben, dass das Forum bei einem Widescreen mit sagen wir mal über 1500px Breite immer 1000px breit ist. Wenn der Screen allerdings nur 1024px breit ist, soll sich das Forum flexibel an die Größe des Fensters anpassen (Bilder würden dann auch angepasst werden). Das Forum soll also immer maximal 1000px breit sein, selbst wenn der Screen (übertrieben) 5000px Auflösung hat. Wenn der Screen aber weniger als beispielsweise 1200px hat, soll sich das Forum immer an die aktuelle Breite des Screens anpassen.

Zum besseren Verständnis:
wenn Fensterbreite kleiner als 1200px = Forenbreite flexibel 100%
wenn Fensterbreite größer als 1200px = Forenbreite fest auf 1000px

Folgende Codes hat meine google-Recherche ausgespuckt; ich hab sie angepasst (mit Testwerten) und eingebaut, aber irgendwie hat nichts funktioniert:

Code:

@media all and (max-width: 800px)
{
    #i_logo { width:100% !important; }
   .bodylinewidth { width:100% !important; }
}

Code:

$(document).ready(function() {

if ((screen.width>1024)) {
    $(".bodylinewidth").css('width', '1000px');
    $("#i_logo").css('width', '1000px');
}
elseif ((screen.width<=1024))  {
    $(".bodylinewidth").css('width', '100%');
    $("#i_logo").css('width', '100%');
}
});

Kann mir jemand weiter helfen?

Liebe Grüße,
Tierfreund-97

[Asciugamano]

Guten Abend Tierfreund-97,

wie ich sehe, hast du bereits fleissig mit Javascript herumexperimentiert. Das ist aber bei deinem Problem gar nicht nötig, da es sich mit CSS lösen lässt
(Im Allgemeinen gilt: Wenn man auf Javascript verzichten kann, sollte man es lieber tun. Chrome akzeptiert es nicht einmal mehr wirklich.)

Der CSS-Code sieht folgendermassen aus:

Code:

.bodylinewidth {
  width: 100%;
    max-width: 1000px; }

Falls du die Breite des Logos auch noch so anpassen möchtest, kannst du nach .bodylinewidth noch ,#i_logo schreiben.

Code:

.bodylinewidth, #i_logo {
 width: 100%;
   max-width: 1000px; }

Kurze Erklärung: width ist die Breite, die normalerweise verwendet wird. Würden die 100% nun jedoch eine Breite, die größer als 1000px wäre, produzieren, bleibt es automatisch bei 1000px, der maximalen Breite, definiert durch max-width. Das greift nun nicht erst exakt bei einer Breite von 1200px, aber ich hoffe, es geht so okay für dich.

Liebe Grüße
Asciugamano

[Tierfreund-97]

Tut mir schrecklich leid, dass ich jetzt erst antworte. Es kam leider etwas dazwischen.

Vielen Dank für die Antwort! Ich kannte die Variable max-width schon vorher, nur bin ich nicht auf die Idee gekommen, sie anzuwenden. Wahrscheinlich war das dann doch schon zu offensichtlich. Danke nochmal.

Liebe Grüße,
Tierfreund-97