Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old November 20th, 2007, 04:07 PM
Registered User
 
Join Date: Nov 2007
Location: , ny, USA.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default Vertical Labels

I have the following code that displays 3 columns vertically :

<style>
.verticaltext
{
writing-mode: tb-rl;
filter: flipv fliph;
width: 100%
align: left;
}
</style>

<table border='1'>
<tr>
<td width='1'><div class='verticaltext'>Test-1
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;
              </div></td>

<td width='1'><div class='verticaltext'>Test-12</div></td>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </div></td>

<td width='1'><div class='verticaltext'>Test-123</div></td>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             </div></td>

</tr>
</table>

I put the padding (&nbsp;) at the end to try and align the columns, however it doesn't seem to work. There is an extra space in the first column. For the project I am working on, I will be dynamically building these columns base on the values of a table I will be querying. Any help woould be greatly appreciated.

Thanks,

Brian


Reply With Quote
  #2 (permalink)  
Old November 22nd, 2007, 08:13 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

You're having a couple problems. One...


Code:
<table border='1'>
<tr>
<td width='1'><div class='verticaltext'>Test-1

              </div></td>

<td width='1'><div class='verticaltext'>Test-12</div></td>

              </div></td>

<td width='1'><div class='verticaltext'>Test-123</div></td>

             </div></td>

</tr>
</table>
Unless this was just a typo, you're closing the div and the table cells twice for the second and third columns. Start by fixing that.

Two, using the character entities is trying to adjust the columns by manipulating their contents. This is probably the easiest way to approach a cross browser solution, but as you're finding it doesn't give you very fine control over the output. You should include a padding:1em; style rule (or whatever size you want) and/or specify width:5em; if you want each column to be exactly the same width. You'll need to check each browser to make sure they display properly. But if you spend just a little time googling "CSS Box Model" you can achieve much better results and get rid of the table altogether. Using some CSS-P (CSS Positioning) on the three divs is all you really need.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #3 (permalink)  
Old November 26th, 2007, 02:06 PM
Registered User
 
Join Date: Nov 2007
Location: , ny, USA.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
quote:Originally posted by chroniclemaster1
 You're having a couple problems. One...


Code:
<table border='1'>
<tr>
<td width='1'><div class='verticaltext'>Test-1
                       
              </div></td>

<td width='1'><div class='verticaltext'>Test-12</div></td>
                     
              </div></td>

<td width='1'><div class='verticaltext'>Test-123</div></td>

             </div></td>

</tr>
</table>
Unless this was just a typo, you're closing the div and the table cells twice for the second and third columns. Start by fixing that.

Two, using the character entities is trying to adjust the columns by manipulating their contents. This is probably the easiest way to approach a cross browser solution, but as you're finding it doesn't give you very fine control over the output. You should include a padding:1em; style rule (or whatever size you want) and/or specify width:5em; if you want each column to be exactly the same width. You'll need to check each browser to make sure they display properly. But if you spend just a little time googling "CSS Box Model" you can achieve much better results and get rid of the table altogether. Using some CSS-P (CSS Positioning) on the three divs is all you really need.
Thanks for you help, I really appreciate it. This is what my code looks like now :

<html>
<head><title></title></head>
<style type="text/css">
<!--
#container
{
width: 5px;
}
.verticaltext
{
width:10px;
height:100px;
text-left:right;
writing-mode: tb-rl;
filter: flipv fliph;
}
TD
{
FONT-SIZE: 8pt;
WIDTH: 5pt;
COLOR: navy;
FONT-FAMILY: Verdana;
TEXT-ALIGN: left
}
-->
</style>
<body>
<table align='center' border='1' cellspacing='0' width='250'>
<th>
  <div id="container">
        Horiz Heading</div>
</td>
<td><div id="container"><p class="verticaltext">
    Test-1</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-12</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-123</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-1234</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-12345</p></div></td>
</table>


Now, to get my "horiz heading" to line up at the bottom of the box.

Brian

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical align in reports janise Access 16 February 3rd, 2016 02:42 AM
Vertical alignment for a formula Slon Crystal Reports 1 April 16th, 2006 01:46 AM
how does one get vertical text in HTML? lcsgeek Classic ASP Professional 3 September 9th, 2004 08:47 PM
Vertical scrller applet sankar Java GUI 1 April 26th, 2004 08:43 PM
Vertical Menu Niaz Pro VB 6 2 October 14th, 2003 06:03 AM



All times are GMT -4. The time now is 11:25 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.