Grow your CSS skills. Land your dream job.

Text vertical align

  • # May 23, 2009 at 8:59 am

    Hellow,

    Is it possible to vertical allign text and not only in IE but in all browsers. I have searched the web but didn’t find any good solution.

    My website is http://shoot.palenta.be

    The problem is the near every album (image) there must be a name and a date vertical. Now one album is on image. I want to seperate this in 3 divs. So I have the name (1), the image of the album (2) and the date (3). That should slow down the loading time of the site. But I want the text vertical.

    Maybe someone has some script that I can use or another solution.

    Thanks ;)

    Filip

    # May 23, 2009 at 9:34 am

    My initial reaction was no it’s not possible, but it is quite an intriguing problem so I had a look aroud to see what I could find.
    Came up with this http://www.cssplay.co.uk/menus/vertical.html and this http://bytes.com/topic/javascript/answers/721811-solution-display-text-rotated-90-vertically-firefox-css.
    Personally I think I would be inclined to just do it with normal text and then replace the text with an image via css.

    # May 23, 2009 at 3:45 pm

    Did that answer your question? Or are you talking about just having the same amount of space above and below a line of text?

    # May 24, 2009 at 10:09 am

    Sorry for the late response.

    I mean that I want to turn text 90 degrees left like you can see on my website. Now I’m using images, but if I can use plain text and each time the same background, then the website would be much faster. ( example image http://shoot.palenta.be/albums/an2/analbum2.jpg ) I want to cut it in 3 parts.

    thx

    # May 24, 2009 at 10:29 am

    No it can’t be done at present. I believe it is part of the css3 spec but no browser that I am aware of supports it.

    I’ve just checked your page with YSlow and it actually rates pretty well, if you want to try and speed it up then you should look at adding ‘Expires headers’ http://developer.yahoo.com/performance/rules.html#expires and ‘gzipping your css and js files’ http://developer.yahoo.com/performance/rules.html#gzip

    # May 24, 2009 at 11:51 am

    Thank you for all the help. I’m gona fine tune my CSS a little bit, I know it’s still messy :)

    Thanks for the help ;)

    greetz

    Filip

    # May 24, 2009 at 10:30 pm

    Rotation is a possibility with proprietary CSS in webkit browsers:
    http://webkit.org/blog/130/css-transforms/

    Not supported enough to be used in very widespread situations though. Maybe there is something that could be done with JavaScript and <canvas>?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".