here is mu code : <body> <form id="form1" runat="server"> <div class="c_clips" id="c_clips"> <div class="carousel-component" id="mycarousel" style="width: 100%; display: block;"> <div class="carousel-clip-region" style="width: 100%;"> <ul style="position: relative; left: 0px; top: 0px;" class="carousel-list carousel-horizontal"> <li id="mycarousel-item-1" class="loaded first"> <div class="result size_m"> test1 </div> <div class="result size_m"> test2 </div> <div class="result size_m"> test3 </div> <div class="result size_m"> test4 </div> </li> <li id="mycarousel-item-2" class="loaded"> <div class="result"> test2.1 </div> <div class="result"> test2.2 </div> <div class="result"> test2.3 </div> <div class="result"> test2.4 </div> <div class="result"> test2.5 </div> <div class="result"> test2.6 </div> <div class="result"> test2.7 </div> <div class="result"> test2.8 </div> <div class="result"> test2.9 </div> </li> <li id="mycarousel-item-3" class="loaded"> <div class="result"> test2.1 </div> <div class="result"> test2.2 </div> <div class="result"> test2.3 </div> <div class="result"> test2.4 </div> <div class="result"> test2.5 </div> <div class="result"> test2.6 </div> <div class="result"> test2.7 </div> <div class="result"> test2.8 </div> <div class="result"> test2.9 </div> </li> </ul> </div> </div> </div> </form></body> HTML: i would like to view the carousel list from right to left meaning the first mycarousel-item-1 group will be the first to show on the left side to see mycarousel-item-2 and on the left side to see mycarousel-item-3 and here is the style i use: I have tried to dir rtl on the body on the ul and on the ul li didnt worked please advice .c_clips { width:100%; z-index:6; } Common_result.css (line 1843) body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; } Common_result.css (line 1) Inherited frombody html, body { direction:ltr; } Common_result.css (line 225) body { color:#333333; direction:ltr; font:12px arial; } Common_result.css (line 212) Inherited fromhtml html, body { direction:ltr; } element.style { display:block; width:100%; } .carousel-component { -moz-border-radius:6px 6px 6px 6px; color:#618CBE; padding:0; } Common_result.css (line 4112) .carousel-component { display:none; overflow:hidden; position:relative; width:auto !important; } Common_result.css (line 4052) .carousel-component { -moz-border-radius:6px 6px 6px 6px; color:#618CBE; padding:0; } Common_result.css (line 2647) body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; } Common_result.css (line 1) Inherited frombody html, body { direction:ltr; } Common_result.css (line 225) body { color:#333333; direction:ltr; font:12px arial; } Common_result.css (line 212) Inherited fromhtml html, body { direction:ltr; } element.style { width:100%; } #mycarousel .carousel-clip-region { margin:0 0 0 130px; } Common_result.css (line 4102) .carousel-component .carousel-clip-region { position:relative; } Common_result.css (line 4096) body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; } Common_result.css (line 1) Inherited fromdiv#mycarousel.carousel-component .carousel-component { color:#618CBE; } element.style { left:0; position:relative; top:0; } .carousel-component ul.carousel-list { line-height:0; margin:0; padding:0; } #mycarousel .carousel-list li { height:464px; padding:7px 5px 20px 0; width:618px; } Common_result.css (line 1929) .carousel-component .carousel-list li { -moz-user-select:none; color:#666666; font:10px verdana,arial,sans-serif; margin:0; padding:0; text-align:center; } Common_result.css (line 4122) .carousel-component .carousel-list li { list-style:none outside none; overflow:hidden; }
use float: right; on li elements? but it wont move circle on right side .. u probably have to use picture as a bakground ..
What are you even trying to achieve there? Your attempt of explaining what's actually gone wrong was a fail, to say the least. That broken English aside, the better you format your question, the more answers you're gonna get. It's that simple. Whenever I spot one of those annoying buzzwords like "slider" or "carousel" or "parallax" (not the method of measuring distance, mind you), I just go WHY?!! Is it so difficult to do things properly? On a side note, that code you wrote is complete gibberish! While I'm not going to comment the complete lack of a proper DOCTYPE and HEAD since this is probably (and I hope) a test, or some rough sketch, that BODY isn't any better either. Why would you want to put a FORM there, while its kids are all non-form elements? And all those pointless DIV with pointless and badly named classes, what purpose do they serve exactly? Also, the reason why you use classes (and ID to some extent) in the first place is to separate your markup from the styling. So why would you also crap it up with inline styling? This: <ul style="position: relative; left: 0px; top: 0px;" class="carousel-list carousel-horizontal"> <li id="mycarousel-item-1" class="loaded first"> <div class="result size_m"> test1 </div> <div class="result size_m"> test2 </div> <div class="result size_m"> test3 </div> <div class="result size_m"> test4 </div> </li> ... HTML: ...is just wrong, and I hope you know why. Why all those DIV? They are completely useless. Also, if all the children of the same type get the exact same styling, they DON'T need a class each! Let alone the same one. I am not going to comment any of that CSS because bad markup implies bad style sheet.