 vertical align to top, mid, and bottom, want text to appear at 3 levels, top, mid, and bottom |
  |
| gocyn |
 Aug 13 2007, 12:49 PM
Post
#1
|
|
Group: Members Posts: 5 Joined: 13-August 07 Member No.: 3,553  |
Hello everyone,
I understand how to vertically align something on a page, by using a 1row, 1column 100% width and height table with valign. But here's what I want to do now: I want the title of the book to be at the top of the page, the author's name at the middle of the page, and then the date at the bottom of the page. The .pdf has example of the layout I want to pull off. How would i do that? Thank you for your help. Attached File(s) 
layoutexample.pdf ( 44.41k )
Number of downloads: 344 |
  |
 
|
| pandy |
Aug 13 2007, 03:35 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
With a table? 3 cells in 3 rows. Use valign="top" in the top cell, valign="middle" in the middle cell and valign="bottom" in the bottom cell.
If you use a doctype you'd want one that gives you quirks mode, or you need additional CSS to pull off the 100% height. |
|
|
|
| gocyn |
Aug 13 2007, 04:45 PM
Post
#3
|
|
Group: Members Posts: 5 Joined: 13-August 07 Member No.: 3,553 |
QUOTE(pandy @ Aug 13 2007, 04:35 PM)  With a table? 3 cells in 3 rows. Use valign="top" in the top cell, valign="middle" in the middle cell and valign="bottom" in the bottom cell. If you use a doctype you'd want one that gives you quirks mode, or you need additional CSS to pull off the 100% height. Thank you. I have the 3 cells in 3 rows set up now. What's the additional CSS i need to pull of the 100% height? Here's my code now: CODE <html> <head> <style type="text/css"> td { text-align: center; } </style> </head> <body > <table border="0" align="center"> <tr> <td valign="top">This is the Title</td> </tr> <tr> <td valign="middle">by <br> Gocyn ibn Someone <br> Jerusalem </td> </tr> <tr> <td valign="bottom">Publishing <br> Address <br> Goes Here </td> </tr> </table> </body> </html> |
|
|
|
| pandy |
Aug 13 2007, 08:16 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Since you don't use a doctype you just need to make the table 100% high.
If you after all use a doctype on the real page, here's the full story. http://web.archive.org/web/20060902014151/...percheight.html |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:09 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC