 HTML Rotating My Images |
  |
| ralager |
 Jun 21 2010, 02:37 AM
Post
#1
|
|
Group: Members Posts: 3 Joined: 21-June 10 Member No.: 12,145  |
Hi all,
Hope you won't mind helping an HTML newbie. Here's my situation: I'm trying to create a simple HTML table to keep track of the results of a card game. Unfortunately, the game, Skat, is fairly complicated and thus has a lot of data to keep track of. So if I write all of the headers horizontally, the columns will be too wide for the table to fit comfortably onto one page (this is important, because I want users to have the ability to print it out). I don't know CSS and don't really want to learn it, because I probably won't be doing too much web development in the near future. So I decided that, to get vertical text, I would just make images of the text that I wanted vertical and rotate them all 90 deg. This seemed like a great idea until, for some reason, the images started being rotated back to the horizontal. The album containing the images is at the following site, and as you can see, they all have vertical text: http://s914.photobucket.com/albums/ac342/ralager/skatgui/ The code that I'm using to create the table headers is as follows: <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tournament Results: Round 1, Table 1</title> </head> <body> <h1 align=center>Round 1, Table 1</h1> <table border="1"> <tr> <th colspan="18">Date:</th> <th colspan="3">Round:</th> <th colspan="4">Table #:</th> </tr> <tr> <th rowspan="8" colspan="1"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/game_number.gif" border="0" alt="#"> </th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/game_value.gif" border="0" alt="Value"> </th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/with_jacks.gif" border="0" alt="With"></th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/without_jacks.gif" border="0" alt="Without"></th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/hand.gif" border="0" alt="H"></th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/schneider.gif" border="0" alt="S"></th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/schneider_ann.gif" border="0" alt="SA"></th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/schwarz.gif" border="0" alt="W"></th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/schwarz_ann.gif" border="0" alt="WA"></th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/ouvert.gif" border="0" alt="O"></th> <th colspan="2" rowspan="5">Game Pts</th> <th colspan="3" rowspan="2">Username:</th> <th colspan="3" rowspan="2">Username:</th> <th colspan="3" rowspan="2">Username:</th> <th colspan="3" rowspan="2">Username:</th> <th rowspan="8"><img src="http://i914.photobucket.com/albums/ac342/ralager/skatgui/passed.gif" border="0" alt="Pass"></th> </tr> </table> </body> </html> --> And the output looks like this, where only 3 of the images with vertical text are displayed without being rotated:  I hope someone can tell me what's going on and how to fix it. Cheers, Ryan |
  |
 
|
| Brian Chandler |
Jun 21 2010, 02:49 AM
Post
#2
|
|
Jocular coder  Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
HTML doesn't "do" rotating images. So either the images you have contain the text in this direction or that direction. You need to rotate the content of images as needed, using an image manipulation program -- there are a number of lightweight programs that do simple operations like this which will be quicker than struggling with one of the monsters like GIMP or Photoshop.
|
|
|
|
| ralager |
Jun 21 2010, 02:57 AM
Post
#3
|
|
Group: Members Posts: 3 Joined: 21-June 10 Member No.: 12,145 |
I've already rotated the images so that the text is all vertical. But for some reason, the text is appearing vertical in only 3 of my images. I've tried rotating the text both on a local problem (Microsoft Paint) and on Photobucket's image editor.
For the 3 images where the text does appear vertical, I simply rotated them 90 deg in Photobucket's editor. I've tried this with the other images, but it's not working. It's really strange. |
|
|
|
| Brian Chandler |
Jun 21 2010, 03:38 AM
Post
#4
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Right: please give the URL of an image in the page including vertical text, and the URL of the page in which the same image appears rotated.
Likely causes of the (apparent) problem: you have cached versions of the images in your browser; you have saved the rotated image with a different name (e.g. text.JPG instead of text.jpg); etc |
|
|
|
| ralager |
Jun 21 2010, 03:49 AM
Post
#5
|
|
Group: Members Posts: 3 Joined: 21-June 10 Member No.: 12,145 |
Thanks for your time. I think I've actually solved the problem. I remade all the images in a photo editor and uploaded them to a different album online.
You're probably right that my browser had cached versions of the images with horizontal text, because I rotated the new images before uploading them and everything worked out fine. Sorry for the trouble. Cheers. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 01:07 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC