• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

Image in Vertical Direction

Dears,

I want to disply an image in vertical direction within a table cell.
What I have to do for that? I have tried valign but it was not successful.

Thanks in Advance.
0
sreejith_y
Asked:
sreejith_y
  • 5
  • 5
  • 2
2 Solutions
 
Richard QuadlingSenior Software DeverloperCommented:
Hi sreejith_y,


Do you mean you want to rotate the image? Or have the image span several rows? Or both?

Regards,

Richard Quadling.
0
 
DreamMasterCommented:
You can't rotate an image using HTML alone. You'll need to rotate the image 90 degrees (either clockwise or counter clockwise) and then place it within the table cell to display it vertically. There are ways to programattically rotate the image, but you'll need server side coding to do that.

Regards,
Max.
0
 
apurvabevinCommented:
You can try using CSS like this to achieve vertical alignment... ( see <td style="vertical-align:middle;"> )

<table width="200" height="200">
      <tbody>
            <tr>
                  <td style="vertical-align:middle;">
                        <img src="..." alt="" />
                  </td>
            </tr>
      </tbody>
</table>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
DreamMasterCommented:
That will not rotate the image 90 degrees apuryabevin..

Regards,
Max.
0
 
Richard QuadlingSenior Software DeverloperCommented:
You can rotate text if you use some CSS, but I think this only works in IE. And I've never tried it with an image. I doubt it will work on an image.
0
 
DreamMasterCommented:
The only way to rotate images is using some fancy objects that can manipulate images..

We have build one into an editor recently. We could crop images, rotate images, resize images...the works. It takes a component to do it...you'll be hardpressed to do it in plain HTML...it's downright impossible...

Regards,
Max.
0
 
Richard QuadlingSenior Software DeverloperCommented:
<html>
<head>
<title>Rotated image</title>
</head>
<body>
<div style="writing-mode:tb-rl; dir:ltr;">
<img src="http://www.experts-exchange.com/images/10Years.gif" />
Some text
</div>
</body>
</html>

This is what I found. Only TEXT can be adjusted to look like it is rotated but this only works in IE. Images are NOT rotated.

0
 
Richard QuadlingSenior Software DeverloperCommented:
<html>
<head>
<title>Rotated image</title>
</head>
<body>
<div>
<img src="http://www.experts-exchange.com/images/10Years.gif" style="filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';" />
Some text
</div>
</body>
</html>

Yep! Got the image rotated but again only IE supports this. Nothing in FF.
0
 
Richard QuadlingSenior Software DeverloperCommented:
But if you ARE only developing for IE, then you CAN use the above methods to rotate images.

http://www.blooberry.com/indexdot/css/properties/intl/writingmode.htm for text

and

http://msdn.microsoft.com/workshop/author/filter/reference/properties/rotation.asp for images
0
 
apurvabevinCommented:
I think sreejith_y is asking for a way to achieve vertical alignment and NOT rotate the image. He mentions "valign" which he may have used incorrectly... for example, "center" instead of "middle".
0
 
DreamMasterCommented:
Could be...but sreejith_y DOES state that the image should be displayed in vertical direction...which would indicate...rotated 90 degrees.. ;)
0
 
DreamMasterCommented:
Is this question answered? It's been over 2 months since the last response.

Regards,
Max.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now