Quote:
Originally Posted by Psymon
Houston, we have a problem!
I thought I'd stay up all night and try to get all my tables re-done, and as soon as I started on the first one in the book I ran into a problem. Here's a screenshot of how it ended up looking in ADE. As I mentioned in my last reply, I thought I'd give it (the table, and all tables) a left margin of 3.2em -- which is the same that I have my poems and "blockquotes" set at -- but giving the table that margin seems to move the whole table into the right-hand margin by that much (if I delete that margin-left:3.2em then everything looks okay).
I tried different things -- using padding instead of margin (then the table goes flush-left, no indentation at all), and giving the table a right margin of 3.2em, too (no effect all), and I have no idea what to do.
Any ideas? If you need more info, feel free to ask away -- here's a screenshot of how it's turning out, though. You can see the problem toward the bottom of the table, where there's the line in the right-hand column that says "I carried a good part on my back."
|
Hi Psymon:
It seems that you didn't read this part of my original post:
Quote:
You have to set a width for the whole table, and then a margin-left to get what you want. For example your table will be centered if you give the table a width of 95% and a margin-left of 2.5%. But do that by enclosing the table in a div tag with the desired width. In this case I used a width of 80% (of the screen) and a left/rigth margins of 10% (because 80% + 10% + 10% = 100%). But you, use the values you like.
|
And don't use "em" as margin-left (because that margin will vary when users change font size). Instead of "em" USE
"%". Try different percentages to know what is -more or less- equal to 3.2em. Of course, after that you have to change the width of the tables according to that margin (remember table width is equal to 100% - left margin % * 2). Once you have the table width, you can set that width for all tables by adding to your .css stylesheet the following:
Code:
.table_width { /* this class is for the <div> tag that will enclose any of your tables */
width: X%; /* Here instead of X you'll write your desired width */
}
table {
width: 100%;
}
Then in your .xhtml file you should use something like:
Code:
<div class="table_width">
<table>
....
....
</table>
</div>
Regards
Rubén