Results 1 to 4 of 4

Thread: Rotating Text

  1. #1
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    332
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default Rotating Text

    I'm currently rotating text [Currently in webkit browsers only for this test] but it seems like i am doing something totally wrong. I cant seem to get the 'div' inside the 'li'.

    Here is my code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Rotation</title>
    <style>
    * { padding:0; margin:0 auto;}
    li { list-style:none;}
    
    .rotate { width: 90%;}
    .rotate>li {
    	width:20px;
    	height:300px;
    	float:left;
    	border:1px solid black;
    }
    .rotate>li:first-child {
    	border-left:1px solid black;
    }
    .r {
    	height:20px;
    	width:300px;
    	-webkit-transform:rotate(-90deg);
    	border:1px solid red;
    }
    
    .spacer {clear:both}
    </style>
    </head>
    <body>
    <div>
    <ul class="rotate">
    	<li><div class="r">Group 1</div></li>
    </ul>
    <div class="spacer"></div></div>
    </body>
    </html>
    As you will notice the red box is suppose to be in the black box. Any idea how to fix this?
    Last edited by Deadweight; 03-02-2014 at 12:46 AM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Crazykld69,

    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Rotation</title>
    
    <style>
    * { 
        padding:0; 
        margin:0;
        list-style-type:none;
     }
    body {
        background-color:#f0f0f0;
     }
    #rotate { 
     /* 
        the width value is the li element's overall width 
        -   (  width, padding, margin and border  )   - 
        multiplied by the actual number of li elements 
     */
        width:336px;
        padding:4px 0 4px 4px;
        margin:20px auto;
        border:1px solid #999;
        border-radius:13px;
        background-color:#fff;
        overflow:hidden;
        box-shadow:8px 8px 8px #999;
     }
    #rotate li {
        float:left;
        width:32px;
        height:302px;
        padding:2px;
        margin-right:4px;
        border:1px solid #000;
        border-radius:8px;
     }
    .r {
        line-height:30px;
        width:300px;
        margin-top:2px;
        border:1px solid #f00;
        border-radius:5px;
        background-color:#fee;
        -webkit-transform-origin:150px 150px;
        transform-origin:150px 150px;
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg);
        text-indent:20px;
        box-shadow:inset 0 0 10px #666;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="rotate">
     <li><div class="r">Group 1</div></li>
     <li><div class="r">Group 2</div></li>
     <li><div class="r">Group 3</div></li>
     <li><div class="r">Group 4</div></li>
     <li><div class="r">Group 5</div></li>
     <li><div class="r">Group 6</div></li>
     <li><div class="r">Group 7</div></li>
     <li><div class="r">Group 8</div></li>
    </ul>
    
    </body>
    </html>
    The code has been tested in...
    1. IE11
    2. Firefox 27.0.1
    3. Chrome 33.0
    4. Opera 12.16
    5. Opera 19.0
    6. Safari 5.1.7

    coothead
    Last edited by coothead; 03-01-2014 at 11:58 PM. Reason: tpynig eorrr!!

  3. The Following User Says Thank You to coothead For This Useful Post:

    Deadweight (03-02-2014)

  4. #3
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    332
    Thanks
    5
    Thanked 30 Times in 29 Posts

    Default

    That is perfect thanks so much
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    No problem, you're very welcome.

    coothead

Similar Threads

  1. CSS Image Rotating
    By Bloodshot in forum CSS
    Replies: 3
    Last Post: 05-02-2009, 05:54 PM
  2. Single display line rotating/scroll text display.
    By acctman in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-04-2008, 03:25 AM
  3. Rotating Ad Scripts
    By webkahuna in forum JavaScript
    Replies: 2
    Last Post: 10-09-2006, 02:05 AM
  4. Rotating Menu
    By xx.silver.wings.xx in forum JavaScript
    Replies: 0
    Last Post: 10-02-2006, 03:21 PM
  5. Rotating Text Question
    By DPGumby in forum HTML
    Replies: 1
    Last Post: 01-23-2006, 08:03 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •