i have css question change. 1 best described image. 
the exact definition. have div multiple inline div's inside of it. want set class 1 of them (yellow one) center , move rest of them accordingly in 1 line (outside div has overflow hidden) if make second 1 right yellow, centered , there 3 of them on left side, it(centered) , 1 on right. hope made clear. know can done javascript fluid introduce couple of problems later on while re-sizing whole page.
help appreciated.
thanks, peter
(tl;dr: http://jsfiddle.net/feeela/3eq8dclc/)
health advice: use javascript such tasks, or maybe crazy.
having said that, present fluid css-only version.
the variables need know are:
- how many items in list
- which item should highlighted
both can solved in css.
limitations:
- each list-count must written down in css; if have slider, may contain 3 hundred items, have write css 98 times.
- doesn't work floated items inside inner wrapper (the usual way slider set up) – can't translate inner wrapper, because there no way of knowing how many children element has – don't know how far translate left or right. can work directly on individual items (as counting siblings possible).
knowing this, cannot move row of items setting class name targeted item (the 1 should highlighted) can using class name on parent container.
example markup:
<div class="slider item-4"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> </ul> </div> step 1:
set item widths percentages, based on count of siblings.
for explanation on how works, see https://stackoverflow.com/a/12198561/341201 , linked resources.
/* 2 items */ .slider > ul li:first-child:nth-last-child(2), .slider > ul li:first-child:nth-last-child(2) ~ li { width: 50%; } /* 3 items */ .slider > ul li:first-child:nth-last-child(3), .slider > ul li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } step 2:
move first item using positive (move right) or negative (move left) margin based on position of highlighted item , sibling count. tricky part.
/* second item notes: - second item of 3 in middle */ .slider.item-2 > ul li:first-child:nth-last-child(2) { margin-left: -25%; } .slider.item-2 > ul li:first-child:nth-last-child(4) { margin-left: 12.5%; } .slider.item-2 > ul li:first-child:nth-last-child(5) { margin-left: 20%; } .slider.item-2 > ul li:first-child:nth-last-child(6) { margin-left: 25%; } /* third item notes: - no third item in list of 2 - third item of 5 in middle */ .slider.item-3 > ul li:first-child:nth-last-child(3) { margin-left: -33.3333%; } .slider.item-3 > ul li:first-child:nth-last-child(4) { margin-left: -12.5%; } .slider.item-3 > ul li:first-child:nth-last-child(6) { margin-left: 8.3333%; } /* …expand required n items */ i prepared example works 2 6 items in row. if sliders may contain more items, have expand css accordingly.
full example:
hr { /* visual sugar */ margin-top: 5em; margin-bottom: 5em; } .slider { overflow: hidden; } .slider > ul { margin: 0; padding-left: 0; list-style: none; white-space: nowrap; } .slider > ul li { box-sizing: border-box; display: inline-block; overflow: hidden; margin-left: -4px; min-height: 5rem; white-space: normal; border: 1px solid black; } .slider > ul li:first-child { margin-left: 0; } /* following sections sets slider item widths */ /* 2 items */ .slider > ul li:first-child:nth-last-child(2), .slider > ul li:first-child:nth-last-child(2) ~ li { width: 50%; } /* 3 items */ .slider > ul li:first-child:nth-last-child(3), .slider > ul li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* 4 items */ .slider > ul li:first-child:nth-last-child(4), .slider > ul li:first-child:nth-last-child(4) ~ li { width: 25%; } /* 5 items */ .slider > ul li:first-child:nth-last-child(5), .slider > ul li:first-child:nth-last-child(5) ~ li { width: 20%; } /* 6 items */ .slider > ul li:first-child:nth-last-child(6), .slider > ul li:first-child:nth-last-child(6) ~ li { width: 16.6666%; } /* n items – expand required… */ /* highlight specific item */ .slider.item-2 > ul li:nth-child(2), .slider.item-3 > ul li:nth-child(3), .slider.item-4 > ul li:nth-child(4), .slider.item-5 > ul li:nth-child(5), .slider.item-6 > ul li:nth-child(6) { background: yellow; } /* sections centers specific item */ /* second item notes: - second item of 3 in middle */ .slider.item-2 > ul li:first-child:nth-last-child(2) { margin-left: -25%; } .slider.item-2 > ul li:first-child:nth-last-child(4) { margin-left: 12.5%; } .slider.item-2 > ul li:first-child:nth-last-child(5) { margin-left: 20%; } .slider.item-2 > ul li:first-child:nth-last-child(6) { margin-left: 25%; } /* third item notes: - no third item in list of 2 - third item of 5 in middle */ .slider.item-3 > ul li:first-child:nth-last-child(3) { margin-left: -33.3333%; } .slider.item-3 > ul li:first-child:nth-last-child(4) { margin-left: -12.5%; } .slider.item-3 > ul li:first-child:nth-last-child(6) { margin-left: 8.3333%; } /* fourth item notes: - no fourth item in list of 2 , 3 */ .slider.item-4 > ul li:first-child:nth-last-child(4) { margin-left: -37.5%; } .slider.item-4 > ul li:first-child:nth-last-child(5) { margin-left: -20%; } .slider.item-4 > ul li:first-child:nth-last-child(6) { margin-left: -8.3333%; } /* fifth item notes: - no fifth item in list of two, 3 , 4 */ .slider.item-5 > ul li:first-child:nth-last-child(5) { margin-left: -40%; } .slider.item-5 > ul li:first-child:nth-last-child(6) { margin-left: -25%; } /* sixth item notes: - no sixth item in list of two, three, 4 , 5 */ .slider.item-6 > ul li:first-child:nth-last-child(6) { margin-left: -41.6666%; }<h3>highlight second item</h3> <div class="slider item-2"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> </ul> </div> <div class="slider item-2"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> </ul> </div> <div class="slider item-2"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> </ul> </div> <div class="slider item-2"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> </ul> </div> <div class="slider item-2"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> <li>ducimus facilis ipsam itaque</li> </ul> </div> <hr/> <h3>highlight third item</h3> <div class="slider item-3"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> </ul> </div> <div class="slider item-3"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> </ul> </div> <div class="slider item-3"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> </ul> </div> <div class="slider item-3"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> </ul> </div> <div class="slider item-3"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> <li>ducimus facilis ipsam itaque</li> </ul> </div> <hr/> <h3>highlight fourth item</h3> <div class="slider item-4"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> </ul> </div> <div class="slider item-4"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> </ul> </div> <div class="slider item-4"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> </ul> </div> <div class="slider item-4"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> </ul> </div> <div class="slider item-4"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> <li>ducimus facilis ipsam itaque</li> </ul> </div> <hr/> <h3>highlight fifth item</h3> <div class="slider item-5"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> </ul> </div> <div class="slider item-5"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> </ul> </div> <div class="slider item-5"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> </ul> </div> <div class="slider item-5"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> </ul> </div> <div class="slider item-5"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> <li>ducimus facilis ipsam itaque</li> </ul> </div> <hr/> <h3>highlight sixth item</h3> <div class="slider item-6"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> </ul> </div> <div class="slider item-6"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> </ul> </div> <div class="slider item-6"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> </ul> </div> <div class="slider item-6"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> </ul> </div> <div class="slider item-6"> <ul> <li>lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>alias aspernatur</li> <li>assumenda atque aut consectetur</li> <li>consequatur culpa dolore</li> <li>ducimus facilis ipsam itaque</li> </ul> </div>
Comments
Post a Comment