XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Media Querys - Layout geht wird über den Displayrand angezeigt (http://xhtmlforum.de/showthread.php?t=69355)

DarkNemesis84 04.05.2013 21:51

Media Querys - Layout geht wird über den Displayrand angezeigt
 
Ich versuche mich momentan an den media querys zur anpassung einer webseite für smartphones und verstehe da etwas nicht bzw. ergibt es keinen sinn?!

Ich habe:

Code:

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

    body {
      font-family: "Lucida Sans","Lucida Sans Unicode",Helvetica,Verdana;
      font-size: 12px;
      line-height: 20px;
      margin: 0;
      text-align: center;
    }

    p {
      margin: 5px 0px;
      font-size: 12px;
      line-height: 20px;
    }

    h1 {
      margin: 0px 0px 25px 0px;
      font-size: 20px;
      line-height: 22px;
    }

    h2 {
      margin: 50px 0px 10px 0px;
      font-size: 16px;
      line-height: 18px;
    }

    h3 {
      margin: 10px 0px;
      font-size: 14px;
      line-height: 16px;
    }

    h5 {
      margin: 20px 0px;
      font-size: 18px;
      line-height: 22px;
      color: #F57516;
    }

    h6 {
      margin: 20px 0px;
      font-size: 18px;
      line-height: 22px;
      text-decoration: line-through;
      color: #000000;
    }

    a:link,
    a:visited {
      text-decoration: none;
      color: #0099ff;
    }

    a:hover {
      color: #F57516;
    }

    img {
      border: none;
    }

    blockquote p {
      margin-top: 20px;
      font-size: 10px;
    }

    ul.csc-bulletlist {
      list-style: none;
      padding-left: 20px;
    }

    ul.csc-bulletlist li {
      background: url("/fileadmin/images/bullet.gif") no-repeat scroll 0 0 transparent;
      padding-left: 20px;
      margin-bottom: 4px;
      line-height: 19px;
    }

    #wrap {
      -moz-background-clip: border;
      -moz-background-inline-policy: continuous;
      -moz-background-origin: padding;
      background: #FFFFFF none repeat scroll 0 0;
      margin: 0 auto;
      /*overflow: hidden; Auskommentiert für Boxschatten 21.08.12 */
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
      width: 480px;
    }

    /* Header */
    #header-left {
      float: left;
      height: 60px;
      width: 450px;
    }

    #header-center {
      float: left;
      height: 35px;
      width: 175px;
      text-align: center;
    }

    #header-center span {
        display: inline-block;
        margin-top: 6px;
        margin-bottom: 3px;
        font-size: 11px;
    }

    #header-center .tel {
      display: inline-block;
      margin-top: -5px;
      font-size: 18px;
      line-height: 22px;
      color: #F57516;
      font-weight: bold;
    }

    #header-right {
      float: left;
      margin-top: 20px;
      margin-left: 75px;
      height: 40px;
      width: 199px;
      text-align: right;
    }

    /* Suchformular im Header */
    #header-right input {
      display: block;
      float: left;
    }

    #header-right input {
      background: #FFFFFF;
      font-size: 14px;
    }

    #header-right input[type="text"] {
      border-top: 1px solid #cdcdcd;
      border-right: none;
      border-bottom: 1px solid #cdcdcd;
      border-left: 1px solid #cdcdcd;
      background: url("/fileadmin/images/icon_search.gif") no-repeat;
      background-position: 5px 5px;
      height: 21px;
      width: 100px;
      padding-left: 25px;
    }

    #header-right input[type="submit"] {
      margin-left: 10px;
      cursor: pointer;
    }

    #header-right input[type="text"] {
      padding-top: 4px;
      height: 18px;
    }

    /* Banner */
    #banner-start {
      clear: left;
      float: left;
      margin-top: 20px;
      height: 5px;
      width: 480px;
    }

    #t3sheaderslider {
      display: none;
    }

    #t3sheaderslider img {
      display: none;
    }

    #banner {
      clear: left;
      float: left;
      margin-top: 20px;
      height: 80px;
      width: 480px;
    }

    #nav,
    #banner img {
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 1px 5px 0 #4A4A4A;
      -moz-box-shadow: 0 1px 5px 0 #4A4A4A;
      -webkit-box-shadow: 0 1px 5px 0 #4A4A4A;
      height: 80px;
      width: 450px;
    }

    #row-left {
      display: none;
    }

    #sub-nav {
      display: none;
    }

    .promobox-top {
      float: left;
      margin-top: 20px;
      padding: 8px;
      background: url("../images/promobox-top.gif") top;
      width: 204px;
    }

    #sub-nav-footer,
    .promobox-footer {
      float: left;
      background: url("../images/sub-nav-footer.gif") no-repeat;
      height: 13px;
      width: 220px;
    }

    #row-right {
      float: left;
      margin-top: 20px;
      margin-left: 0px;
      width: 450px;
    }

    #row-right #margin {
      margin-left: 0px;
    }

    /* PROMOTION BOX */
    .youtube {
        clear: left;
        float: left;
        margin-top: 25px;
    }

    /* FACEBOOK c575 */
    /* GOOLGE PLUS c657 */
    #c575,
    #c657 {
      float: left;
      width: 80px;
      margin-top: 20px;
    }

    #c657 {
      margin-left: 10px;
    }

    /* ADSENSE BOX */
    div.adsense {
      float: left;
      margin-top: 20px;
    }

    /* CONTENT */
    #print {
      text-align: right;
    }

    div.boxes img {
      margin-top: 20px;
      width: 220px;
    }

    div.divider {
      clear: both;
      margin: 30px 0px;
    }

    div.divider hr {
      display: none;
    }
   
    /* Startpage */
    /* Quick Links */
    #quick-links {
      display: none;
    }

    #row-left-start {
      clear: left;
      float: left;
      margin-left: 0px;
      height: 300px;
      width: 450px;
    }

    #row-right-start {
      clear: left;
      float: left;
      margin-top: 25px;
      height: 300px;
      width: 450px;
    }

    #row-left-start img {
      float: left;
      margin: -2px 10px 0px 0px;
      height: 222px; 
    }

    #box-1 {
      float: left;
      background: #efefef;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 1px 5px 0 #4A4A4A;
      -moz-box-shadow: 0 1px 5px 0 #4A4A4A;
      -webkit-box-shadow: 0 1px 5px 0 #4A4A4A;
      height: 220px;
      width: 450px;
      overflow: hidden;
    }

    .tx-ghrandomcontent-pi1,
    .tx-ghrandomcontent-pi1 div {
        height: 222px;
    }

    #box-1 h1 {
      margin-top: 0px;
      padding-top: 5px;
      font-size: 17px;
    }

    #box-1 h5 {
      margin: 10px 0;
    }

    #box-2 {
      float: left;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 1px 5px 0 #4A4A4A;
      -moz-box-shadow: 0 1px 5px 0 #4A4A4A;
      -webkit-box-shadow: 0 1px 5px 0 #4A4A4A;
      margin-top: 20px;
      padding: 6px;
      height: 58px;
      width: 438px;
      overflow: hidden;
    }

    #box-2 h2 {
      margin-top: 0px;
      margin-bottom: 5px;
      font-size: 13px;
      line-height: 15px;
    }

    #box-1 p {
      padding: 5px;
    }

    /* Footer */
    #footer {
      clear: left;
      float: left;
      margin: 30px 0px;
      width: 450px;
      border-top: 1px solid #e7e7e7;
    }

    div.footer-section {
        clear: left;
        float: left;
        margin-top: 10px;
        border-top: 1px solid #e7e7e7;
    }

    div.footer-box {
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      width: 195px;
    }

    div#c848 {
        clear: left;
        float: left;
        margin-left: 8px;
        margin-top: 14px;
    }

    div.footer-box p,
    div.footer-box td {
      font-size: 11px;
    }

    div.footer-box table {
        margin-top: -7px;
        margin-left: -1px;
    }

    div.footer-box table tr td {
        margin-right: 5px;
        padding: 0px 15px 0px 0px !important;
        text-align: left;
        line-height: 15px;
    }

    #footer #print {
      display: none;
    }

    /* Zusätzliche Formatierungen */
    h1.quick-links,
    h2.quick-links {
      margin: 0px;
      padding: 5px 10px;
      background: url("../images/quick-links.gif") no-repeat;
      height: 19px;
      font-size: 14px;
      line-height: 16px;
      color: #FFFFFF;
    }

    h1.quick-links a,
    h2.quick-links a {
        background: none !important;
        color: #FFFFFF !important;
        font-size: 14px;
        height: 19px !important;
        line-height: 16px;
        margin: 0px !important;
        padding: 0px;
    }

    #quick-links a:link,
    #quick-links a:visited,
    #sub-nav a:link,
    #sub-nav a:visited {
      display: block;
      background: url("../images/quick-links-sep.gif") repeat-x bottom;
      margin: 8px 10px;
      height: 20px;
      color: #000000;
    }

    #quick-links a:hover,
    #sub-nav a:hover {
      color: #F57516;
    }

    .sub-nav-act,
    .third-navi-act {
      color: #F57516 !important;
    }

    .third-navi,
    .third-navi-act {
      padding-left: 15px;
    }

    #footer a:link,
    #footer a:visited {
      font-size: 10px;
      font-weight: lighter;
    }

    #gplus {
      margin: 7px;
    }

    .grey {
      clear: left;
      margin-top: 5px;
      font-size: 10px;
      color: #858585;
    }

    /* TWITTER / FACEBOOK */

    #facebook_wrapper,
    #twitter_wrapper {
      display: none;
    }

    #twitter,
    #facebook {
      display: none;
    }
   
    /* Extensions */
    .carouselContainer {
        width: 450px !important;
    }
   
    .caroufredsel_wrapper {
        width: 410px !important;
    }
   
    /* Typo3 */
    div.csc-textpic-border div.csc-textpic-imagewrap img,
    div.csc-textpic-border div.csc-textpic-image img {
      border: 1px solid #858585 !important;
    }

    .csc-textpic-caption {
      font-size: 10px;
      line-height: 14px;
      margin-left: 5px;
    }

    div.csc-textpic-border img,
    div.csc-textpic-image img  {
      float: right;
      margin-right: 5px !important;
    }

    #row-left div.csc-textpic-intext-right,
    #row-left div.csc-textpic-last,
    #row-left div.csc-textpic-above {
      margin-top: 0px;
    }

    .csc-textpic-intext-right img {
        margin-bottom: 5px;
    }

    .csc-searchform {
      margin-top: 20px;
    }

    .contenttable th,
    .contenttable td {
      text-align: center;
    }

    table th {
      margin: 5px 0px 15px 0px;
      font-size: 14px;
    }

    table td {
      text-align: left;
      padding: 1px 5px !important;
    }

    .clear {
        clear: both;
    }

    /* REMOVE BLUR */
    :focus {
      outline: solid 0;
    }

    :active {
      border: 0;
    }

    a.salesworker-container {
        display: none !important;
    }
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   
    #wrap {
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      width: 430px;
    }
   
    /* HEADER */
    #header-left {
      width: 445px;
    }
   
    #header-left img {
        width: 445px;
    }
   
    #header-center {
      width: 180px;
    }
 
    #header-right {
      margin-left: 20px;
      width: 230px;
    }
   
    #header-right form {
        margin-left: 0px;
    }
   
    #header-right input[type="text"] {
      width: 170px;
      padding-left: 20px;
    }
   
    #banner-start {
        display: none;
    }
   
    /* CONTENT */
    #row-left-start {
      width: 425px;
    }

    #row-right-start {
      width: 425px;
      margin-left: 0px;
    }
   
    #banner {
      display: none;
    }
   
    #box-1 {
      width: 425px;
    }
   
    #box-2 {
      width: 413px;
    }
   
    div.boxes img {
      width: 425px;
    }
   
    #row-right {
      width: 425px;
    }
   
    .carouselContainer {
        width: 425px !important;
    }
   
    .caroufredsel_wrapper {
        width: 390px !important;
    }
   
    #footer {
      width: 425px;
    }
   
    div.footer-box {
      margin-left: 5px;
      width: 205px;
    }
   
    div.footer-section div.footer-box {
      width: 200px;
    }
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
 
    /* FONTS */
    h1 {
        font-size: 14px;
        line-height: 16px;
    }
   
    h2 {
        font-size: 13px;
        line-height: 15px;
    }
   
    h5 {
        color: #F57516;
        font-size: 13px;
        line-height: 15px;
        margin: 10px 0;
    }
   
    p {
        font-size: 12px;
        line-height: 14px;
        margin: 4px 0;
    }
   
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 273px;
    }
   
    /* HEADER */
    #header-left {
        height: 41px;
        width: 275px;
    }
   
    #header-left img {
        width: 275px;
    }
   
    #header-center {
        width: 273px;
    }
 
    #header-right {
        margin-left: 0px;
        width: 273px;
    }
   
    #header-right form {
        margin-left: 0px;
    }
   
    #header-right input[type="text"] {
        width: 217px;
        padding-left: 20px;
    }
   
    #banner-start {
        display: none;
    }   
   
    /* CONTENT */
    #row-left-start {
        width: 275px;
        margin-top: 25px;
    }

    #row-right-start {
        width: 275px;
        margin-left: 0px;
    }
   
    #banner {
        display: none;
    }
   
    #box-1 {
        height: auto;
        width: 275px;
    }
   
    #box-1 h1 {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 10px;
    }
   
    #box-2 {
        width: 264px;
    }
   
    .tx-ghrandomcontent-pi1,
    .tx-ghrandomcontent-pi1 div {
        height: auto;
    }
   
    #row-left-start img {
        height: 190px;
        width: 139px;
    }
   
    div.boxes img {
        width: 275px;
    }
   
    #row-right {
        width: 275px;
    }
   
    .carouselContainer {
        width: 275px !important;
    }
   
    .caroufredsel_wrapper {
        width: 260px !important;
    }
   
    #footer {
        width: 270px;
    }
   
    div.footer-box {
        margin-left: 5px;
        width: 125px;
    }
   
    div.footer-section div.footer-box {
        width: 273px;
    }
   
}

@media only screen and (max-width: 240px), only screen and (max-device-width: 240px) {
   
    /* FONTS */
    h1 {
        font-size: 14px;
        line-height: 16px;
    }
   
    h2 {
        font-size: 13px;
        line-height: 15px;
    }
   
    h5 {
        color: #F57516;
        font-size: 12px;
        line-height: 14px;
        margin: 10px 0;
    }
   
    p {
        font-size: 11px;
        line-height: 13px;
        margin: 3px 0;
    }
   
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 190px;
    }
   
    /* HEADER */
    #header-left {
        height: 32px;
        width: 190px;
    }
   
    #header-left img {
        width: 190px;
    }
   
    #header-center {
        width: 190px;
    }
 
    #header-center span {
        font-size: 10px;
    }
   
    #header-center .tel {
        color: #F57516;
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        margin-top: -5px;
    }
   
    #header-right {
        clear: left;
        float: left;
        margin-left: 0px;
        width: 190px;
        text-align: left;
    }
   
    #header-right form {
        margin-left: 0px;
    }
   
    #header-right input[type="text"] {
        float: left;
        width: 135px;
        padding-left: 20px;
    } 
   
    #banner-start {
        display: none;
    }
   
    /* CONTENT */
    #row-left-start {
        height: auto;
        width: 188px;
        margin-top: 10px;
    }
   
    #print {
        display: none;
    }
   
    .tx-ghrandomcontent-pi1,
    .tx-ghrandomcontent-pi1 div {
        padding: 5px 5px 5px 10px;
        height: auto;
    }
   
    #row-left-start img {
        display: none;
    }
   
    #box-1 h1 {
        font-size: 13px;
        line-height: 15px;
        margin-top: 0px;
        margin-bottom: 10px;
        padding-top: 5px;
    }
   
    #box-1 p {
        padding-left: 0px;
    }

    #row-right-start {
        margin-top: 20px;
        margin-left: 0px;
        width: 188px;
    }
   
    #banner {
        display: none;
    }
   
    #box-1 {
        height: auto;
        width: 188px;
    }
   
    #box-2 {
        height: auto;
        width: 176px;
    }
   
    div.boxes img {
        width: 190px;
    }
   
    #row-right {
        width: 190px;
    }
   
    .breadcrumbs {
        width: 190px;
    }
   
    .tx-jpcarousel-pi1 {
        display: none;
    }
   
    ul.csc-bulletlist {
        padding-left: 0px;
    }
   
    /* SUCHE */
    .tx-indexedsearch .tx-indexedsearch-searchbox INPUT.tx-indexedsearch-searchbox-sword,
    .tx-indexedsearch .tx-indexedsearch-searchbox INPUT.tx-indexedsearch-searchbox-button {
        margin-top: -10px;
        width: 115px;
    }
   
    .tx-indexedsearch-descr,
    .tx-indexedsearch-info {
        display: none;
    }
   
    .browsebox {
        display: none;
    }
   
    /* Footer */
    #footer {
        width: 190px;
    }
   
    div.footer-box {
        margin-left: 5px;
        width: 157px;
    }
   
    div.footer-section div.footer-box {
        width: 190px;
    }
}

angelegt und mit einem HTC One Dolphin getestet.

Dabei wurde korrekterweise der media query mit der width 480 ausgewählt, dieser wird aber im hochformat so angezeigt, dass das Layout über den Seitenrand hinaus geht. Das dürfte bei einer auflösung von 720 in der Breite nicht passieren? Normalerweise müsste es sogar noch weißen Rand li und re geben.

Hab ich da einen Verständnisfehler? Fehlt was im media query?

Den Viewport habe ich im meta wie folgt gesetzt:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Zu finden ist das Projekt auf www.digitale-fotografien.com
Bisher geht es nur um die Startseite.

DarkNemesis84 04.05.2013 22:55

Habs einmal entfernt, aber das Ergebnis ist das gleiche.

Interessant finde ich es aber auch, dass wenn ich das Handy von Hoch auf Quer und wieder auf Hoch stelle das Design korrekt dargestellt wird.

Das haben mir aber auch andere bestätigt beim Testen auf anderen HTCs und Galaxy Handys. Beim Reload der Seite wird das Layout wieder wie gehabt zu groß dargestellt.

plastiko 04.05.2013 23:01

Den Beitrag von mir, auf den DarkNemesis geantwortet hat habe ich zuvor gelöscht.
Es ging um Diesen Schnipsel:
Code:

, only screen and (max-device-width: 768px)

DarkNemesis84 04.05.2013 23:02

Bzw. deren Ableger mit 240, 320, 480 ;)

Aber wie gesagt ist das Ergebniss gleich geblieben ;(

heiko_rs 05.05.2013 03:29

Du produzierst ständig eine Überbreite: #wrap ist fast immer zu breit. Du machst einen Denkfehler: Gibst #wrap z.B. für max-width: 786px eine Breite, die gerade eben passt, aber wenn der Viewport kleiner wird, behält #wrap diese Breite und wird daher zu breit - je schmaler der Viewport wird, desto krasser die Überbreite.

Erst viel später wird sie endlich reduziert, wenn per max-width: 480px ein neuer Wert kommt, der wieder gerade eben passt, aber dann geht das Spiel von vorne los: Zieht man den Viewport schmaler, wird die Überbreite immer krasser.

Unabhängig davon wirf maximum-scale=1.0 raus - das iPhone/iPad-Fehlverhalten, für das man diesen (benutzerunfreundlichen) Wert dazugenommen hat, ist längst beseitigt (seit iOS 6, das bzgl. Marktanteil die älteren Versionen bereits fast komplett verdrängt hat).

DarkNemesis84 05.05.2013 09:26

Wrap hat eigentlich (Ausnahme Code oben bei 786) immer eine geringere Breite und einen Margin.

s. aktuellste Code ausschnitte:

Code:

@media only screen and (max-width: 240px) {
...
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 190px;
    }

@media only screen and (max-width: 320px) {
  ... 
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 273px;
    }

@media only screen and (max-width: 480px) {
    ...
    #wrap {
      padding-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      width: 430px;
    }

@media only screen and (max-width: 768px) {
...
    #wrap {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 720px;
    }

Das Problem ist mit dem Code bei mir aber immer noch vorhanden ;(
Den Parameter hab ich wie empfohlen entfernt.

heiko_rs 05.05.2013 11:54

Zitat:

Zitat von DarkNemesis84 (Beitrag 529137)
Das Problem ist mit dem Code bei mir aber immer noch vorhanden

Und Dein Denkfehler auch noch: Welche Regel wirkt bei einem Viewport mit 321px? Und welche Breite benötigt #wrap dann? (richtig, #wrap ist dann 139px zu breit.)

Setze width von #wrap generell auf auto, sobald Du das fixe Layout auflöst (d.h. sobald die Viewport-Breite die 940px Deines fixen Standard-Layouts unterschreitet), alles andere bringt nix.

MrMurphy 05.05.2013 12:07

Hallo,

mir fällt folgendes auf, was für mich nicht zusammenpasst:

a) Media Queries (inklusiv Responsive Design?)

b) starre Breitenangaben

c) Doctype XHTML

Wenn man flexible Seiten für alle Bildschirmgrössen erstellen will, sollte man konsequent HTML5/CSS3 mit flexiblem Responsive Design einsetzen. Alles andere ist halber Kram, der in der Praxis nur Probleme verursacht.

Ich weiss jetzt nicht, in wie weit du Einfluss auf den HTML/CSS-Quelltext hast (CMS? Blogsystem?), aber den solltest du zusätzlich gewaltig entschlacken.

Gruss

MrMurphy

DarkNemesis84 05.05.2013 21:59

Zitat:

Zitat von MrMurphy (Beitrag 529141)
Hallo,

mir fällt folgendes auf, was für mich nicht zusammenpasst:

a) Media Queries (inklusiv Responsive Design?)

b) starre Breitenangaben

c) Doctype XHTML

Wenn man flexible Seiten für alle Bildschirmgrössen erstellen will, sollte man konsequent HTML5/CSS3 mit flexiblem Responsive Design einsetzen. Alles andere ist halber Kram, der in der Praxis nur Probleme verursacht.

Ich weiss jetzt nicht, in wie weit du Einfluss auf den HTML/CSS-Quelltext hast (CMS? Blogsystem?), aber den solltest du zusätzlich gewaltig entschlacken.

Gruss

MrMurphy

Ist ein Typo3, also bedingt hat man natürlich auf alles einen EInfluss, jedoch will ich kein Re-Design der Seite machen, sondern nur entsprechend das was vorhanden ist best möglich auf Mobilen Geräten wieder geben.

Der HTML/CSS Code der Seite ist halt entsprechend umfangreich.

DarkNemesis84 05.05.2013 22:00

Zitat:

Zitat von heiko_rs (Beitrag 529140)
Und Dein Denkfehler auch noch: Welche Regel wirkt bei einem Viewport mit 321px? Und welche Breite benötigt #wrap dann? (richtig, #wrap ist dann 139px zu breit.)

Setze width von #wrap generell auf auto, sobald Du das fixe Layout auflöst (d.h. sobald die Viewport-Breite die 940px Deines fixen Standard-Layouts unterschreitet), alles andere bringt nix.

OKay, ich denke ich habe den Fehler verstanden ;)
Werde mich nächste Woche um nachbesserung bemühen ^^


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:48 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019