SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,666
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    creating vertical text?

    on thispaghe,
    http://ronisfineart.com/painting4.shtml
    I'm trying to create some vertical text to the left of those numbers (1-15).
    I figure to follow this rule to make the text,

    color:#333; border:0px solid red; writing-mode:tb-rl; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform: rotate(270deg); white-space:nowrap; display:block; bottom:0; width:20px; height:20px; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; font-size:24px; font-weight:normal; text-shadow: 0px 0px 1px #333;

    but really dont know how to add the markup
    do I simply add a <h2> just before the <ul> or what...
    Thanks...
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    it depends on what the text means. If you want to indicate a header for the list , then yes.

    Markup would be :
    <hx>Your Header text</hx>
    <ol>...

    Aesthetically, I dont's see where you would put the vertical header where it would fit well on your lay ot. But in anycase you can use POSITION:Relative on the container, and position ABSOLUTE on the Hx and thus place it that way. Also be aware that the text wont be vertical in browsers which don't support transform.

    BTW, if you wanted the text to drop-vertical :
    R
    a
    n
    d
    o
    m

    t
    e
    x
    t.

    you could do something like this:
    .verticalText{width :.5em; background: silver;text-align: center;word-wrap:break-word; padding:.5em; line-height: 1; float:left; margin-right: 1em}


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
  •