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; }
</style>
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 spanu, 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
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0