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
CSS-Code
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>
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; }
Kommentar