|
HTML - Div With Variable Height For Different Pages
For my layout I've got a div content and several others inside it.
HTML Code: <div id="content"> <div id="box1"> <h1>Portfolio</h1> </div> <div id="port"> sample text </div> <div id="port"> sample text </div> </div> And that's the css for it Code: #content {
float: right;
width: 540px;
margin-right: 40px;
margin-top: 20px;
height: 100%;
}
What goes inside the div "content" varies for each page, so I want to make the content with variable height, but I can't! When I preview the page its shows the "content" being overlapped by what's inside it. It may be something very simple (still learning) but I can't see what is wrong. Can someone help please? Many thanks! Similar TutorialsHi All, I am new to html programming. I am having problem in sharing a variable between 3 html pages. I tried googling for the solution but couldn't get the right one. A brief about my problem is... 1. I have 3 html pages, 1.htm, 2.htm & 3.htm 2. I have a variable var1 in 1.htm which is set to 0. 3. 1.htm will open 2.htm and 3.htm 4. 3.htm will update the var1 variable declared in 1.htm to 1 on onunload event. 5. 2.htm will check the status of var1 for value 1, if yes it will navigate to next page. I have pasted the code below for 1.htm, 2.htm & 3.htm respectively. Can anyone please help me in this regard. Thanks in advance. Regards, tux09. ---------------------------------------------------------------- 1.htm -------- <html> <head> <title>main</title> <script type="text/javascript"> var checkPopUpClosed = 0; function delayed_redirect(){ window.open('3.htm','SaveAs','height=250,width=640,resizable=0,directions=0,location=0,toolbar=0,men ubar=0,scrollbars=0'); } </script> </head> <body ><!-- masthead --> <table border="0" cellpadding="0" cellspacing="0" summary="."> <tr><td ><h1>Main</h1></td></tr> </table> <FORM method="post" name="mainForm" ACTION="2.htm"> <table cellspacing="0" cellpadding="0" border="0" summary="." > <tr> <td class="rightContentPane"> <br><br> <div class="pad10"> <div> <INPUT type="submit" name="Back" accesskey="b" alt="Back" VALUE="< Back"> <INPUT type="submit" name="Finish" accesskey="s" alt="Save As" onclick="javascript:delayed_redirect();" VALUE="Save As"> <INPUT type="submit" name="Cancel" accesskey="c" alt="Cancel" VALUE="Cancel"> </div> </td> </tr> </table> <div> <INPUT type="hidden" name="Hide" VALUE="18489"> <INPUT type="hidden" name="shVariable" VALUE="0"> </div> </FORM> </div> </body> </html> ---------------------------------------------------------------------------------------- 2.htm -------- <html> <head> <title>second</title> <meta http-equiv="refresh" content="5;" /> <script type="text/javascript"> //if (1 == document.mainForm.checkPopUpClosed.value) var temp = 0; if (1 == top.mainForm.checkPopUpClosed) alert("Close received = ");//+document.mainForm.checkPopUpClosed.value); function checkClick() { //temp = top.parent.item.forms("mainForm","checkPopUpClosed"); //temp = parseInt(parent.checkPopUpClosed);//.document.frames.item("shVariable"); //temp = document.getElementById("mainForm"); //temp.parentElement(shVariable); //temp = document.mainForm.checkPopUpClosed.value; alert("temp = "+temp); } </script> </head> <body onclick="checkClick();"><!-- masthead --> <tr><td ><h1>Second</h1></td></tr> <FORM method="post" name="secondForm" > <table cellspacing="0" cellpadding="0" border="0" summary="." > <tr> <td > <div > <table width="200" border="3" cellspacing="0" cellpadding="0" summary="."> <tr> <td style="text-align:center;"> <br/> <h3>Result</h3> <br/> In progress. <br/><br/><br/> </td> </tr> </table> </div> </td> </tr> </table> </FORM> </div> </body> </html> ------------------------------------------------------------------------------- 3.htm -------- <html> <head> <title>third</title> <script type="text/javascript"> function doClose(){ if (window.opener && !window.opener.closed) { window.opener.location.href="1.htm"; } } function delayed_close() { setTimeout("window.close();",7000); } function delayed_Openclose() { delayed_close(); setTimeout ("doClose();", 6900); } function doAbnormal_Close() { var temp2 = 0;// = document.getElementById("mainForm"); top.mainForm.checkPopUpClosed = 1; temp2 = top.mainForm.checkPopUpClosed; //temp2 = open.document.forms("mainForm", "0").checkPopUpClosed = 1; //temp2 = document.getElementById("mainForm").checkPopUpClosed.value; alert("temp2 = "+temp2); //alert("checkPopUpClosed 1 = "+top.mainForm.checkPopUpClosed); //document.mainForm.checkPopUpClosed.value = true; //alert("checkPopUpClosed 2 = "+document.mainForm.checkPopUpClosed); } function checkClick() { var temp3 = 0; //temp3 = if(window.opener.closed); alert("temp3 = "+temp3); } </script> </head> <body onunload="doAbnormal_Close();" onclick="checkClick();"> <FORM method="post" name="thirdForm" ACTION="2.htm"> <table cellspacing="0" cellpadding="0" summary="."> <tr> <td style="text-align:center;"> <br /><br /> <h3>Checking</h3> <br /><br /> To submit this request click "Save As" <br /><br /> <INPUT type="submit" name="Save" accesskey="s" alt="ok" onclick="javascript:delayed_close();" VALUE="Save As"> <br /><br /> </td> </tr> </table> </FORM> <script type="text/javascript"> </script> </body> </html> --------------------------------------------------------------------------------------------- I have a basic horizontal iframe with a persistent navigation header and a content page below which is the target for the navigation. How do you set the height of the content frame to scroll if necessary depending on the amount of content on the page? The content pages that are swapped in/out and have varying heights. I would like the page height overall to include all content. Setting scrolling to "yes" in the <iframe> tag forces the content (framed) page height to about 100px(?), leaving a lot of dead space in the browser window below. Ideally the whole page would scroll as one, but I would settle for scrolling just the content (framed) page. Any help would be appreciated. Thx Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar This will be hard for me to explain so I will add an image: http://img75.imageshack.us/my.php?image=examplexu6.gif How do I go about loading a page within a page. For example, in the pic, if you clicked Cost it would load a page within the loading area without taking off to another location. I seen it on a site before, i remember the links were something like "/?p=cost" or something like that. And the page appeared to not navigate elsewhere, the cost page was just loaded within the page i was on. hope that makes sense, if so any examples on this? is it hard to do? messy? safe with most browsers? thanks If this is in the wrong section sorry, i have been thinking of adding a new page to my site and added sky sports, but how do i set up a page that opens another web page right away? I'm currently making a new layout for my site and before it will go online, I want to set all my pages on a BRB page/status (customized with my own brb logo+text etc.. Anyway I can do this? How do I make variable pages? EG: ../showgame?id=10 So multiple pages can begenerated from one document. I am building my first big(ish) website and I have run into a little problem. The left side of the page is the same on every single page, along with the top. The only part that changes is the content of the center. There is also some things on the right that stay the same. I have the site looking and opperating fine, but when I need to make adjustments to the static parts of the site (top, left and right), I have to change every single page. Is there any way to just have one template and when you click on a link, it just changes the middle? I have tried iframes, but the left part of the screen needs to be able to scroll with the rest of the page. I want everything to scroll just like a normal webpage, but without having to change the menus on every single page. How is this possible? Thanks in advanced I am having difficulty centering pages for Firefox and Chrome. Please view the source code of http://www.alicm.com. It centers fine in all versions of IE. Definitely need a little help. I am not very experienced, so any "before and after" pasting of coding would be very much appreciated. Thanks in advance. I know in PHP you use PHP includes, but how do I do it in html? So I have one file with my navigation links, so it's easy to edit and update all pages? Also, same with copyright date at the bottom of the page? How can I make it so I don't have to edit eveyr page every year? Thank you. Hi, I have a few pages that I would like to link together, these are all on my computer. What is the code to link them together? Thank you, Nick. I have a website which is now closed. I have forwarded the domain (www.chineseteaforyou.com) to a page on my other hosted website (www.e-stores-online.com/chineseteaforyou.html) to explain it is now closed. If people type in the domain name of the closed site it works as I expect, and they land on the correct page. If they type in the address of another page on the old site, they get the "Not Found" message. For example: http://www.chineseteaforyou.com/site...30/page/543219 will be forwarded to the following page which does not exist: http://www.e-stores-online.com/chine...30/page/543219 I would like to redirect any forwarded pages with www.e-stores-online.com/chineseteaforyou.html/ as the first part of the URL to www.e-stores-online.com/chineseteaforyou.html I tried to do it with a .htaccess file but get errors. Can anyone help me do this? Thanks. Hey guys I have made a site but I have noticed a potential problem. I have about 10 pages and each page has the menu coded on it using css. If I wanted to change the style of the menu then thats easy as I have a external style sheet. If I want to add a link I would have to open up every page and add the link to each file. Is there a way I can create the menu in one file and include it in each page. So if I want to add a link I just add it to the one file and it would be updated on every page. Cheers Matt Hi I am looking at a frame site and the right frame is browsable but not saveable. How can I save the right hand frame? Right click is not allowed. Thanks Art Hey having read the advice on this site I know have several pages mocked up in photoshop and have sliced and coded them as well. How do I link pages though so that the page switches?? Also I'd like the background and certain parts to stay constant rather than reloading when a new section is loaded. Any helpful suggestions would be brilliant Thanks! Hello everyone! This is my first thread, and I need some help. I just started developing my site hosted by godaddy.com and I am doing all my html and through dreamweaver and uploading new content through dreamweaver also via FTP. The problem I am having is i am tryingto add new pages that link off my HOME PAGE. For example: CONTACT US, ABOUT US, PICS, and so on. I have made this types of pages but I'm not sure why they are not linking right? What address should I be point the CONTACT BUTTON to? My site is www.adiktedapparel.com Any help would be great!!! THANKS! Bill C. Ok. I know that there are codes for fading between pages, I used to use them ALL THE TIME when I used Piczo (blech!). My question is, do all or at least most browsers support that sort of code, and can I use it in a valid XHTML page? Or is it done with JavaScript? The only reason I'm asking is because I'm making a new site for my drum videos, and the welcome page has a really nice picture of a drum set (in black and white with a slight glow) with a white background, and if I faded to a blank page, then the homepage, I think it would look really nice. So again, is it valid XHTML, and do most browsers support it? Ok I'm really new to this so bear with me.. I just started my file hosting website, and I have a ****ton of videos.. I really don't want to create thousands of individual pages so that users could view the videos. Is there a simple way to view each video in a page with my logo on top, tabs on the side, etc. without creating tons of individual pages? (NSFW!) ex: - family unfriendly link removed - I have my main website called index.html, but since i've added php into the code, i've renamed it to index.php. But I also have a forum, which includes another index.php. I'm wanting to have my index.php page to be the page that people see when they come to my website. Is there anyway that it could happen? |
|||||||