1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to show <ul><li> elements from right to left using css

Discussion in 'CSS' started by eyalb, Jul 2, 2010.

0
  1. #1
    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;
    }
     
    eyalb, Jul 2, 2010 IP
  2. Wamer

    Wamer Greenhorn

    Messages:
    73
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #2
    use float: right; on li elements? but it wont move circle on right side .. u probably have to use picture as a bakground ..
     
    Wamer, Jul 2, 2010 IP
  3. dzboudjemaa

    dzboudjemaa Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    I've the same problem in blogger template I'm trying to change it to rtl it's really annoying :(
     
    dzboudjemaa, Apr 24, 2015 IP
  4. Phil S

    Phil S Member

    Messages:
    60
    Likes Received:
    18
    Best Answers:
    4
    Trophy Points:
    35
    #4
    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.
     
    Phil S, Apr 24, 2015 IP