Radio Button Selector CSS ONLY pls -
i have created css image slider radio buttons control it. have set radio buttons visibility: hidden , using thumbnail images labels. html looks :
<div class="slider"> <input type="radio" value="navy" id="colour" name="attribute_colour" > <label for="navy"> <img src="uploads/navy.png"> </label> repeat lines 2-5 other thumbnails, :
<div class="slidermain"><ul> <li> <img src="uploads/navyfullsize.png"> </li> repeat lines 2-4 main images , close :
</ul></div></div>` i want clicking image navy.png move <ul> containing navyfullsize.png down 100%, have thought select button/image navy.png, should write stylesheet :
.slider input[type=radio]:checked + label[for=navy]~.slidermain>ul { top:-100%; } but no avail! i've tried number of similar alternatives, don't know jquery, css solution helpful please.
1) positioning element requires either position: relative or position: absolute
2) using percentage values requires parent container's height set (for 1 200px)
3) label for attribute references input id, not value
give try.
Comments
Post a Comment