SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question css3 rotate <li>?

    Hiya,

    I want to set up a horizontal navigation menu with each list item rotated ant-clockwise 45degs.

    The list items rotate fine with the appropriate CSS3 mark up, although they do seem to appear much longer than the actual text, which makes me curious but isn't the main issue...

    When i style the <li>'s to display inline this seems to over ride the rotation.....

    am I missing something obvious? Have I been awake too long? is it time to take a break from the screen or is this just, not possible?

    Any insights much appreciated

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    When i style the <li>'s to display inline this seems to over ride the rotation.....
    I didn't look at the specs (because I won't use rotated text... too many browsers don't support it and it can distort the text), but it wouldn't surprise me to learn that items must be display: block to be rotated. Similar to, you can't add vertical margins to someone who's display: inline.

    You may have to keep them blocks, and use floating (or maybe display: inline-block) to get them in a row if that's what you're doing.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    According to the specs transform does apply to block and inline elements which seems to be supported in Firefox but not webkit.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by theSpecs
    Percentages: refer to the size of the element's box
    I can just see a whole can of anonymous-box/render-box/font-box worms here... : )

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I can just see a whole can of anonymous-box/render-box/font-box worms here... : )
    If they can't get percentages right for simple things then there's not much hope for the more complicated areas such as transitions and transforms.

    I'm seeing a lot of quirks in some of these new css3 properties. It seems in some cases that using some css3 properties (gradients etc) is much slower (render time and browser performance issues with scrolling) than using actual images and kind of defeats the purpose.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    With all the bizarro boxes inlines-with-text have, I can imagine them not being so simple.

    It seems in some cases that using some css3 properties (gradients etc) is much slower (render time and browser performance issues with scrolling) than using actual images and kind of defeats the purpose.
    I guess that makes sense, though: Just calling another file via an img tag would be more work on the server than the browser, whereas the browser has to build the gradient itself while rendering.
    That plus IE9's rounded-corners-and-gradients bug... arg.


Tags for this Thread

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
  •