HTML - Expanding And Collapsing Menu
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 Similar TutorialsI got a prob: the site i'm designing looks great in IE, but in Firefox, all the tables collapse and it looks crap. i've taken care to sort the opacity of my transparent divs with the "-moz-opacity" tag, but is there a tag that does the same for tables? check it out he http://www.creativetruth.co.za/divercity/index.html Does anyone know the CSS or HTML (or combo) script to be able to have a table row collapse when there is no text in one cell, but there is text in the next cell? I have a 2-column table with titles in the left column and want the right column to be populated by a user. If the user doesn't populate the right cell(s) or row, I'd like that row -including the constant/visible text that is in the left col- to be hidden and that row to collapse or move up... Hi, I am fairly new at website building and I'm just building a page for a friend but I can not seem to find a way to keep the frames from collapsing too small for the content. Here is what I have. Not sure how much of it is redundant or noobish. Code: <FRAMESET ROWS="95,75,300,80,*" BORDER="0" BORDERCOLOR="000000"> <FRAME NAME="Top" id="Top" scrolling="no" noresize="noresize" src="Pages/Logo.html"> <FRAME NAME="SelectionTop" id="SelectionTop" scrolling="no" noresize src="Pages/SelectionTop.html"> <FRAME NAME="Middle" id="Middle" scrolling="no" noresize src="Pages/Content.html"> <FRAME NAME="Bottom" id="Bottom" scrolling="no" noresize src="Pages/SelectionBottom.html"> <FRAME NAME="FILLER" id="Filler" scrolling="no" noresize> </FRAMESET> Here is the page for you to look at it Right now if you make the window short enough it starts to squish over it's self. I would rather have it scroll to to see the whole page but I'm not sure how to make it do that. If worst come to worse and I need to use a different way I can but I know little other than the basic HTML and I originally though framesets was the way to go with my limited knowledge. 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! 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 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. 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 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. ?/ 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 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 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. Good afternoon. I am hoping someone can help. I've used tables to create the layout of my website (www.bongoscribbler.com) and I'm linking to a php script for the blog which essentially inserts blog.php into the middle cell. I want the cell to expand downwards so that scroll bars aren't necessary. It does this when viewing it on the iPhone or on the iPad but when viewing using Safari, IE and Firefox on the PC the cell doesn't expand downwards, but rather it stays the same size and scroll bars appear. If I disable the scroll bars, the cell still doesn't expand downwards to fit in all the content but the additional content is just outside the view of the cell. Does this make sense? Perhaps if you take a look at the site and click "read more" you'll see what I mean. <tr> <th background="pictures/s_image11_6.gif" width="141" height="683" border="0"></th> <th background="pictures/s_image11_7.gif" ALT="Main" width="777" height="683" border="0"> <iframe src="http://www.bongoscribbler.com/cgi-bin/preview.php" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe> </th> <th background="pictures/s_image11_8.gif" width="82" height="683" border="0"></th> </tr> Does anyone know what attributes I need to give the cell/table to get it to expand downwards? I'll be very grateful for any help. Thanks a lot Tom 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'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) 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? 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> 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. 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> |