|
HTML - Need Code To Keep Table From Expanding
I have a table and it expands. One bottom "Author" row expands when I put data in the top row "Words". How do I stop this from happening.
Code: <div id="apDiv20">
<table width="231" height="190" border="0">
<tr>
<td height="23" colspan="3"><div align="justify"><span class="style4 style10">';echo $Title[1]; echo'</span></div></td>
<td height="23"> </td>
</tr>
<tr>
<td height="135" colspan="3">';echo $Words[1]; echo'<div align="justify">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div></td>
<td height="135"> </td>
</tr>
<tr>
<td width="48" height="23"><span class="style9">Author:</span></td>
<td width="73"><div align="justify"><strong><span class="style3 style10">';echo $author[1]; echo'</span></strong></div></td>
<td width="52"><span class="style13">share</span></td>
<td width="40"><pre class="style2"> </pre></td>
</tr>
</table>
</div>
Similar TutorialsI'm working on a website and I'm running into a problem with the left side cells. http://www.kbrmarketing.com/kbrnew/pages/problem.html If you look at the side on FF (3) is looks correct, but when you look at in in IE (i'm using 7) it's gets stretched out. I want only the bottom cell to expand as the page gets longer. Here's some pictures to help explain < IE < FF I just inserted those line breaks to extend the page to show you guys the problem. Eventually those breaks will be replaced with text and pictures. (the <br>'s are in the right cell, which causes the left cells to then expand) I am looking for a code that when you click a link, it expands an area below it with out reloading the page or switching pages. I have seen it before, just click a link and it pops open a invisible box of (whatever) information you want, click the link again and the box turns invisible again. Sorry if I am not explaining this correctly. hi again... Nobody replied to my last post, so I've simplified what I am having trouble with. I have a MAIN table (which holds all of the page content) that is set to automatically scale to 100% height of any size browser window. That part works fine. My problem lies with the content in that main table. 1) I want the blue table to stay aligned to the top of the browser window. 2) I want the green table to automatically stretch vertically to fit any size browser window 3) I want the yellow table to stay aligned to the bottom of the browser window. When I resize the browser window, the green table does not expand properly. I've already tried different <div height="100%"> and <table height="100%"> values and none of them work. The smaller I resize the browser window , the more of the green table is cut off from the bottom, and the yellow table does not scale properly. So in short, the blue table stays at the top, the yellow table stays at the bottom, and i want the green table to scale vertically to fill the remaining space in between when the browser window is scaled vertically. Everything works fine when scaled horizontally. Can someone please help me with this!?!?!?!? Again, here is the basic stripped down version of the html code I have. HTML Code: <html>
<head>
<title>Site Title</title>
</head>
<style>
html, body
{
margin:0px;
height:100%;
width: 100%;
padding: 0px;
}
</style>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" height="100%" width="100%">
<tr>
<td valign="top">
<!-- Top table - Stays at the top of the browser window -->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="70" bgcolor="#00FFFF">
<p align="center">This table stays aligned to the top of the browser window and stays 70 pixels in height.
</td>
</tr>
</table>
</div>
<!-- End of top table -->
<!--Middle table - Stretches vertically to fill remaining space-->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" valign="top" bgcolor="#00FF00">
<p align="center">content in this table will be aligned to the top.<br>
I want this table to automatically expand vertically to fill the empty
space between the blue header and the yellow footer.</td>
</tr>
</table>
</div>
<!-- End of middle table -->
<!-- Bottom table - Stays at the bottom of the browser window -->
<div height=”100” valign=”bottom”>
<table height="100" border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="100" bgcolor="#FFFF00">
<p align="center">I want this footer to stay aligned to the bottom of
the browser window and stays 100 pixels in height</td>
</tr>
</table>
</div>
<!-- End of bottom table -->
</td>
</tr>
</table>
</body>
</html>
Hi guys, I'm really having a problem here. I'm creating a new instant messenger program and can't get the tables to stretch properly. Firstoff, when the messenger loads, you will not see the address bar, status bar, menu bar, etc. I want to be able to resize the browser (messenger) window to any size, just like you would with msn for example. I have 3 tables. 1) The first one will contain all the header graphics etc and I want this table to stay aligned to the TOP of the browser window. 2) The middle table is where the chat conversation text will go. The chat text will be aligned to the top of this window. This is the window that I need to stretch to vertically automatically when you resize the browser window. 3) The last table is where the message entry box will be. I want this to stay aligned to the BOTTOM of the browser window. Right now, my MAIN TABLE which contains all of the messenger content does stretch to fit the screen, but how the heck do I get the three tables inside it to be aligned how i need them??? Here is the basic code that I'm working with: <html> <head> <title>Site Title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table id="fullheight" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%">Header goes here - Stays aligned to the top of the browser window</td> </tr> <tr> <td width="100%">Middle chat content - automatically stretches vertically when the browser window is resized</td> </tr> <tr> <td width="100%">Message entry box section - stays aligned to the bottom of the browser window</td> </tr> </table> </td> </tr> </table> </body> </html> This is the CSS code that I'm using which makes the MAIN table expand to fit the entire browser window: html, body { margin:0; padding:0; height:100%; border:none } #fullheight{height:100%} Can anyone please help me out? Thanks! How do i stop a table from expanding, When i place a image in it that is larger then the table size. The catch is, I dont want to set the any size peramiters in the 'img' tag. table width = 100 px image width = 200 px 100 px = of pixel page killings Thanks Hi all, I have a table with some data in it. Sometimes the data in one of the cells fills up and it messes up the formatting of the rest of the table. I would like to have the table show a "...." when this happens and then when the user hovers his mouse over this then I want the remaining data to float over the table. Somewhat like a tooltip text. Is there anyway to do this? Thanks in advance for any help, Jehan Hello, can anybody tell me how to program such table with HTML? http://www.nstudio.puslapiai.lt/lent.jpg Thanks! Hi, I'm trying to fix a little misalignment in a table I've created. You can see it at www.wiseguypizzapie.com. The section that is misaligned is mid page under "New York Style Pizza," you can see that the price and type of toppings in the two columns are just slightly misaligned making it difficult to understand. I thought by making 2 more table rows each containing a column and putting them under the black lettering "Toppings" I might be able to get them to line up correctly. but I can't wrap my head around how to do this... .... I don't know if I'm making sense, but if anyone can please help me to align this, in any fashion, that would be wonderful. Thanks! Could someone help me with my table structure. I have a horizontal gap or space between my header table row and the rest of the table. Also, I'm not having any luck adjusting the widths of the table colums. I've tried setting them in the stylesheet with not luck. The same with the alignment, no luck getting center alignment for the table within the page. I did get the table center aligned by creating another style for my bicycle_table div tage and then doing text-algin: center. It doesn't work in FireFox though. Could someone give me some pointers with this? HTML Code: <div id="bicycle_table">
<table class="bicycle" border="1">
<!-- <table id="bikeTable" width="700" border="1" align="center" summary="This table contains criteria to use when deciding on the type of bike."> -->
<caption style="font-family:'Trebuchet MS'; font-size:16 pt; font-weight:bold; color:#C00" background:#CCCCCC >Choosing A Bike</caption>
<tr>
<colgroup align="center">
<col class="BikeType"/>
<col class="Basics"/>
<col class="Terrain"/>
</colgroup>
<thead>
<tr>
<th bgcolor="#FFFFFF">Bike Type</span></th>
<th bgcolor="#FFFFFF">Basics</span></th>
<th bgcolor="#FFFFFF">Terrain</span></th>
</tr>
</thead>
<tr>
<th bgcolor="#CCCCCC">Mountain</span></th>
<td bgcolor="#CCCCCC" class="paragraph_text">wider tires, heavier frame</span></td>
<td bgcolor="#CCCCCC" class="paragraph_text">off road, wilderness</span></td>
</tr>
<tr>
<th bgcolor="#FFFFFF">Road</span></th>
<td bgcolor="#FFFFFF" class="paragraph_text">thinner tires, light weight</span></td>
<td bgcolor="#FFFFFF" class="paragraph_text">paved roads & trails</span></td>
</tr>
<tr>
<th bgcolor="#CCCCCC">Hybrid</span></th>
<td bgcolor="#CCCCCC" class="paragraph_text">everything in between</span></td>
<td bgcolor="#CCCCCC" class="paragraph_text">both paved & off road</span></td>
</tr>
<tr>
<th bgcolor="#FFFFFF">Recumbent</span></th>
<td bgcolor="#FFFFFF" class="paragraph_text">lean back in seat; legs elevated</span></td>
<td bgcolor="#FFFFFF" class="paragraph_text">both paved & off road</span></td>
</tr>
</table>
</div>
#entire_page #container #bicycle_table { text_algin: center; } table.bicyle {align: center} table.bicycle col.BikeType {width:20%} table.bicycle col.Basics {width:45%} table.bicycle col.Terrain {width:35} table.bicycle {border: 5px outset solid red; font-family: arial; border-collapse:collapse} table.bicycle tr th {height: 10px; text-align: center; color: #C00} table.bicycle tr td {text-align: center; color: #C00} table.bicycle td {} table.bicycle thead {} table.bicycle tr {height: 10px} }[/html] Okay so i got a quick request, I need someone to look at the table entitled "Two column layout with a header and a footer" on this table layout site: http://www.ironspider.ca/webdesign10...es4layout2.htm (its the 3rd table down). right under that table it has a "view source code" button for you to see the source code of the table. Well how do I edit that code, so that the "menu column" is on the right side, instead of the left side? thanks, -Aanders5 ok I tride other fourms but they did not help me at all so i asking here. this table is not working and I am having trouble with it. I have this code for the table: <TABLE border=1 backround="file:///C:/Documents%20and%20Settings/crocker%20bob/My%20Documents/My%20Pictures/content%20box.bmp"> <TR> <TD>I rock</TD> <img width="1" height="100" align="left" src="invisible.gif"> </TD> </TR> </TABLE> but when I try to add the width for the table the backround for the table dissapears. my question is why when I try to add a width for the table the backround for the table dissapers? and how can i fix this? Can anyone explain the rule to me which is governing this behaviour: If you move the attribute style="float: left;" from one table to the other it affects the way the whole div renders. With the attribute, there is no silver background, without it the div renders across the whole page with a silver background. Why would floating a table within the div affect whether the div renders with or without a background colour? HTML 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>
<title>Untitled Page </title>
<style type="text/css">
.ItemFill
{
background-color: Silver;
}
</style>
</head>
<body>
<div class="ItemFill">
<table style="float: left;">
<tr>
<td>
Hello World
</td>
</tr>
</table>
</div>
<br />
<div class="ItemFill">
<table >
<tr>
<td>
Hello Two
</td>
</tr>
</table>
</div>
</body>
</html>
I am not experienced in html coding, so please explain things s l o w l y to me I am using an online webpage builder. I made a table and copied the source code into the html editor window of this online builder, excluding only the <html> and <body> tags. When i load the page, it throws up a ton of unwanted 'style definitions' etc... There were too many characters to post here, so you can see the website, and the blaringly obvious problem at http://www.integratect.12h.us/index....try-Comparison If someone could check out the source code and tell me what is causing this text i would be very happy => )) Is there a way so that when you click a link, it will push everything below it down and show what they requested to see. I am planning on this for suggestions and help without users needing to re-load the page. Thanks. Sean Hi all, I have a simple table: Code: <table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" rowspan="3">MAIN CONTENT</td>
<td>fixed</td>
</tr>
<tr>
<td>expandable</td>
</tr>
<tr>
<td>fixed</td>
</tr>
<tr>
<td>fixed</td>
<td>expandable</td>
<td>fixed</td>
<td>fixed</td>
</tr>
</table>
The 2 expandable tds need to expand / contract depending on the height and width of the main content cell (as they will have repeating backgrounds) When I try this it is always the other columns that expand or contract. (BTW, this is all for a shadow border for different image sizes) Anyone know how I can achieve this? Thanks! Hi everybody! OK..i am a complete newb when it comes to coding and web design. I have been trying to build a website for a new online business I'm starting. Its not finished but i thought i'd publish it and check it on a few browsers, its fine in Safari, Firefox but in IE7 it looks terrible. Dreamweaver is telling me i have an expanding box problem. I have read around and tried a few workarounds but nothing seemed to work, but then i don't really know what i'm doing! Can anybody help? the URL is: www.atomicaudio.co.uk any advice would be greatly appreciated thanks, Dan I need help Im tryng to create my webpage so that there are no scroll bars on the right or bottom. I want the content to fit right on screen without the need to scroll to view more content. But my problem is, my page is not even filled up yet, i only have my navigation on top plus my table in the center. my table width is "100" and height="50". its small on the page but everytime i expand it abit more, it makes the entire webpage bigger then the scroll bars start appearing. Im tryna make a page that fits right on screen without need to scroll. Is there a code to fix this. ?/ Hi Guys, I have a page that seems to render fine in Firefox, but looks awry when I view it in IE. Could someone point out what the problem is and how to fix it? I've done some research on my own, and think it might have to do with IE's expanding box problem: http://www.adobe.com/cfusion/communi...NG_BOX_PROBLEM However, I haven't done much coding since 2001, so I could really use a helping hand. Thanks very much. URL of problem page: http://cervantes.webng.com/sims.html Hi How do you create a list that when you hover over it expands. As you can tell I'm new to HTMl. Thanks Bob v |
|||||||