|
HTML - Dynamic Cell?
Hi,
Is there anyway to script in such a way that if i never enter a specify to a cell, and give it 100% instead, my cell below will go all the way to the bottom by putting my whole table as 100% too? |--------------------------| | | | 100% | | | |--------------------------| | 50px | | | |--------------------------| something like that. well, it actually work in firefox and not IE, and i cant solve the problem. Thanks in advance. Similar TutorialsI've searched around quite a bit, read various articles and so-on and only really come to the conclusion that this is a lot harder than it should be! What I have is a simple page for a PHP script, it has a little form for entering keywords, and displays an image above this form. Now, what I want to do is place these in a table, and have that table resize to fit the viewable area of the user's browser-window. So, what I have is a table with three-rows: The title of the image The image itself The form for entering image keywords Now, what I would like to do is have the image scale to fill the middle cell, which by default eats up all available space leftover by the form and title cells. However, this isn't happening, I enter a height of 100% for the image but it seems to be using some other container to get its height. I'm generally well-versed in HTML, but this one has me stumped! Any help is appreciated, here is the basic HTML I'm using for what I had thought would be a simple page Code: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<meta name="author" content="Haravikk.com" />
<title>Add keywords</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
text-align: center;
}
tr, td, textarea { width: 100%; }
table {
width: 99%;
height: 100%;
margin: 0 auto 0 auto;
}
table, td {
border-width: 0;
border-spacing: 0;
padding: 0;
}
#image { height: 100%; }
#tdTitle { height: 5%; }
#tdImg { height: 75%; }
#tdForm { height: 20%; }
#formText { width: 100%; height: 75%; }
</style>
</head>
<body>
<table>
<tr>
<td id="tdTitle"><b>placeholder.png</b></td>
</tr>
<tr>
<td id="tdImg">
<img id="image" src="http://haravikk.com/placeholder.png" alt="" />
</td>
</tr>
<tr>
<td id="tdForm">
<form action="keywords.php" method="post">
<textarea name="keywords" id="fmrText"></textarea><br />
<input type="submit" />
</form>
</td>
</tr>
</table>
</body>
</html>
Now, I don't know if I could eliminate the table in favour of divs and do this, any suggestions to make the above html work, or to re-write it are welcome! The image provided is just to illustrate the problem Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash Greetings! Let me start this out by getting this out of the way - I know I should not be using tables for layout anymore But with this project I have good reasons as to not using them. Learning curve being one and time being another But I am headed that way! So here is the issue I have a simple layout and nested within is this little table for content and navigation Worked fine in FF, but IE7 is giving me some unexpected results with no explanation I can find. Here is the example page http://www.mountainroseherbs.com/test/blank.html Top left (blue) is the navigation image and cell - set height should be static and remain at the top Bottom Left (red) is a nav *footer*, I guess, but it remains at the bottom and the cell above it needs to be able to stretch indefinitely - with the images sitting on the bottom. Right (Orange) is the content area - dynamically stretching with the *red* following it. In FF this works great! Not so much in IE7 - in fact it skews the height of even the *blue* which is set!? Thanks so much in advance for your help on this, I am at my wits end! Nate~ i set up a large gap for cellpadding with my site and im wondering if i can undo that for 1 object, i want 1 object to be style="float:right; and in the top right area of the screen is there anyway i can undo the cellpadding effect for that object ? Hello, I am using a template to make a webpage. The background for one of the cells is not covering the entire area. I have looked and looked at this and can not figure it out. Therefore I thought I would ask some pros. Thanks!! Hi everyone. So I got my template set up to the way I like it and everything is rolling good. I inserted a picture into one of the cells in the table and it shifts everything over. Here is my code: <td width="625" colspan="1" bgcolor="white"> <font type="Arial" size ="5" color="blue"> <b>Floorplan</b><br> <center> <a href="floorplanlarge.jpg"><img src="floorplansmall.jpg" border="0" /></a> </center> </td> I have been working on fixing this for the last hour and am out of ideas on what is going on. The picture is smaller than the cell width range. My picture width is 311 pixels and the cell width is 625 pixels. I dont know if there is code whether its HTML or CSS to prevent the cell from widening. Any help would be appreciated. Also if you need me to provide more detail I can. Thanks. When you use a <p> tag, there is space between paragraphs. Not sure if there is are automatic margins set for the top and bottom, but that's the way it seems. I'm using <p> tags inside a <table> and I'd like the first paragraph to be tight to the top of the cell but the only way I know how to do it is to remove the <p> tags from the first paragraph. I don't really want to do this as I'd like to have the <p> tags around each paragraph. Here is what I have, which btw does exactly what I want it to but as you can see the first set of <p> tags have been removed. What's a better way to get this effect? Code: <table cellspacing="10"> <tr> <td class="menu" style="background-color:#8C9429"><a href="lab4-2bsolution.html">Prices</a> <p><a href="http://www.antiquity.ac.uk/">Links</a></p></td> <td class="content">Voytokovich Antiquities is the leadinng wholesaler for Asian, Middle Eastern, and European antiquities. Items in our store include masks from a variety of cultures, statues, paintings, and other collectibles. Bring the past into your own homes with the beautiful art pieces offered in our store. Come visit us often to find new and unusual items not found elsewhere <p>The links on the left take you to pricing information and our favorite Web sites. Please take a look at our prices and call or e-mail us for a price quote.</p> <p>Please sent any comments to <a href="mailto:voytkovich@isp.com">voytkovich@isp.com</a>.</p></td> </tr> </table> This is for a class assignment. It calls for a one row, two column borderless table. The first column has two links (one on top of the other), and the second column has three paragraphs of text. Thanks for any suggestions! Hi, I'm having a bit of a problem with my table. A cell which should completely be filled with a picture leaves a small - but - whitespace between the picture and the next cell. I've posted a pic of the problem and here comes the code: <table border="0" cellspacing="0" width="780" align="center"> <tr> <td height="250" width="780" colspan="3"> <img src="pics/Kjolur.png" height="250" width="780"> </td> </tr> </table> <table border="0" cellspacing="0" align="center" style="background-color: white;"> <tr> <td height="750" width="194"> <table border="0" cellspacing="0" cellpadding="0" style="background-color: #f0f0f0; border-left: 4px solid #f0f0f0;"> </tr> <tr> <td class="sub1" height="10" width="190"> </td> </tr> <tr> <td class="sub1" height="27" width="190" style=" border-bottom: 1px solid darkgray;"><a href="http://www.kerlingarfjoll.is/information.html">Information</a> </td> </tr> .... etc. I've quite new to this and find myself a bit at a loss, so any help would be soo much appreciated!! Best, thora Hello all! I wanted to ask if there is a way to specify certain width sizes for table cells in a table. The thing is that I have a table in one webpage that, if I leave the width of the TD cells unspecified, I usually end up with some cells being very wide because the text that is written inside them is very big and does not roll up automatically and other cells shrink and become very small in order for the total table not to lose its specified length. Can I set a specific width for the cell that gets filled with many words so that the contents of this cell will wrap and not extend so much? Thank you! Hello, I have a problem with tables cells containing form buttons: Code: <tr> <td colspan="2" align="center"> <button id="button-submit_2" type="submit">Add Name</button>      </form> <form action="nrt-home-edit&delete.php" method="post"> <input type="hidden" name="class_name" value="$class_name[0]"/> <button id="button-submit_2" type="submit">Finish</button></form> </td> </tr> The above code puts the two buttons on their own lines within the table cell. My question is, does anybody know how to keep them on the same line without putting them into their own individual cells? Okay, here's what I've got: two nested tables next to each other, both with two cells in them. The bottom cell on the left table is just a filler, and has a background image to complete the layout of the site -- however, since there's no content in it, it doesn't show up. Giving it a set pixel height makes it show up, but I can't do this, as the content in the other table changes. So, I need this cell (the bottom one on the left) to automatically size itself to whatever the other table is. A height="100%" attribute also doesn't work... Help? Thanks. :] Hi, I'm working on an ecommerce website, my problem is that I cannot make some text in a cell wrap. Here's the details: The text in this particular cell is page numbers, and it is dynamically generated, so it changes depending on what the user selects in the shop. For example, if they are viewing a category that only has a couple pages of product, it's fine. But if they are viewing a category that has a couple hundred pages of product, the page number goes out horizontal in a straight line, and obviously causes some serious horizontal scrolling. I've tried setting a fixed width for the cell both in the <td> with width="whatever" and that didn't work, I tried setting it in the stylesheet with CSS but it still breaks the table. I just want it to wrap down a line when it gets to a certain width. Any ideas? Hello, Ok what I'm trying to make is a huge table, with 1 column and many cells. Each cell is going to be a different color, and the table is going to basically fill the screen(width="100%). What I have now does not work. Instead of keeping it on the same line it returns making another thus making the cell taller which is bad. The diagrams I wrote don't work...do you understand anyway? Here is the code I'm using: Code: <html>
<head>
<style type="text/css">
h2
{
color: #A8A8A8;
text-decoration: underline;
}
body
{
text-align: center;
background-color: #000000;
margin-top: 3px;
margin-bottom: 3px;
margin-right: 5px;
margin-left: 5px;
}
table
{
table-layout: fixed;
width: 100%;
}
p.left
{
text-align: left;
}
p.right
{
text-align: right;
}
</style>
</head>
<body>
<h2></h2>
<table cellspacing="0" border="1">
<tr>
<td bgcolor="#000000">
<p class="left">Word</p><p class="right">Word</p>
</td>
</tr>
<tr>
<td bgcolor="#FF0000">
<p class="left">Word</p><p class="right">Word</p>
</td>
</tr>
<tr>
<td bgcolor="#0000FF">
<p class="left">Word</p><p class="right">Word</p>
</td>
</tr>
</table>
</body>
</html>
Any help would be greatly appreciated. I've got a small problem, i want to make a table cell that works as a button. I tried it this way: Code: <table border='1' width='100%' height='10%'> <tr> <a href='page.htm'> <td width='20%' height='100%'> </td> </a> But this won't work, does anybody know how I can solve this problem? Has now been sorted. I am doing a simple calendar. I managed to do the table with days etc. I have a problem I wish to highlight a number and the cell automatically according to the date of the day. Can Someone help please? Thanks & best regards i want the entire table cell to be the link, not just the text inside any ideas? i want to open a frame by clicking on a cell,i can only do this when the ref is outside the table,can you help? Thanks everybody |
|||||||