|
HTML - Dynamic Table
I have 10 rows compose of 3 textbox per row. After pressing submit button, they are post to the next page to a table. But my problem is if only 3 rows have data the other rows is still shown in a table but blank with borders. So I want my table to show the rows who only have data
Similar TutorialsIs it possible to set a table's width as something like this? HTML Code: <table width="100%-100px"> I want to dynamically hide column in table. There's many working examples on the web, such as http://www.ahfb2000.com/webmaster_he...ead.php?t=3356 But I lack one feature. When I hide column (all cells in column) via style.visibility="hidden", the remaining column (cells) doesn't adjust its width. I would like to somewhat make the table adjust all cells widths (push together), as if the hidden column (cells) wasn't there at all. Is it possible ? Thanks. Hi Can anyone solve this problem. Here is my code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Hide/Show Test!</title> <style> .myclass1 { background-color:#CCCCCC; display:block; } .myclass2 { display:none; } </style> </head> <body> <script> function hideNshow(){ var e1=document.getElementById('A1C1_1'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } e1=document.getElementById('A1C1_2'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } } </script> <!-- <input type="button" name="myBtn" value="Click Me!" onclick=" hideNshow();"/>--> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td><a href="#" onclick=" hideNshow();">Row1/Cell1</a></td> <td >Row1/Cell2</td> <td>Row1/Cell3</td> </tr> <tr id="A1C1_1" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr id="A1C1_2" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr> <td>Row3/Cell1</td> <td>Row3/Cell2</td> <td>Row3/Cell3</td> </tr> <tr> <td>Row4/Cell1</td> <td>Row4/Cell2</td> <td>Row4/Cell3</td> </tr> <tr> <td>Row5/Cell1</td> <td>Row5/Cell2</td> <td>Row5/Cell3</td> </tr> </table> </body> </html> It is working fine in IE. When I click the link It displays the hidden rows and hides when I click the link agian. But in Firefox it is giving error. It is adding empty rows. How to prevent that. Thanks in advance. I'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 Just getting my feet wet. using XMLSpy stylesheet designer to help guide. I'm converting XML to HTML, which is Microsoft's recommended way of controlling the import of XML into Excel. I've got the stylesheet below in productive use. However, I want to make one key change. I want the name of XML elements to become the text column headings so I can deal with files that have dynamic column names. Suggestions appreciated. Here is typical XML: <NewDataSet> <Table> <Name>Linda Britt</Name> <RFQCount>324</RFQCount> <RFQResponseCount>556</RFQResponseCount> </Table> </NewDataSet> Here is the stylesheet. See comments regarding what I'm trying to change. <xsl:template match="/"> <html> <head></head> <body> <xsl:for-each select="NewDataSet"> <xsl:for-each select="Table"> <xsl:if test="position()=1"> <xsl:text disable-output-escaping="yes"><table border="0"></xsl:text> </xsl:if> <xsl:if test="position()=1"> <thead> <tr> <td > <span>Buyer Name</span> COMMENT: I want this to be "Name" from element name. </td> <td > <span># RFQs</span> COMMENT: I want this to be "RFQCount" from element name. </td> <td > <span># Responses</span> </td> </tr> </thead> </xsl:if> <xsl:if test="position()=1"> <xsl:text disable-output-escaping="yes"><tbody></xsl:text> </xsl:if> <tr> <td> <xsl:for-each select="Name"> <xsl:apply-templates/> </xsl:for-each> </td> <td> <xsl:for-each select="RFQCount"> <xsl:apply-templates/> </xsl:for-each> </td> <td> <xsl:for-each select="RFQResponseCount"> <xsl:apply-templates/> </xsl:for-each> </td> </tr> <xsl:if test="position()=last()"> <xsl:text disable-output-escaping="yes"></tbody></xsl:text> </xsl:if> <xsl:if test="position()=last()"> <xsl:text disable-output-escaping="yes"></table></xsl:text> </xsl:if> </xsl:for-each> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet> I am trying to slowly put together a very simple content management site for a footy club i run, the data is stored in a mysql database and lined to the web page using a dynamic table from within dreamweaver, it displays all the info except one thing it appears in one huge paragraph, take a look at my page Link is at: http://itdesignz.co.uk/Clients/RTFC/cms/home.php The Data in the mysql has the spaces and enters breaks in it, but these are not reflected in my page. I am really new to dreamweaver and am not sure how to overcome this problem, Please help Andy Hello, I have a table (with one cell). The table can be quite big (200 items) so I would like the user to be able to scroll it up and down... and I want the user to be able to add and delete an item. I have done something with javascript but it is not complete.. the delete does not work correctly ... the scroll up and down shown the same table. I don't have a clue on how to do the add button. Could you help me please? Here is what I have done so far.... Code: <html>
<head>
<title>Insert/Delete Table Row using DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/ccs">
<!--
form {border:1px solid blue;}
div {border:1px solid red; width:150px; overflow:auto;}
.selectBox { font-size:xx-small;overflow:auto;}
#tblSample td,th {padding:0.5em;}
.classy0 { background-color: #234567; color:#89abcd;}
.classy1 {background-color: #89abcd; color:@234567;}
-->
</style>
<%@ include file="javascriptLib.html" %>
<script language="JavaScript" type="text/JavaScript">
<!--- oculta el script para navegadores antiguos
var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
var TABLE_NAME = 'items_list'; // this should be named in the HTML
var LABEL_NAME = 'label_list';
var ROW_BASE = 1; // first number (for display)
var MAXLENGTH=5;
function myRowObject(one,two)
{
this.one = one; // text object
this.two = two; // input text object
}
function deleteCurrentRow(obj)
{
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
function deleteRows(rowObjArray)
{
for (var i=0; i<rowObjArray.length; i++)
{
var rIndex = rowObjArray[i].sectionRowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
function reorderRows(tbl, startingIndex)
{
if (tbl.tBodies[0].rows[startingIndex])
{
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++)
{
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count;
var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' ');
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
count++;
}
}
}
function clearTable(option)
{
var tbl = document.getElementById(TABLE_NAME);
if (option != 0)
tbl= document.getElementById(LABEL_NAME);
//var lastRow = tbl.tBodies[0].rows.length;
var lastRow = tbl.rows.length;
var i=lastRow-1;
while (i>=0)
{
tbl.deleteRow(i);
i--;
}
}
function showRow (val)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
//var nextRow=tbl.rows.length;
var iteration = nextRow + ROW_BASE;
var row = tbl.tBodies[0].insertRow(nextRow);
row.className = 'classy' + (iteration % 2);
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '77');
txtInp.setAttribute('value', val);
txtInp.readOnly = true;
cell1.appendChild(txtInp);
}
function addRowToTable(val,num)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
var iteration = nextRow + ROW_BASE;
if (num == null) // appends to the end of the table
{
num = nextRow;
}
else // Insert at row num
{
iteration = num + ROW_BASE;
}
// add the row
var row = tbl.tBodies[0].insertRow(num);
// CONFIG: requires classes named classy0 and classy1
row.className = 'classy' + (iteration % 2);
// CONFIG: This whole section can be configured
// cell 0 - index
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '62');
txtInp.setAttribute('value', val); // iteration included for debug purposes
txtInp.readOnly = true;
cell1.appendChild(txtInp);
// cell 2 - delete button
//-----------------------
var cell2 = row.insertCell(2);
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('value', 'Delete');
btnEl.onclick = function () {deleteCurrentRow(this)};
cell2.appendChild(btnEl);
// Store the myRow object in each row
row.myRow = new myRowObject(textNode,txtInp);
}
function paintTable(index)
{
var maxLine=index+MAXLENGTH;
clearTable(0);
// add Row with delete and insert options
//----------------------------------------
services=document.forms[0].items.value;
if ((services != null) && (services != ""))
{
var services_array=services.split("|");
sLength=services_array.length ;
if (services_array.length < maxLine)
maxLine=sLength;
// add Row with delete options
//-----------------------------
for (var i=index; i < maxLine; i++)
{
val=services_array[i];
//showRow(1,val);
addRowToTable(val);
}
showLabel(index,sLength);
}
}
function showLabel(index,max)
{
clearTable(1);
next_val=index+MAXLENGTH;
prev_val=index-MAXLENGTH;
var tbl = document.getElementById(LABEL_NAME);
var nextRow = tbl.tBodies[0].rows.length;
// add Previous and/or Next buttons
//---------------------------------
var row = tbl.tBodies[0].insertRow(nextRow);
var celNo=0;
if (index !=0)
{
var cell0 = row.insertCell(celNo);
var btnEl0 = document.createElement('input');
btnEl0.setAttribute('type', 'button');
btnEl0.setAttribute('value', 'Previous');
btnEl0.onclick = function () {paintTable(prev_val)};
cell0.appendChild(btnEl0);
celNo++;
}
if (next_val <= max)
{
var cell1 = row.insertCell(celNo);
var btnEl1 = document.createElement('input');
btnEl1.setAttribute('type', 'button');
btnEl1.setAttribute('value', 'Next');
btnEl1.onclick = function () {paintTable(next_val)};
cell1.appendChild(btnEl1);
}
}
// end hiding from old browsers -->
</script>
</script>
</head>
<body onLoad=paintTable(0)>
<form onSubmit="return false" method="post" name="my_form" action="">
<table border= "2" cellspacing="0" id="items_list" >
<tbody></tbody>
<input type=hidden name="items" value="1|2|3|4|5|6|7|8|9|10|11">
</table>
<P><P><table border="1" id="label_list">
<tbody></tbody>
</form>
</body>
</html>
Please, help me! Thanks The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
I 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 would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center? Here is an example of a part of my code: Code: <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
<tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>
<tr>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table>
</td>
</tr>
</table>
1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right. 2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column. 3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column. My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line. I tried: style="margin-left:20px" and style="padding-left:20px" but when the title got too long it would not auto-collapse the left side, I want it to collapse! I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column. If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it. My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want. This code is a list of books that spans about 20 categories and about 400 book titles. Thanks in advance for any help you might offer. im wondering if any1 can help me figure out how i can keep my domain name and link it to my Apache Home Server with a Dyanmic IP i have tried no-ip.com but i dont like having sitename.no-ip.com i want sitename.com does any1 know a way to do this?? Hello, I am using a loop to dynamically generate buttons using the <button> tag. The value for this button is populated using a variable. When I click on one of these buttons, I want the content of the button to be displayed on the text field. But, because it is in a loop and the because the value is a variable only the value of the 1st button comes in and then disappears from the text field. The javascript I am trying out to populate the text field is : function passButtonValue() { poitem= document.getElementById("poitem"); hiddenField = document.getElementById("hiddenField"); hiddenField.value = poitem.innerHTML; } I am using ABAP for getting the values and running the loop How can I reprogram it to overcome this problem? Thanks! I need dynamic iframe and i found that I have found your script: http://www.dynamicdrive.com/dynamici...iframessi2.htm but this doesn't exactly work in IE6 what to do solve this problem? Well, I think that's what it would be considered. Anyways, I have a simple project where I'm making a website that has a drop down menu with a list of items. I also have a table which will define the items. What i want to know is how to change the text in one of the table boxes when a new item in the drop down menu is selected. This is the code i have so far... Code: <html>
<head>
<title>
My Definitions
</title>
</head>
<body>
<script type="text/javascript">
var define= new array()
define["Unicode"] = "unicoded"
define["Hexadecimal"] = "hex"
define["Binary"] = "bin"
define["Compiler"] = "compil"
define["Interpreter"] = "inter"
define["Topology"] = "top"
define["Server"] = "ser"
define["Overflow Error"] = "of"
define["Phishing"] = "phish"
define["Network"] = "net"
function definition(def)
{
}
</script>
Select a definition from the list:
<select id="list">
<option>Unicode</option>
<option>Hexadecimal</option>
<option>Binary</option>
</select>
<br>
<br>
<table border="1" width="100" cellpadding="5">
<th>Definition:</th>
<th>Pictu </th>
<tr><td>two</td>
<td>one</td></tr>
</table>
</body>
</html>
any help would be greatly appreciated. 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. i wont to add dynamic iframe work also in IE6 pls help me My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bg.jpg">
<body>
<div id="wrapper">
<div id="header">
<div id="topleft"><!--start of content keep left -->
</div>
<div id="home">
</div>
<div id="about">
</div>
<div id="process">
</div>
<div id="yachts">
</div>
<div id="blog">
</div>
<div id="news">
</div>
<div id="contact">
</div>
<div id="headbanner">
</div>
</div><!--header -->
<div id="contentwrap">
<div id="leftcontentwrap">
<div id="static">
</div>
<div id="dynamic">
</div>
</div><!--leftconentwrap -->
<div id="rightcontentwrap">
<div id="sidebarwrap">
<div id="sidebar">
</div><!--end sidebar -->
<div id="sidedynamic">
</div>
</div><!--sidebarwrap -->
</div>
</div><!--contentwrap -->
<div id="footwrap">
<div id="footer">
</div><!--footer -->
</div><!--footer wrap -->
</div> <!--wrapper -->
</body>
</html>
CSS Code: @charset "utf-8";
/* CSS Document */
#header {
height: 280px;
width: 891px;
}
#headbanner {
background-image: url(images/island_12.png);
height: 203px;
width: 891px;
float: left;
}
#home {
background-image: url(images/island_04.png);
height: 77px;
width: 63px;
float: left;
}
#sidebarwrap {
float: left;
height: 348px;
width: 200px;
}
#dynamic {
background-image: url(images/island_15.png);
width: 659px;
min-height: 427px;
}
#contact {
background-image: url(images/island_10.png);
float: left;
height: 77px;
width: 140px;
}
#news {
background-image: url(images/island_09.png);
float: left;
height: 77px;
width: 55px;
}
#footer {
background-image: url(images/island_16.png);
height: 75px;
width: 891px;
float: left;
}
#sidedynamic {
background-image: url(images/sidedynamic.jpg);
float: left;
height: 77px;
width: 232px;
min-height: 77px;
}
#rightcontentwrap {
height: auto;
width: auto;
float: left;
}
#contentwrap {
width: 891px;
min-height: 348px;
}
#sidebar {
background-image: url(images/island_14.png);
height: 348px;
width: 232px;
}
#static {
background-image: url(images/island_13.png);
float: left;
height: 152px;
width: 659px;
}
#process {
background-image: url(images/island_06.png);
float: left;
height: 77px;
width: 93px;
}
#about {
background-image: url(images/island_05.png);
height: 77px;
width: 67px;
float: left;
}
#blog {
background-image: url(images/island_08.png);
float: left;
height: 77px;
width: 61px;
}
#leftcontentwrap {
width: 659px;
min-height: 348px;
float: left;
}
#topleft {
background-image: url(images/island_03.png);
height: 77px;
width: 347px;
float: left;
}
#yachts {
background-image: url(images/island_07.png);
float: left;
height: 77px;
width: 65px;
}
#wrapper {
width: 891px;
min-height: 800px;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 0px;
}
I have no idea where to post this question. I want to create a calculator for my website, similar in function to an excel spreadsheet although it doesn't have to look like one. Anyone have any idea how I can go about doing this? |
|||||||