ilch Forum » Allgemein » HTML, PHP, SQL,... » Topliste BG mobile Ansicht falsch !

Geschlossen
  1. Di. 07.04.2020 10:20 Uhr #1
    User Pic
    xRebellx Mitglied
    Registriert seit
    07.08.2012
    Beiträge
    537
    Beitragswertungen
    32 Beitragspunkte
    Moin Leute,

    habe in unserer Top 100 Clanliste ein BG eingebaut auf dem desktop wird der BG auch richtig angezeigt aber auf dem Handy wird der BG nur oben angezeigt habe schon getestet und getestet aber finde keinen passenden Code dafür.kann mir einer da helfen wie der Code sein muß damit der BG auch auf dem Handy richtig angezeigt wird ?

    hier mal die stylecs
    body {margin-left: 5px;margin-top: 5px;margin-right: 5px;margin-bottom: 5px;background-color: #FFFFFF;background-image: url("https://up.picr.de/38234475vn.png");
  background-repeat: no-repeat;
  background-attachment: fixed;background-size: 100%;
  h1 {margin:100px; padding:100px;}
h1 {margin:0px; padding:15px;}
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;}(img/back.gif);}
h1 {margin:0px; padding:15px;}
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;}
table { background-color:#FFFFFF}
td { background-color:#FFFFFF}
.new {color: #FF0000; font-weight:bolder;}
.banner {padding:4px; border:0px;}
.description { font-size:12px; padding-left:4px; padding-top:0px; padding-right:4px; padding-bottom:4px}
.stats {font-size: 10px; padding-left:5px; padding-top:2px; padding-right:5px; padding-bottom:2px}
a {font-size: 12px;color: #990000;}
a:visited {color: #990000;}
a:hover {color: #FF9900;}
a:active {color: #FF0000;}
a.members {font-size: 12px;color: #000000;}
a.members:visited {color: #000000;}
a.members:hover {color: #000000;}
a.members:active {color: #000000;}
a.sitetitle {font-size: 12px;color: #990000; padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:0px}
a.sitetitle:visited {color: #990000;}
a.sitetitle:hover {color: #FF9900;}
a.sitetitle:active {color: #FF0000;}
a.topsitemenu {font-size: 12px;color: #990000; padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:0px}
a.topsitemenu:visited {color: #990000;}
a.topsitemenu:hover {color: #FF9900;}
a.topsitemenu:active {color: #FF0000;}
a.topmenu {font-size: 12px;color: #990000; padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:0px}
a.topmenu:visited {color: #990000;}
a.topmenu:hover {color: #FF9900;}
a.topmenu:active {color: #FF0000;}
td.border { border-color: #CC0000; border-right-color:#CC0000; border-style:solid;}
table.border {border-color: #CC0000; border-right-color:#CC0000; border-style:solid;}


    Hier mal die Ansicht mit Handy gesperrtes Bild


    verwendete ilch Version: 2.1.x

    betroffene Homepage: toplist.freiezocker.de/


    Zuletzt modifiziert von xRebellx am 07.04.2020 - 10:24:31
    freiezocker.de/
    0 Mitglieder finden den Beitrag gut.
  2. Di. 07.04.2020 10:39 Uhr #2
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    939
    Beitragswertungen
    117 Beitragspunkte
    probiere 

    -webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-webkit-background-position:center;
-moz-background-position:center;
background-position:center;


    Slipi
    slipi.at/
    0 Mitglieder finden den Beitrag gut.
  3. Di. 07.04.2020 10:57 Uhr #3
    User Pic
    xRebellx Mitglied
    Registriert seit
    07.08.2012
    Beiträge
    537
    Beitragswertungen
    32 Beitragspunkte
    habe ich eingebaut aber dann funzt das scrollen nicht mehr und links die Hände sind nicht zu sehen ?

    So noch mal den "alten" code getestet und das eigenartige daran ist halte ich mein Handy senkrecht ist der BG nur oben zu sehen aber halte ich das Handy horizontal wird der BG korekt angezeigt :-) Oh Mann wo liegt da der Fehler ?


    Zuletzt modifiziert von xRebellx am 07.04.2020 - 11:55:50
    freiezocker.de/
    0 Mitglieder finden den Beitrag gut.
  4. Fr. 10.04.2020 02:15 Uhr #4
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    939
    Beitragswertungen
    117 Beitragspunkte
    Hallo

    ändere background-size:100% in background-size:cover, dann sollte der BG auch in der Mobilen version den body ausfüllen, füge auch eine position hinzu. 

    -webkit_background-size:cover;
-moz-background-size:cover;
background-size:cover;
-webkit-background-position:center;
-moz-background-position:center;
background-position:center;


    Slipi
    slipi.at/
    0 Mitglieder finden den Beitrag gut.
  5. Fr. 10.04.2020 07:10 Uhr #5
    User Pic
    xRebellx Mitglied
    Registriert seit
    07.08.2012
    Beiträge
    537
    Beitragswertungen
    32 Beitragspunkte
    ZitatZitat geschrieben von Slipi
    Hallo

    ändere background-size:100% in background-size:cover, dann sollte der BG auch in der Mobilen version den body ausfüllen, füge auch eine position hinzu. 

    -webkit_background-size:cover;
-moz-background-size:cover;
background-size:cover;
-webkit-background-position:center;
-moz-background-position:center;
background-position:center;


    Slipi


    Habe ich gemacht aber dann sind die Hände Links weg . beste ist wir treffen uns mal im Ts3 ?
    freiezocker.de/
    0 Mitglieder finden den Beitrag gut.
  6. Fr. 10.04.2020 08:06 Uhr #6
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    Wenn die Hände weiter zu sehen sein sollen, dann einfach die Position auf Links setzen.

    background-size: cover;
    background-position: left;

    developer.mozilla.org/de/docs/Web/CSS/background-size
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  7. Fr. 10.04.2020 09:18 Uhr #7
    User Pic
    xRebellx Mitglied
    Registriert seit
    07.08.2012
    Beiträge
    537
    Beitragswertungen
    32 Beitragspunkte
    Moin Lord|Schirmer,

    Habe das auch gerade getestet aber funktioniert auch nicht , nu ja aber Danke für Eure hilfe.
    freiezocker.de/
    0 Mitglieder finden den Beitrag gut.
  8. Fr. 10.04.2020 10:25 Uhr #8
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.629
    Beitragswertungen
    1192 Beitragspunkte
    In Bezug auf dein Hintergrundbild sollen nur folgende background Angaben im body deiner css stehen. 

    background-image: url("https://freiezocker.de/application/modules/media/static/upload/5e8c6391a565638234475vn.png");
background-attachment: fixed;
background-size: cover;


    Habe es auf deiner Seite getestet.
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  9. Fr. 10.04.2020 11:18 Uhr #9
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Das Problem ist das es Responsiv nicht mit einer class geht, ich würde den Body 2 oder mehr mal anlegen und die Angaben dann unter verschiedenen Media bedingungen lösen, einfach z.b ein anderes Bild ( das gleiche nur angepasst auf mobile oder tbalett )

    z.b 

    @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  10. Fr. 10.04.2020 11:19 Uhr #10
    User Pic
    xRebellx Mitglied
    Registriert seit
    07.08.2012
    Beiträge
    537
    Beitragswertungen
    32 Beitragspunkte
    Also habe jetzt mal folgenden Code eingebaut 
    body {margin-left: 5px;margin-top: 5px;margin-right: 5px;margin-bottom: 5px;background-color: #FFFFFF; background-image: url("https://freiezocker.de/application/modules/media/static/upload/5e8c6391a565638234475vn.png");
background-attachment: fixed;
background-size: cover;
background-position: left;
  h1 {margin:100px; padding:100px;}
h1 {margin:0px; padding:15px;}
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;}(img/back.gif);}
h1 {margin:0px; padding:15px;}
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;}
table { background-color:#FFFFFF}
td { background-color:#FFFFFF}
.new {color: #FF0000; font-weight:bolder;}
.banner {padding:4px; border:0px;}
.description { font-size:12px; padding-left:4px; padding-top:0px; padding-right:4px; padding-bottom:4px}
.stats {font-size: 10px; padding-left:5px; padding-top:2px; padding-right:5px; padding-bottom:2px}
a {font-size: 12px;color: #990000;}
a:visited {color: #990000;}
a:hover {color: #FF9900;}
a:active {color: #FF0000;}
a.members {font-size: 12px;color: #000000;}
a.members:visited {color: #000000;}
a.members:hover {color: #000000;}
a.members:active {color: #000000;}
a.sitetitle {font-size: 12px;color: #990000; padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:0px}
a.sitetitle:visited {color: #990000;}
a.sitetitle:hover {color: #FF9900;}
a.sitetitle:active {color: #FF0000;}
a.topsitemenu {font-size: 12px;color: #990000; padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:0px}
a.topsitemenu:visited {color: #990000;}
a.topsitemenu:hover {color: #FF9900;}
a.topsitemenu:active {color: #FF0000;}
a.topmenu {font-size: 12px;color: #990000; padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:0px}
a.topmenu:visited {color: #990000;}
a.topmenu:hover {color: #FF9900;}
a.topmenu:active {color: #FF0000;}
td.border { border-color: #2E2EFE; border-right-color:#2E2EFE; border-style:solid;}
table.border {border-color: #2E2EFE; border-right-color:#2E2EFE; border-style:solid;}


    und auf dem Handy sieht das dann so aus gesperrtes Bild

    die Hände sind nicht ganz Links wie auf dem Desktop.
    freiezocker.de/
    0 Mitglieder finden den Beitrag gut.
  11. Mo. 13.04.2020 16:53 Uhr #11
    User Pic
    Ahrtas Moderator
    Registriert seit
    17.12.2007
    Beiträge
    2.368
    Beitragswertungen
    210 Beitragspunkte
    @xRebellx

    Wenn du das Smartphone horizontal oder vertikal hälst, dann kehrt sich die Auflösung um z.B. Vertikal 400*600 auf Horizontal 600*400.

    Wenn du die Desktop-Anzeige auch auf dem Smartphone 1:1 duplizieren willst, so dass dein Hintergrund (die Hände) links von deiner Topliste zu sehen ist, musst du die Breite deiner Topliste generell verkleinern so das auch Platz für den sichtbaren Hintergrund entsteht - ansonsten wird dein Hintergrund immer hinter, oben oder unter deinem Content sein. zwinker

    Du kannst auch sagen, dass deine Topliste 70% der verfügbaren Breite einnimmt und die restlichen 30% links von deiner Tabelle leer bleibt.

    Dann musst du deinen Inhalt rechts positionieren.

    Wenn du dem "body" float:right hinzufügst, sollte es funktionieren - hat es in meiner Browseransicht zumindest. zwinker 

    body {float: right;margin-left: 5px;margin-top: 5px;margin-right: 5px;margin-bottom: 5px;background-color: #FFFFFF; background-image: url("https://freiezocker.de/application/modules/media/static/upload/5e8c6391a565638234475vn.png");


    Victorylachen
    0 Mitglieder finden den Beitrag gut.
  12. Mo. 13.04.2020 17:57 Uhr #12
    User Pic
    xRebellx Mitglied
    Registriert seit
    07.08.2012
    Beiträge
    537
    Beitragswertungen
    32 Beitragspunkte
    Hallo Ahrtas
    Danke Dir erstmal für den Tipp,werde es morgen testen.Noch frohe Ostern :-)


    Zuletzt modifiziert von xRebellx am 13.04.2020 - 17:58:08
    freiezocker.de/
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten