LifeInBinary Posted February 16, 2007 Share Posted February 16, 2007 Hey guys, I'm trying to lay my site out using tables. I have one table containing the top banner and top nav bar, then a table in the middle containing body text, then a table at the bottom containing copyright information. I've spaced everything out pretty well, but when I try to set the middle table containing the body text for width="800" height="341" - it seems to want to think that the entire cell can only hold one line of text.Also of note, I am trying to make the middle table with the text have a background image so that it maintains the graphical appearance of the rest of the site. That background image, as well as the logical alloted space for the middle table itself - is 800 pixels wide by 341 pixels high.I'll post the code for my entire index file, then I'll color all of my table code blue, then I'll color the code that I am having problems with red.I could host the site on geocities and provide a link if needed, but I think anyone with more experience with tables than me will probably notice what I am trying to do and know what I am doing wrong at first glance.Thank you guys for all the help - much appreciated as always!LifeInBinary. <html><head><title>test</title><!------------------------------><!--MOUSEOVER java script:BEGIN--><!------------------------------><script type="text/javascript">function mouseOverHome(){document.home.src ="buttons_home_over.jpg"}function mouseOutHome(){document.home.src ="buttons_home.jpg"}function mouseOverPictures(){document.pictures.src ="buttons_pictures_over.jpg"}function mouseOutPictures(){document.pictures.src ="buttons_pictures.jpg"}function mouseOverWritings(){document.writings.src ="buttons_writings_over.jpg"}function mouseOutWritings(){document.writings.src ="buttons_writings.jpg"}function mouseOverPortfolio(){document.portfolio.src ="buttons_portfolio_over.jpg"}function mouseOutPortfolio(){document.portfolio.src ="buttons_portfolio.jpg"}function mouseOverLinks(){document.links.src ="buttons_links_over.jpg"}function mouseOutLinks(){document.links.src ="buttons_links.jpg"}function mouseOverDownloads(){document.downloads.src ="buttons_downloads_over.jpg"}function mouseOutDownloads(){document.downloads.src ="buttons_downloads.jpg"}function mouseOverContact(){document.contact.src ="buttons_contact_over.jpg"}function mouseOutContact(){document.contact.src ="buttons_contact.jpg"}</script><!----------------------------><!--MOUSEOVER java script:END--><!----------------------------></head><body bgcolor="#000000" style="color:#ffffff"><center>[color="#0000FF"]<table border="0" cellpadding="0" cellspacing="0"><tr> <td colspan="19"><img src="banner_border-horizontal.jpg"></td></tr><tr> <td colspan="19"><img src="banner_border-vertical.jpg"><img src="banner.jpg" alt="Welcome to The Life of Jay Williams"><img src="banner_border-vertical.jpg"></td></tr><tr> <td colspan="19"><img src="banner_border-horizontal.jpg"></td></tr><tr> <td><img src="buttons_border-vertical.jpg"></td> <td><img src="buttons_left.jpg"></td> <td><img src="buttons_border-vertical.jpg"></td> <td><a href="home.html"><img src="buttons_home.jpg" name="home" onmouseover="mouseOverHome()" onmouseout="mouseOutHome()" border="0" alt="Home"></a></td> <td><img src="buttons_border-vertical.jpg"></td> <td><a href="pictures.html"><img src="buttons_pictures.jpg" name="pictures" onmouseover="mouseOverPictures()" onmouseout="mouseOutPictures()" border="0" alt="Pictures"></a></td> <td><img src="buttons_border-vertical.jpg"></td> <td><a href="writings.html"><img src="buttons_writings.jpg" name="writings" onmouseover="mouseOverWritings()" onmouseout="mouseOutWritings()" border="0" alt="Writings"></a></td> <td><img src="buttons_border-vertical.jpg"></td> <td><a href="portfolio.html"><img src="buttons_portfolio.jpg" name="portfolio" onmouseover="mouseOverPortfolio()" onmouseout="mouseOutPortfolio()" border="0" alt="Portfolio"></a></td> <td><img src="buttons_border-vertical.jpg"></td> <td><a href="links.html"><img src="buttons_links.jpg" name="links" onmouseover="mouseOverLinks()" onmouseout="mouseOutLinks()" border="0" alt="Links"></a></td> <td><img src="buttons_border-vertical.jpg"></td> <td><a href="downloads.html"><img src="buttons_downloads.jpg" name="downloads" onmouseover="mouseOverDownloads()" onmouseout="mouseOutDownloads()" border="0" alt="Downloads"></a></td> <td><img src="buttons_border-vertical.jpg"></td> <td><a href="contact.html"><img src="buttons_contact.jpg" name="contact" onmouseover="mouseOverContact()" onmouseout="mouseOutContact()" border="0" alt="Contact"></a></td> <td><img src="buttons_border-vertical.jpg"></td> <td><img src="buttons_right.jpg"></td> <td><img src="buttons_border-vertical.jpg"></td></tr><tr> <td colspan="19"><img src="banner_border-horizontal.jpg"></td></tr><tr> <td colspan="19"><img src="spacer_horizontal.jpg"></td></tr></table>[/color][color="#FF0000"]<!--THIS IS WHERE IM AT--><table border="0" cellpadding="0" cellspacing="0" width="800" height="341"><tr> <td background="body.jpg">this is where all the actual content of my site should be...</td></tr></table><!--THIS IS WHERE IM AT-->[/color][color="#0000FF"]<table border="0" cellpadding="0" cellspacing="0"><tr> <td colspan="19"><img src="spacer_horizontal.jpg"></td></tr><tr> <td colspan="19"><img src="banner_border-horizontal.jpg"></td></tr><tr> <td><img src="buttons_border-vertical.jpg"></td> <td><img src="copyright_left.jpg"></td> <td><img src="buttons_border-vertical.jpg"></td> <td><img src="copyright.jpg"></td> <td><img src="buttons_border-vertical.jpg"></td> <td><img src="copyright_right.jpg"></td> <td><img src="buttons_border-vertical.jpg"></td></tr><tr> <td colspan="19"><img src="banner_border-horizontal.jpg"></td></tr></table>[/color]</center></body></html> Note: The <!--THIS IS WHERE IM AT--> comments were just to let me know where I stopped at for the night, lol. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 21, 2007 Share Posted February 21, 2007 I'm not sure what you mean by the browser thinking that only one line of text goes in the cell, I've never seen that. But the default vertical alignment for the cell is in the middle, so by default it puts the text vertically aligned in the middle of the cell. You can change that with CSS:<td style="background: url(body.jpg); vertical-align: top; text-align: left;"> Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 21, 2007 Author Share Posted February 21, 2007 I'm not sure what you mean by the browser thinking that only one line of text goes in the cell, I've never seen that. But the default vertical alignment for the cell is in the middle, so by default it puts the text vertically aligned in the middle of the cell. You can change that with CSS:<td style="background: url(body.jpg); vertical-align: top; text-align: left;">Thanks justsomeguy, that is probably what I needed to know - I just didn't explain it very well.Also, do I need to do <style type="text/css"> before the <td> for the cell and put </style> after it?I guess it would look like this:<table> <tr> <td>Normal</td> </tr> <tr> <td>Normal</td> </tr> <tr> <style type="text/css"> <td style="background: url(body.jpg); vertical-align: top; text-align: left;">Whatever text goes here</td> </style> </tr> <td>Normal</td> </tr> <tr> <td>Normal</td> </tr></table> Again, thanks for your help justsomeguy - I really appreciate it.LifeInBinary. Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 21, 2007 Author Share Posted February 21, 2007 You know what, maybe I should just host what I'm having problems with and give you a link.If I do that would you mind checking it out when you get a chance?I'll be working on that...Thanks for your time,LifeInBinary. Link to comment Share on other sites More sharing options...
aspnetguy Posted February 21, 2007 Share Posted February 21, 2007 no so not put <style> and </style> around your TD. You only use <style></style> to define page wide CSS classes and it can(should) only be done in <head></head>.<td style="your css"></td> is the correct way to use inline css. Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 21, 2007 Author Share Posted February 21, 2007 (I THINK THE FORMATTING GOT ALTERED, BUT YOU SHOULD BE ABLE TO SEE WHAT I MEAN)Basically, I'm just trying to interface a website with a couple of boxes and have text in those boxes.┌───────────────────────────────────────────┐│ │ <--[bANNER]├───────────────────────────────────────────┤│ LINK1│LINK2│LINK3│LINK4│LINK5│LINK6│LINK7│LINK8 │ <--[bUTTONS]└───────────────────────────────────────────┘┌────────┐ ┌──────────────────────┐ ┌────────┐│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--[This is where I'm having the problems. The middle box is one cell.]│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--[When I insert text, it appears aligned left horizontally and centered]│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--[vertically. I want it to be centered horizontally and aligned to top ]│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--[vertically. I also am using a background image on the text boxes ]│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--[to carry over the style of the banner. I haven't tried the other two ]│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--[boxes yet. I want the text selectable, so I can't make it part of the]│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │ <--[ing to geocities, but if you still need me to I can. Let me know. ]│░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ ││░░░░░ │ │ ░░░░░░░░░░░░░░ │ │░░░░░ │└────────┘ └──────────────────────┘ └────────┘┌───────────────────────────────────────────┐│ │ <--[COPYRIGHT]└───────────────────────────────────────────┘So should your method work for this? Link to comment Share on other sites More sharing options...
justsomeguy Posted February 21, 2007 Share Posted February 21, 2007 Yes it will work, have you tried it? Add the CSS to the tds that you want it to apply to. The CSS isn't very confusing, so you should be able to look at it and tell what it is doing. It adds a background image and aligns the text. Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 21, 2007 Author Share Posted February 21, 2007 Yes it will work, have you tried it? Add the CSS to the tds that you want it to apply to. The CSS isn't very confusing, so you should be able to look at it and tell what it is doing. It adds a background image and aligns the text.Sorry justsomeguy, I haven't actually tried it yet - I'm sure it should work and it's exactly what I need probably - but I have had to turn my attention to a new freelance job offer. I'll get around to it.Thanks for the help though,LifeInBinary. Link to comment Share on other sites More sharing options...
LifeInBinary Posted March 2, 2007 Author Share Posted March 2, 2007 Nevermind. I figured out a much easier way. I just added valign="top" to the <td>.So easy, and right in front of my eyes.Sorry I bothered you guys with this...Thanks,LifeInBinary. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now