HTML - Expanding List

Hey i'm back and as idiotic as ever

Ok when i over fill the tables they obviously expand but it destorys my template how can i make the images replicate or expand or whatever would be best, all help is good.

Cheers

EDIT: forgot to provide template link here

How do I expand the tables here at http://www.ultdmovies.com. What would I change, and be specific, to make it a certain size in pixels, or full screen.

I'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.

wanted to get an effect like this:

http://www.azeotek.com/product_p/hg-m2.htm

as you can see when you scroll over the image it has an expanded view. obviously it's some sort of java or code i have no idea how to do.. suggestions?

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

Hi all,
I am new to HTML and I would like to request you all to help me out of my situation. I use three frames for my website as shown in the screenshot. What I am concerned about is the Left Menu which should expand and collapse automatically when selecting a different set of menu. Also the currently selected menu should be highlighted as shown in the screenshots.
Since am new to HTML can someone please provide some sample codes and functions (javascripts) that could be used to generate this output. Your help in this regards is highly appreciated with gratitude.
Thanks in advance to one and all who ever gives a look at this thread to help me out.
Regards
Subramanian

I've figured out how to embed YouTube videos into a vBulletin installation of mine. How would I go about making a vertically expanding table that expand when the user would click on the "YouTube" text? I'm thinking of starting out out as a size maybe 100px high and 400px wide, and expand to 375px high and 450px tall. I've checked Google, but nothing seemed to come up that I could use.

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">&nbsp;</td>
    </tr>
    <tr>
      <td height="135" colspan="3">';echo $Words[1]; echo'<div align="justify">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div></td>
      <td height="135">&nbsp;</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">&nbsp;</pre></td>
    </tr>
  </table>
</div>

Hi experts, would it be possible for any advice on a header issue please.

I have created a website at www.ukdecals.com the website expands to fit most browsers and i've tried it in IE9 and Firefox, to me everything looks fine at my monitor settings of 1152 x 864 pxls

But a friend has just sent me a screen shot from his screen on his computer in IE9 and the header seems to not be expanding in length across the page, would anyone one be able to view the source code and see if they could spy the problem, i've looked at it myself and i can't see it, but only learning html in the last couple of months, i'll admit that this ones got me stumped.

I'd appreciate any help you could give.

Kind Regards
Jas....

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>

this issue is urking me, i must be missing a style.
what can i do to get this page top box to cooperate. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
 .contentTopBox {
	margin-bottom: 5px;
	margin-left: 15px;
	margin-right: 15px;
	border: 1px solid;
	background-color: #999999;
	height: 112px;
 }
.contentTopBoxRightPortion {
	background-color: #333333;
	float: right;
	padding: 5;
	text-align: center;
	overflow: hidden;
	background-color: #333333;
	width: 180px;
}
.contentTopBoxLeftPortion {
	float: left;
	width: 79%;
	padding-top: 35px;
	overflow: hidden;
	padding-left: 10px;
	padding-right: 10px;
}
 .contentTopBox .siteHeader {
	color:  #666666;
	color:  #666666;
	background-color:  #Fefefe;
	border: 1px solid;
	font-weight: bold;
	font-size: 130%;
	padding-left: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
	overflow: hidden;
	width: auto;
  }
-->
</style>
</head>

<body>
	<div class="contentTopBox">
		<div class="contentTopBoxLeftPortion"><span class="siteHeader">Page Title</span></div>
		<div class="contentTopBoxRightPortion"><img src="mals/lib/3-wolf-rock-2.gif" alt="3 wolves carved into a rock" width="170" height="100" /></div>		 	   
	</div>
</body>
</html>

on the right of the box is a 120px nav bar, and on the left is an ad banner. those arent included on this page. this bar fills in the content box area inbetween the navs.

the problem im having is when viewed at 1680x1050 the bar works fine, but when the browser is crunched down towards 800x600 the image on the right flops(wraps) below the title header as if there is some percentage of width that finds itself running into the contentTopBoxRightPortion box.

what i need;
on the right, I need the image to be solid in place, with 5px padding around it, that takes care of the right side.
and on the left i need the siteHeader bar to expand accordingly(max width atlease 1600 px for 2000px monitor) , with approximately 10px of padding on the left and the right, no matter what the browser size.
Also i would like the siteHeader bar to automatically find the middle (vertical align-middle) related to varying heights that the contentTopBox may be set to to accommodate varying rightPortion images.

Everything was working fine on FF when i had a 2 column table, except on IE7 of course, but i really DONT LIKE TABLES, and want to do away with them
i have tried span tag vs. div tags, and clearing divs, and of course every type of float and overflow, and switching the location of the left column and right column code in the html, so i must be missing something, and am spending way too much time on this otherwise simple issue :-).

what am i missing?

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!