Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive Darstellungsprobleme

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Responsive Darstellungsprobleme

    Hallo,

    ich baue derzeit ein Fussball-Aufstellungs-Tool und scheitere hier aktuell an einer vernünftigen responsiven Darstellung. Grundsätzlich arbeite ich mit einer Hintergrundgrafik, auf der entsprechend korrekt positioniert 28 mögliche Select-Felder (immer nur 11 gleichzeitig sichtbar je nach Formation) dargestellt werden sollen. Bei einer Auflösung von 1920x1080 stellt sich das alles auch korrekt dar, allerdings habe ich Probleme, sobald ich aufm Handy unterwegs bin bspw. oder auch nur das Browser-Fenster verkleinere. Ich finde hier alleine leider keinen Weg, die Darstellung responsiv zu machen, sodass ich bei allen Geräten vernünftig meine Aufstellung in dieser grafischen Form abgeben kann. Daher hoffe ich hier auf Hilfe.

    HTML-Code
    HTML-Code:
    <div class="pitchColumn">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Aufstellung
                </h3>
            </div>
            <div class="card-body">
                <div class="lineup-formation">
                    <div class="lineup lineup-0">    
                        <span class="pos pos-0">TW</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_0" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-2">    
                        <span class="pos pos-2">RAV</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_2" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-4">    
                        <span class="pos pos-4">RIV</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_4" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-5">    
                        <span class="pos pos-5">IV</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_5" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-6">    
                        <span class="pos pos-6">LIV</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_6" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-8">    
                        <span class="pos pos-8">LAV</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_8" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-13">    
                        <span class="pos pos-13">RZM</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_13" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-15">    
                        <span class="pos pos-15">LZM</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_15" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-23">    
                        <span class="pos pos-23">RF</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_23" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-25">    
                        <span class="pos pos-25">ST</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_25" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                    <div class="lineup lineup-27">    
                        <span class="pos pos-27">LF</span>
                        <span class="lineup-img"><img src="..." class="img-lineup"></span>
                        <select id="pos_27" size="1" class="form-control lineup-select">
                            <option></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    CSS-Code
    HTML-Code:
    .pitchColumn {
        width: 628px;
        margin-left: 15px;
    }
    .lineup-formation {
        box-sizing: border-box;
        background: url("/images/misc/bg_spielfeld.png") center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 800px;
        width: 628px;
    }
    .lineup-select {
        width: 140px;
        font-size: 11px;
    }
    .lineup-select option{
          width: auto;  
    }
    .lineup-img {
        position: absolute;
        top: -26px;
    }
    .lineup {
        position: absolute;
    }
    .lineup-0 {
        margin-left: 245px;
        margin-top: 745px;
    }
    .lineup-1 {
        margin-left: 245px;
        margin-top: 670px;
    }
    .lineup-2 {
        margin-left: 480px;
        margin-top: 550px;
    }
    .lineup-3 {
        margin-left: 480px;
        margin-top: 610px;
    }
    .lineup-4 {
        margin-left: 395px;
        margin-top: 670px;
    }
    .lineup-5 {
        margin-left: 245px;
        margin-top: 670px;
    }
    .lineup-6 {
        margin-left: 95px;
        margin-top: 670px;
    }
    .lineup-7 {
        margin-left: 10px;
        margin-top: 610px;
    }
    .lineup-8 {
        margin-left: 10px;
        margin-top: 550px;
    }
    .lineup-9 {
        margin-left: 395px;
        margin-top: 460px;
    }
    .lineup-10 {
        margin-left: 245px;
        margin-top: 460px;
    }
    .lineup-11 {
        margin-left: 95px;
        margin-top: 460px;
    }
    .lineup-12 {
        margin-left: 480px;
        margin-top: 310px;
    }
    .lineup-13 {
        margin-left: 395px;
        margin-top: 370px;
    }
    .lineup-14 {
        margin-left: 245px;
        margin-top: 370px;
    }
    .lineup-15 {
        margin-left: 95px;
        margin-top: 370px;
    }
    .lineup-16 {
        margin-left: 10px;
        margin-top: 310px;
    }
    .lineup-17 {
        margin-left: 395px;
        margin-top: 250px;
    }
    .lineup-18 {
        margin-left: 245px;
        margin-top: 250px;
    }
    .lineup-19 {
        margin-left: 95px;
        margin-top: 250px;
    }
    .lineup-20 {
        margin-left: 335px;
        margin-top: 185px;
    }
    .lineup-21 {
        margin-left: 245px;
        margin-top: 125px;
    }
    .lineup-22 {
        margin-left: 155px;
        margin-top: 185px;
    }
    .lineup-23 {
        margin-left: 480px;
        margin-top: 60px;
    }
    .lineup-24 {
        margin-left: 335px;
        margin-top: 60px;
    }
    .lineup-25 {
        margin-left: 245px;
        margin-top: 0px;
    }
    .lineup-26 {
        margin-left: 155px;
        margin-top: 60px;
    }
    .lineup-27 {
        margin-left: 10px;
        margin-top: 60px;
    }
    .pos {
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        display: inline-block;
        position: relative;
        color: #FFFFFF;
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
        margin: 0 5px 0 0;
        border-radius: 3px;
    }
    .pos-0 {
        background: #E9573E;
        min-width: 40px;
    }
    .pos-1, .pos-2, .pos-3, .pos-4, .pos-5, .pos-6, .pos-7, .pos-8 {
        background: #F6BB43;
        min-width: 40px;
    }
    .pos-9, .pos-10, .pos-11, .pos-12, .pos-13, .pos-14, .pos-15, .pos-16, .pos-17, .pos-18, .pos-19 {
        background: #8DC153;
        min-width: 40px;
    }
    .pos-20, .pos-21, .pos-22, .pos-23, .pos-24, .pos-25, .pos-26, .pos-27 {
        background: #4B89DC;
        min-width: 40px;
    }
    .pos-28 {
        background: #BEBEBE;
        min-width: 40px;
    }
    .pos-29 {
        background: #696969;
        min-width: 40px;
    }
    Angehängte Dateien


  • #2
    Nimm halt statt eines Hintergrundbildes ein normales Bild und arbeite mit CSS z-index und position. Du gibst den Spielern mit z-index eine höhere Ebene als dem Bild und mit position überlagerst du dieses div auf das image.

    Kommentar


    • #3
      nimm SVG

      Kommentar


      • #4
        Und wie soll er das machen wenn er ein png Bild hat?
        SVG mag ja für viele Aufgaben sinnvoll sein, aber einfach zu schreiben nimm svg ist mir zu billig.

        Kommentar


        • #5
          Schau dir mal Bootstrap an. Das ist super easy und man spart enorm viel Zeit...

          "Nimm SVG" quatsch, egal ob svg, png oder was auch immer, ob im hintergrund oder nicht, das ändert rein gar nichts am Problem..

          Kommentar

          Lädt...
          X