Autor | Zpráva | ||
---|---|---|---|
check Profil |
Ahoj,
omluvte moje prosím moje rezavé znalosti a kódování 15-20 let starého webu: vmaudio.cz/clanky_pokracovani/vma_1sl.php#main 1/ Snažím se do formuláře nahoře na pravo dostat funkcionalitu, aby zůstal zobrazený obrázek povrchové úpravy dle vybraného formuláře. 2/ Stejně tak bych rád, aby nastala změna pozadí při : checked pro celý span (celé tlačítko), ne jenom pro label. Hraju si s tím den a nedaří se mi :checked pseudo třídu správně použít. Asi je potřeba změnit nějakým způsobem hierarchii tagů, aby tam správně probíhalo dědění, ale nevím už jak, celé je to na mě v tuto chvíli dost složité. Cca 5 let jsem na CSS nesáhnul. html kód výřez <div class="µ_obal"> <div class="µ_objednat"> <form id="1sl" method="POST" action="../jak_objednat.php#formular" name="online"> <a id="m0" class="image-link"><span><input id="m00" type="radio" name="povrch" value="0" checked="checked"><label for="m00">americký ořech</label></span></a> <a id="m1" class="image-link"><span><input id="m10" type="radio" name="povrch" value="1"><label for="m10">indická jabloň</label></span></a> <a id="m2" class="image-link"><span><input id="m20" type="radio" name="povrch" value="2"><label for="m20">makoré</label></span></a> <a id="m3" class="image-link"><span><input id="m30" type="radio" name="povrch" value="3"><label for="m30">jasan fládr</label></span></a> <a id="m4" class="image-link"><span><input id="m40" type="radio" name="povrch" value="4"><label for="m40">jasan jádrový</label></span></a> <a id="m5" class="image-link"><span><input id="m50" type="radio" name="povrch" value="5"><label for="m50">mahagon</label></span></a> <a id="m6" class="image-link"><span><input id="m60" type="radio" name="povrch" value="6"><label for="m60">wenge</label></span></a> <a id="m7" class="image-link"><span><input id="m70" type="radio" name="povrch" value="7"><label for="m70">americký dub</label></span></a> <a id="m8" class="image-link"><span><input id="m80" type="radio" name="povrch" value="8"><label for="m80">buk</label></span></a> <a id="m9" class="image-link"><span><input id="m90" type="radio" name="povrch" value="9"><label for="m90">olše</label></span></a> <a id="m10" class="image-link"><span><input id="m100" type="radio" name="povrch" value="10"><label for="m100">makassar</label></span></a> <a id="m11" class="image-link"><span><input id="m110" type="radio" name="povrch" value="11"><label for="m110">černá dýha</label></span></a> <a id="m12" class="image-link"><span><input id="m120" type="radio" name="povrch" value="12"><label for="m120">americká třešeň</label></span></a> <a id="m13" class="image-link"><span><input id="m130" type="radio" name="povrch" value="13"><label for="m130">černý lesklý lak</label></span></a> <a id="m14" class="image-link"><span><input id="m140" type="radio" name="povrch" value="14"><label for="m140">bílý lesklý lak</label></span></a> <a id="m15" class="image-link"><span><input id="m150" type="radio" name="povrch" value="15"><label for="m150">černý polomat</label></span></a> <a id="m16" class="image-link"><span><input id="m160" type="radio" name="povrch" value="16"><label for="m160">bílý polomat</label></span></a> <a id="m17" class="image-link"><span><input id="m170" type="radio" name="povrch" value="17"><label for="m170">surová MDF</label></span></a> <div> </form> </div> </div> </div> div.µ_obal {height: 950px; width: 602px; align: left; float: right; margin: 0px 0px 0px 0px;} div.µ_objednat { width: 602px; margin: 5px 5px 5px 10px; position: relative;} .image-link { display: block; width: 480px; height: 555px; position: absolute; top: 0px; left: 0px; } div.µ_objednat a.image-link {text-decoration: none; background-color: #ffffff; cursor: default;} #m0 {background: url(../clanky_pokracovani/dyhy_vzornik/americky_orech_cista2.jpg) no-repeat; z-index: 2;} #m1 {background: url(../clanky_pokracovani/dyhy_vzornik/indicka_jablon.jpg) no-repeat;} #m2 {background: url(../clanky_pokracovani/dyhy_vzornik/makore.jpg) no-repeat;} #m3 {background: url(../clanky_pokracovani/dyhy_vzornik/jasan_fladr.jpg) no-repeat;} #m4 {background: url(../clanky_pokracovani/dyhy_vzornik/jasan_jadrovy.jpg) no-repeat;} #m5 {background: url(../clanky_pokracovani/dyhy_vzornik/mahagon.jpg) no-repeat;} #m6 {background: url(../clanky_pokracovani/dyhy_vzornik/wenge.jpg) no-repeat;} #m7 {background: url(../clanky_pokracovani/dyhy_vzornik/dub_americky.jpg) no-repeat;} #m8 {background: url(../clanky_pokracovani/dyhy_vzornik/buk.jpg) no-repeat;} #m9 {background: url(../clanky_pokracovani/dyhy_vzornik/olse.jpg) no-repeat;} #m10 {background: url(../clanky_pokracovani/dyhy_vzornik/ev-makassar.jpg) no-repeat;} #m11 {background: url(../clanky_pokracovani/dyhy_vzornik/cerna_dyha.jpg) no-repeat;} #m12 {background: url(../clanky_pokracovani/dyhy_vzornik/tresen_americka.jpg) no-repeat;} #m13 {background: url(../clanky_pokracovani/dyhy_vzornik/modrin.jpg) no-repeat;} #m14 {background: url(../clanky_pokracovani/dyhy_vzornik/cerny_lak.jpg) no-repeat;} #m15 {background: url(../clanky_pokracovani/dyhy_vzornik/bily_lak.jpg) no-repeat;} #m16 {background: url(../clanky_pokracovani/dyhy_vzornik/otaznik.jpg) no-repeat;} #m17 {background: url(../clanky_pokracovani/dyhy_vzornik/otaznik.jpg) no-repeat;} #m0 span { position: absolute; right: -122px; top: 0px; } #m1 span { position: absolute; right: -122px; top: 25px; } #m2 span { position: absolute; right: -122px; top: 50px; } #m3 span { position: absolute; right: -122px; top: 75px; } #m4 span { position: absolute; right: -122px; top: 100px; } #m5 span { position: absolute; right: -122px; top: 125px; } #m6 span { position: absolute; right: -122px; top: 150px; } #m7 span { position: absolute; right: -122px; top: 175px; } #m8 span { position: absolute; right: -122px; top: 200px; } #m9 span { position: absolute; right: -122px; top: 225px; } #m10 span { position: absolute; right: -122px; top: 250px; } #m11 span { position: absolute; right: -122px; top: 275px; } #m12 span { position: absolute; right: -122px; top: 300px; } #m13 span { position: absolute; right: -122px; top: 325px; } #m14 span { position: absolute; right: -122px; top: 350px; } #m15 span { position: absolute; right: -122px; top: 375px; } #m16 span { position: absolute; right: -122px; top: 400px; } #m17 span { position: absolute; right: -122px; top: 425px; } div.µ_objednat div {position: absolute; left: 65px; bottom: -920px;} .image-link span { width: 115px; display: block; height: 20px; margin: 0px; padding: 2px; border: 1px solid #ccc; } input:checked + label { background: #ccc; } .image-link:hover { z-index: 90; } .image-link:hover span { background: #ccc; } |
||
Tomáš123 Profil |
check:
„Stejně tak bych rád, aby nastala změna pozadí při : checked pro celý span (celé tlačítko), ne jenom pro label.“ V CSS ide ovplyvniť iba podradené alebo nasledujúce susediace prvky ( + resp. ~ ). Pred časom sa tu tento problém riešil a Chamurappi prišiel so zaujímavým návrhom.
V tvojom prípade ale potrebuješ input vo vnútri span u, tak na to pôjdeme úplne inak. Súčasné riešenie s absolútne poziciovanými jednotlivými položkami je aj tak veľmi krehké a nečisté.
Skús niečo takéto: Živá ukázka... Živá ukázka – chýbal z-index . Po zvolení možnosti sa nedalo zobraziť obrázky predchádzajúcich možností.
|
||
check Profil |
#3 · Zasláno: 31. 3. 2020, 11:01:55
Díky, super přechody.
Máš pravdu, budu muset začít od začátku, tohle se upravit nedá, protože je tam jinak posloupnost html tagů a nedá se ta informace checked dědit na otce tagu. Takže přeskládat, komplet přestylovat. Snad to tento týden zvládnu, mám teď kvůli tomu roz****** celý web. |
||
Časová prodleva: 4 roky
|
0