|
HTML - Making Table Fill 100% Height
Hi there
I am trying to make a template whereby the whole table fills 100% height of the browser window. My problem is, is that i have a nested table containing 2 rows and 2 tds. The first row and td needs to be aligned to the top and the 2nd needs to align to the bottom - and to the bottom of the browser window. This is my code so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Homepage</title> <style type="text/css" media="all"> body { margin:0; padding:0; height:100%; } table { border-collapse:collapse; border-spacing:0; } td { margin:0; padding:0; } html { height:100%; } </style> </head> <body > <table width="100%" cellpadding="0" cellspacing="0" style="height:100%;"> <tr> <td width="50%" style="background-image:url(leftheader_image.gif); background-repeat:repeat-x; background-position:top right;"></td> <td width="980" height="244" style="background-image:url(header_image.jpg); background-repeat:no-repeat; background-position:top left; vertical-align:top;"><img src="spacer.gif" width="980" height="1" alt="" /></td> <td width="50%" style="background-image:url(rightheader_image.gif); background-repeat:repeat-x; background-position:top left;"></td> </tr> <tr> <td width="50%" style="background-image:url(leftbody_image.jpg); background-repeat:repeat-x; background-position:top right; background-color:#fbefd5; vertical-align:bottom;" ><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="50%" height="119" style="background-image:url(leftgrass_image.gif); background-repeat:repeat; background-position:top right; vertical-align:bottom;"></td> </tr> </table></td> <td width="980" bgcolor="#fbefd5" style="background-image:url(body_image.jpg); background-repeat:repeat-x; background-position:top left; background-color:#fbefd5; height:100%; vertical-align:top;"><table width="100%" style="height:100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><p>content</p></td> </tr> <tr><br /> <td width="980" height="118" style="vertical-align:bottom; background-image:url(grass_image.gif); background-position:top left; background-repeat:repeat-x;"> </td> </tr> </table></td> <td width="50%" style="background-image:url(rightbody_image.jpg); background-repeat:repeat-x; background-position:top left; vertical-align:bottom; background-color:#fbefd5; "><table width="100%"> <tr> <td width="50%" height="118" style="background-image:url(rightgrass_image.gif); background-repeat:repeat; background-position:top left; "></td> </tr> </table></td> </tr> </tr> </table> </body> </html> What i need is for the left grass image, the grass image and the right grass image all aligned to the bottom of the browser window, but all these images need to be set as backgrounds as i need the left and the right to repeat on the x and footer links will be overlayed to the grass image in the middle. The result i am getting at the moment is IE7 displays 100% further than the height of the browser window, resulting in a scroll and the grass image does not align to the bottom along with the left and right grass. This is near the top directly beneath the content td. In Firefox, all images are aligned to the bottom, but the grass image is pushed further down than the left and right and so is not lined correctly, resulting in a slight scroll. The left and right grass images are aligned at the bottom of the browser window, before needing to scroll to see the rest of the middle grass. I know that's a lot to take in, does it make sense? Thanks in advance. Similar TutorialsI will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this? Here's what I'm dealing with, visually: Any help would be welcome. Thanks. I want to make a table with two rows But i want to make sure that the data in the 2nd column is always align to the right.....Like this Data1 Data2 Data2 Data3 And not <tr><td>Data1<\td><td I want this side of the row to always be align to the right..>Data1</td></tr> Data2Data3 I know this is easy...But i am not quite sure how to do.... Hi I need to make a table to display data(obviously), but i only want to use divs. It needs 11 columns and a flexible amount of rows as i will be adding to it. I attempted to make one myself, but when i end and div tags, it goes straight to a new line. I dont want to use tables, it needs to be valid XHTML 1.0 transitional and cross-browser compatible. Can anyone help me? Thanks in advance, Chris I want "Marriage Encounter Talks" to appear under Sunrise room from 3:00 - 5:00 and Ohio Book Resale Setup to appear under Mountain View Room from 2:00 - 5:00. How can I do that ? This is my code. PHP Code: <table border="1" cellspacing="3" cellpadding="5" width="75%" height="100%" summary="This table contains Tuesdays reservations"> <caption align="bottom">All times listed in central time</caption> <thead> <tr> <th>Time</th> <th>Sunrise Room</th> <th>Mountain View Room</th> <th>Arbor Hall</th> <th>Mitchell Theater</th> <th>Gold Room</th> <th>Blue Room</th> <th>Green Room</th> </tr> </thead> <tr> <th>8:00</td> <td rowspan="5">Marriage Encounter</td> <td rowspan="2">Breakfast Club of Ohio</td> </tr> <tr> <th>8:30</th> </tr> <tr> <th>9:00</th> </tr> <tr> <th>9:30</th> </tr> <tr> <th>10:00</th> </tr> <tr> <th>10:30</th> </tr> <tr> <th>11:00</th> <td rowspan="2"></td> <td rowspan="2">Ohio Conference of Librarians<td> </tr> <tr> <th>11:30</th> </tr> <tr> <th>12:00</th> <td rowspan="3">Marriage Encounter Luncheon</td> </tr> <tr> <th>12:30</th> </tr> <tr> <th>1:00</th> </tr> <th>1:30</th> </tr> <tr> <th>2:00</th> <td rowspan="5">Ohio Book Resale Setup</td> </tr> <tr> <th>2:30</th> </tr> <tr> <th>3:00</th> <td rowspan="5">Marriage Encounter Talks</td> </tr> <tr> <th>3:30</th> </tr> <tr> <th>4:00</th> </tr> <tr> <th>4:30</th> </tr> <tr> <th>5:00</th> </tr> </table> Hi everyone, I am working on a table for a future website and I need some help. I need to make the text at the top vertical, as in taking the word and turning it 90 degrees to the left. The best way for me to explain this is to show u the problem/test page. http://aquariachat.com/bigchangesare...chartfeb23.php I am making the chart/table in a simple html editor if that information is of any use. Thanks a lot, Drew Im having an issue in some browsers with making a whole cell in a table a link. I have simplified my code to that below for ease of troubleshooting here. Using the code below, and assuming you have two image files named AlphaThumb.jpg (approx 80x100 px) and Alpha.jpg (A larger version of AlphaThumb.jpg) in a folder with the html and css files I achieve the desired result in IE7, IE8 & in Lunascape6 (Ver 6.3.4). However Firefox (Ver 3.6.13), Safari (Ver 5.0.3) & Opera (Ver 11.00) all have the same issue, in that the link doesn't work. If anyone has any ideas I'd be grateful for some input. Regards, Stoney ------------- The Html code ------------- <html> <link rel="stylesheet" type="text/css" href="Stylesheet1.css" /> <body> <table border="1" class="aggregatestable"> <tr> <a href="Alpha.jpg" target=_blank> <td class="productalpha"> </td> </a> <td class="productname">Alpha</td> <td>Some random text about our product Alpha.</td> </tr> </table> </body> </html> ------------ The css code ------------ td.productname { width: 100px; height: 80px; } td.productalpha { background-image: url(AlphaThumb.jpg); background-repeat: no-repeat; background-position: center; width: 100px; height: 80px; cursor: pointer; } Hello, I have a website constructed with tables since I haven't had the time to learn CSS. When the browser window gets resized, the table disappears and moves below my ad (aligned left). I want my table to NOT move even if the browser window is resized. I am able to achieve this by "converting tables to layers" but I don't like how it makes my site look and it messes up the format of some of my content. The code is: <table width="800" border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"><div align="center"><a href="index.htm"><img src="images/banner.png"width="800" height="120" border="0"></a> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td colspan="5"><div align="center"> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td><div align="center"><a href="index.htm"><img src="buttons/home.png" alt="Home Page" width="67" height="15" border="0"></a></div></td> <td><div align="center"><a href="videos.htm"><img src="buttons/videos.png" alt="Videos" width="85" height="15" border="0"></a></div></td> <td><div align="center"><a href="gallery.htm"><img src="buttons/gallery.png" alt="Gallery" width="107" height="15" border="0"></a></div></td> <td><div align="center"><a href="about.htm"><img src="buttons/about.png" alt="About" width="80" height="15" border="0"></a></div></td> <td><div align="center"><a href="contact.htm"><img src="buttons/contact.png" alt="Contact" width="108" height="15" border="0"></a></div></td> </tr> <tr> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> </tr> <tr bgcolor="#FFFFFF"> <td height="223" colspan="5"><p class="style2"> </p> <p class="style3"> </p> <p></p></td> </tr> </table> Thank you! Hi everybody! I have a jsp page with a form and a table. My aim is that when i press the submit button of the form,collect the data and fill the table with it. I am working with J2EE. I have already collected the data in a Java class,but I dont know how to introduce this data into the table. Best Regards! Hi I'm designing a simple website in NVU, but although it displays correctly in NVU and Firefox, for some reason the tables aren't centred in Internet Explorer (they stay on the left side of the browser). The site is at www.saturdaynightmusical.com Any tips on why this is displaying differently in IE would be greatly appreciated! Many thanks for your time. Hi, I am looking to get a table along the side of my page to stretch from top to bottom. I tried <table height="100%"> and .high {height:100%} ... <table class="high"> but it didn't work it only shows until the end of the table's content. Is there a way to do this? Thanks I have a table row with a form with several buttons. The row is twice the height of the buttons and I haven't been able to control the height. Here is snippet: <html> <head> </head> <body> <center> <table border='1' cellpadding='0' cellspacing='0'> <tr> <td align='center'> <form> <input type='button' value='Prev month' id='btnPrevID' onClick='MonthYearChange("prev")'> <input type='button' value='Next month' id='btnNextID' onClick='MonthYearChange("next")'> <input type='button' value='Change Mo/Yr' id='btnChgID' onClick='DropDownChangeMonthYear()'> </form> </td> </tr> </table> </body> </html> Hello all, I am making a website with the lay-out based on a table (I know I shouldn't, when will I ever learn? ;-)). The problem is the following: I have divided my page into several blocks: The lowest <td> row has been set at 544px while the top row has been set at auto. Firefox gives the correct output. In IE the lowest row is longer than 544 px (the red line gives the height it should have, the red arrow points to the real hight). Putting the height on 100% doesn't help because it stretches the top row over the complete page, leaving the bottom row out of the screen (the positive side of this is that now the bottom row is 544 px as I had orderd it to)... So does anyone have advice for me (besides the fact that I should make my lay-out with div's: tried it, but it just doesnt work for me :-)). Thanks for the help, JuliusV ps. I've checked my code (html and css) with w3 and no errors have been found. Im having an issue with the table row heights on my page, i have three rows: The top row has the navigation menu, the second had a sub navigation menu (previous and next) to go between pages and then the third is has the content. I want the top to rows to snug up with the top of the table (like the top 25%) and then the content to be in the middle of the bottom row. Barring putting 'height="25%"' in the tr tag, is there a good way to do this? Thanks Hi @ all! I am working on a layout with XHTML + CSS by use of a table, wich fills 100% of the browser window's height. Now here's my example: http://dennishoene.de.funpic.de/index2.html (Please just ignore the advt. popping up) I designed a simple grid for prospective contents. In Firefox, Safari and Opera it works fine, in IE not. I used fixed heights for the first line (30px), the second line (120px), the third line (30px) and the fifth line (30px). The fourth line should be variable (due to different screen resolutions), but in the end, the table should be of 100% height (see CSS-indications in <head>). It seems as the Internet Explorer simply does not take any notice of these values, whereas Firefox & the rest do (in detail: IE accepts the height: 100% statement, but ignores or deranges the fixed height values of the particular table cells/lines). How can I solve my problem? Any suggestions? Thanks in advance. Dennis Hi, My site is here I am having problems with the left side. It looks how I want it in Firefox but in IE it is ignoring my height commands and centering all the rows across the whole table. Anyone know how I can get this to look the same in Firefox and IE? Bit of a numpty so please be gentle Thanks Jon I'm using the following code to display a table with three columns. The first and third column each have a background image, so that these graphics will appear behind any text. The middle column does not have a background image. Instead, it has three images stacked on top of each other, whose combined height equal the height of the background images on the left and right (30+83+81=194). The table and three cells are given the same dimensions as their contents or background images. Code: <table border="0" cellpadding="0" cellspacing="0" width="584" height="194"> <tr> <td width="239" height="194" align="left" valign="middle" background="left.png"> START </td> <td width="117" height="194"> <img width="117" height="30" src="middle-top.png" border="0" /><br /> <img width="117" height="83" src="middle-middle.png" border="0" /><br /> <img width="117" height="81" src="middle-bottom.png" border="0" /> </td> <td width="228" height="194" align="right" valign="middle" background="right.png"> END </td> </tr> </table> In IE8 this seems to work fine, as it does in Firefox and Chrome. However, in IE7, I get this: You can see that the background begins to repeat at the bottom of the left and right columns, indicating that the table is higher than the dimension specified. Why is this? How can I fix it (without ruining the display in other browsers/versions)? Any suggestions much appreciated! Hi, First, please excuse me if this has been answered before. I wasn't able to find any similar posts that has a solution and thus I'm making this new thread. What I have is a simple table with two sections just like this: Code: <table>
<tr>
<td width='50%' valign='top'> Content goes here... </td>
<td width='50%' valign='top'> Content 2 goes here... </td>
</tr>
</table>
Inside those two sections I have a fieldset in each of them (yes, I know this might sound weird, but that's how I need it to be). The question is, how can I make the height of both <td> (or alternatively the fieldset value) to be equal, in a situation when the data is a dynamical one and I don't know its size initially. It looks ugly if one of the rows is longer than the other and I would like to justify them in some way. I tried setting height attribute but to no avail. Any thoughts how this can be achieved? Thank you in advance for your help! Hi, Please review the following code and give me your thoughts... HTML Code: <table width="500" border="1"><tr> <td width="200"><p>This</p><p>is</p><p>very</p><p>very</p><p>very</p><p>LONG</p><p>text</p></td> <td width="300" height ="100%" valign="top"> <table width="300" height ="100%" border="1" cellspacing="0"> <tr><td width="300" valign="top">This should be at the TOP</td></tr> <tr><td width="300" valign="bottom">This should be at the BOTTOM</td></tr> </table> </td> See the attachment for what I am trying to achieve... The thing to focus on is the second column and how it has 2 rows which are trying to stretch to fill the height of the single row first column. It works in Firefox 3.6 but not at all in IE8. Any ideas? And please don't talk me out of tables for this thread... I know they aren't the greatest thing ever, I'm just trying to fix what I have. Thanks! - Jeff Hi Everyone: I'm having difficulty getting a table row height of "1" to display as only one pixel in height. Please see the attached files for reference. The JPG is what I want it to look like, and the index.txt file is the HTML I've currently setup that is not working. The table should have four white strips. On the right side, this is above and below the large black box, as well as under the green box. On the left side, this is between the light green box and the slightly darker green box. As you can see, all of these white strips appear to be larger than one pixel in height, and I'm not understanding why. Can anyone please explain to me why this is occurring, and what I can do to fix it? Also, once fixed, will I be able to merge cells of the same color (i.e make the big black box one merged cell, the below green box one merged cell, etc...)? Any help will be greatly appreciated. Thanks! Philip Hello I'm building a website for someone and because I built the website in a way that if the browser window width becomes smaller, the width of the content on the page becomes smaller as well, so the page's height increases. Normally, using height="100%" inside a image tag would work to get the image height to be the same as the height of the page, but because of some scripts I've had to use, that only seems to set the height of the image to its original size. Also, I can't use the CSS equivalent either, that still doesn't do the trick. So I was wondering if there is an alternative to the height property that I could use. By the way, the image is inside a table if that helps at all. Thanks Drider |
|||||||