HTML - Keeping Pages The Same Except 1 Div Box
hi guys i have 5 identical pages all same as the index except one div box in each that contains all the different content of each page. my question is how do i make a change to the index and the others update the same way?? i was thinking of somehing like frames?
Similar TutorialsI know this is technically a javascript question, but I am trying to create a javascript popup window, but everything I find and try doesn't seem to work for what I want to do. I want a pop-up window to open when I click a certain image button on my site, and not automatically when the site loads. I want the pop-up to be positioned at top left and for it to always stay above the parent window. I've tried the alwaysRaised functionas well as focus ones but no luck! Ta! Some example code would be much appreciated. Hi everyone! I want to include Google ads in My forums But I want them to to stay on the right of the page So, apart from the Google ads code, anyone knows the code which I put so that the banner stays at the right (I will put it in the Header file, I know that) I just need the code to make it expand on the irght with the page _______________________ Academy of Security When I browse between pages on my website (well, and almost every website), the scrollbar goes to the top of the page by default. How can I make it so that it stays in the same place when switching pages? This is probably really simple but I can't seem to figure out how to do it. I don't understand in the html table below, when I increase the resolution higher than 1024 by 768, what suppose to be another image on my top left corner, that entire column widens, why is that? How can I keep it still where it doesn't move when increase the resolution, this is driving me crazzzzzzzy, can someone help me? Thanks... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0056)http://www.sharepointsample.com/stk/...nce/index.html --> <HTML><HEAD><TITLE>Home</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252" FP_GENERATED="TRUE"> <SCRIPT language=JavaScript FP_GENERATED="TRUE"> document.write('<ows:HTMLBase/>'); var strBinUrl="_vti_bin/"; </SCRIPT> <META http-equiv=Content-Language content=en-us> <META content="MSHTML 6.00.2900.2180" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId> <META content="sharepoint-insurance 1110, default" name="Microsoft Theme"> <META content=none name="Microsoft Border"> <SCRIPT src="Home_files/owsredir.js" FP_GENERATED="TRUE"></SCRIPT> <SCRIPT language=JavaScript FP_GENERATED="TRUE"> RedirectToFrame("index%2ehtml","_vti_bin/owssvr.dll"); </SCRIPT> <SCRIPT src="Home_files/ows.js" FP_GENERATED="TRUE"></SCRIPT> <style type="text/css"> .style1 { border-collapse: collapse; font-family: "Century Gothic"; font-size: x-small; } .style3 { background-color: #2D1C84; } .style4 { background-color: #C0C0C0; } .style5 { background-color: #0066FF; } .style6 { background-color: #FFCC01; } .style8 { font-size: xx-small; text-align: right; font-family: Calibri; background-color: #8CBAFF; } BODY { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif } .section { FONT-WEIGHT: bold; FONT-SIZE: 0.8em; COLOR: #ffcc00; FONT-FAMILY: Arial, Helvetica, sans-serif } .LinksLight { FONT-SIZE: 10pt; COLOR: #ffffff; TEXT-DECORATION: none } A { TEXT-DECORATION: underline } .style12 { border: 1px solid #000000; border-collapse: collapse; font-family: "Californian FB"; font-size: x-small; color: #A0949A; } .style13 { background-image: url('ReadyVoice%20Site/images/bg_pg_blue.gif'); } .style14 { margin-top: 0px; } .style16 { color: #2D1C84; } .style17 { background-color: #000000; } </style> </HEAD> <BODY leftMargin=0 topMargin=0> <TABLE id=AutoNumber2 style="height: 99%;" cellSpacing=0 cellPadding=0 width="100%" class="style12"> <TBODY> <TR> <TD class="style17" style="height: 19px"></TD> <TD vAlign=top rowspan="3" style="width: 84%"><!--column 2--> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" class="style17"> </td> </tr> <tr> <td style="width: 494px"> <img alt="" src="Home2_files/IS-Main.gif" width="500" height="70"></td> <td class="style5"> </td> </tr> <tr> <td style="width: 494px" class="style4"> </td> <td class="style8"> </td> </tr> <tr> <td style="width: 494px" class="style6"> </td> <td class="style6"> </td> </tr> <tr> <td style="width: 494px"> </td> <td> </td> </tr> </table> <img alt="" src="Eldon%20-%20Global%20Site_files/footer.jpg" width="767" height="90"><br> <br> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td style="height: 3px; width: 38px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 386px; height: 3px"><strong>Top 5 Questions of the Month</strong></td> <td style="height: 3px"></td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td style="width: 38px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> </td> <td style="width: 38px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> </td> <td style="width: 38px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> </table> <br> <br> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td style="width: 23px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 364px"><strong>Weekly Maintenance </strong><span class="style1"><strong>Announcements</strong></span></td> <td style="width: 22px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 386px"><strong>What's New</strong></td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td style="width: 22px"> </td> <td style="width: 386px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> </td> <td style="width: 22px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> </td> <td style="width: 22px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> </table> <br> <TD vAlign=top bgColor=#65aeef style="width: 35%" rowspan="3" class="style13"> </TD> <TR> <TD vAlign=top class="style4"> <img alt="" src="IS%20TEST/ISMain-Image.jpg" width="150" height="209" class="style14"></TD> <TR> <TD vAlign=top class="style3" style="width: 14%; height: 20%"><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </TD> <TR> <TD bgColor=#000000 colSpan=3> </TD></TR></TBODY></TABLE></BODY></HTML> Hi there everyone. First time post here. I am trying to keep a footer at the bottom of my page. The problem is if I don't have enough content to fill up the whole page, the footer is not at the bottom of the screen. I am using tables for my format. My site: http://www.keystonestatistics.com/zzz.php Check the source. Thanks in advance for the help! Im new to HTML and web design, although I know a little bit about it, Ive never tried to make a website before. Ive been working on this for a little bit, taking several different ways of achieving the same goal. Ive nearly perfected the design, except for one major flaw, immediately obvious when you view the site. http://www.imagesbyjan.com/Images%20...jantables.html The error lies in the text. When you resize the window, the text changes shape to stay all there. Thats the exact opposite of what I want. When it resizes, it gets longer, and goes off the bottom of the white area of the portfolio. I want it to never change size like that, but rather stay just like an image, never changing size, only getting closer to the edges of the screen as to try and stay there. If it gets to the edge of the screen and cant adjust any farther without changing the text size, it should just stop changing and allow itself to go offscreen. If you have any explanations on how to do this short of making the text into an image, you can stop reading here, but if you want, you can continue reading for the code explanation. Its not a very clean code, so Ill try my best to make it easy to understand. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Images By Jan - Template</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> .text { font-family: Bitstream Vera Serif; font-size: medium; line-height: normal; color: rgb(0, 0, 0); font-weight: normal; font-style: normal; text-align: left; } </style> </head> Basic setup of the page Code: <body style="background-image: url(images/background1.jpg);"> <div align="left"> <table style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 140px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr style="height: 140px;"> <td style="width: 30%;"></td> <td style="width: 520px;"> <img style="position: relative; left: 2px; top: 0px;" src="images/layout/logo.png"></td> <td style="width: 30%;"></td> </tr> </tbody> </table> This is the first table. It holds the logo at the top of the screen. To keep the logo centered, there are 3 cells to the table. The left and right ones keep 30% of the distance of the edges of the window and the logo between them. Code: <table style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 40px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr style=""> <td style="width: 30%;"> </td> <td style="width: 110px;" about.blank=""><img style="border: 0px solid ; width: 110px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;" src="images/layout/about.png"> </td> <td style="width: 100px;"><a href="about.blank"><img style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;" src="images/layout/gallery.png"></a> </td> <td style="width: 100px;"><img style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;" src="images/layout/buttons_middle.png"> </td> <td style="width: 94px;"><a href="about.blank"><img style="border: 0px solid ; width: 94px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;" src="images/layout/bio.png"></a> </td> <td style="width: 116px;"><a href="about.blank"><img style="border: 0px solid ; width: 116px; height: 40px; z-index: 3; position: relative; left: 0px;" src="images/layout/contact.png"> </a></td> <td style="width: 30%;"></td> </tr> </tbody> </table> This is the second table. It holds the links bar. It works the same as the logo, but with 7 cells instead. (30% on left, "About" button, "Gallery" button, blank spot, "Bio" button, "Contact" button) Code: <table style="border: 0pt none ; text-align: left; position: relative; top: -11px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr style="height: 1px;"> <td style="width: 30%;"></td> <td style="width: 532px;"> <img style="width: 500px; height: 1px; z-index: 4; position: relative; left: 0px; top: -6px;" src="images/layout/black_line.png"></td> <td style="width: 30%;"></td> </tr> </tbody> </table> This puts a small black line under the link bar. Just for style. Code: <table style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr style=""> <td style="width: 30%;"> </td> <td style="width: 260px;" about.blank=""><img style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;" src="images/layout/white_left.png"> </td> <td style="width: 260px;"><a href="about.blank"><img style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;" src="images/layout/white_right.png"></a> </td> <td style="width: 30%;"> </td> </tr> </tbody> </table> This table holds the main area of the white part of the page. I have no idea why the '" about.blank=""' is there. Code: <table style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 100px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr style=""> <td style="width: 30%;"> </td> <td style="width: 260px;" about.blank=""><img style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;" src="images/layout/bottom_left.png"> </td> <td style="width: 260px;"><a href="about.blank"><img style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;" src="images/layout/bottom_right.png"></a> </td> <td style="width: 30%;"> </td> </tr> </tbody> </table> The bottom part of the white area. Code: <br> <div style="position: relative; left: 0px; width: 100%; top: -881px; height: 851px; z-index: 5;"> <table style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 800px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr style="height: 800px;"> <td style="width: 30%;"></td> <td style="width: 480px; position: relative; left: 30%;"> Jan is one best known portrait photographers in the northern virginia area been a professional photographer since 1976 for 30 years her popular style of portraiture has beautified numerous homes offices she works extensivley with business professionals families children and pets.<br> <br> <br> She is known for investing time with her clients to understand their personal situation and their individual style. She then structures the session to capture them in a way that reflects their true self. This includes the use of indoor and outdoor settings, formal and informal environments, and many studio related props. She is gifted at bringing out the unique inner beauty and personality of her client and capturing it for all to enjoy.<br> <br> In her 30 year career Jan has seen the technology change significantly and she continues to invest a great deal of time and energy in being a leader in technology and photo trends. It is important to remain abreast of how to combine the latest technology with artistic mastery to create a photograph people will want to look at for years to come.<br> <br> Jan's sensitive and unique style has won her many awards and loyal clients. In addition to being a talented photographer, she uses her profits and talents to support several charities including:<br> - Loudoun Symphony<br> - Operation Smile<br> - Time to Fly<br> - and El Hogar Orphanage Hondouras<br> According to her daughter who herself is a succsessful business owner, "My mother sets a shining example for the business community in her ethical business practices, commitment to quality products and service, combined with a strong belief in suppoting the community through charity. </td> <td style="width: 30%;"></td> </tr> </tbody> </table> </div> </div> </body> </html> This holds the text. Hi Again, On the website i am currently coding url= www.ycn-hosting.eu/newsite i have enabled the highlight of bottons. So when i drag over each button its changes color / effect. Well i am just wondering how to keep the highlight on the first navi when browsing on the second navi so people can see where they are. Could you also give ideas of improvments Much Thanks ! Hello, I have this code: (The important part is in bold) Code: <html> <head> <style type="text/css"> .navlink a:link { font-family: Verdana, Geneva; font-size : 80%; font-weight : bold; color: #000000; background-color: white; text-decoration : none; margin: 5px; padding: 5px; border : 1px outset black; display: block; width: 150px; text-align: center; width: 142px } .navlink a:visited { font-family: Verdana, Geneva; font-size : 80%; font-weight : bold; color: #000000; text-decoration : none; padding: 5px; margin: 5px; border : 1px outset gray; display: block; width: 142px; } .navlink a:hover { font-family: Verdana, Geneva; font-size : 80%; font-weight : bold; color: #000000; text-decoration : none; padding: 5px; margin: 5px; border : 1px inset black; display: block; background-color : #99ccff; width: 142px; } .center{text-align: center} body{font-family: Verdana, Geneva;} h1{font-weight: bold} </style> </head> <body bgcolor="#4d4d4d"> <table style="position: absolute; top: 0px; width: 850px; margin: auto; border: 3px solid #000000; background-color: white"> <tr><td class="center"> <img src="logo.png"><img src="smiley.png" style="position:absolute; left:838px; top:6px"><hr> <p style="position:absolute; left:842px; top:118px; font-size: x-small"> First time here? Click the smiley!</p> <table width="150" border="0" bgcolor="white" class="navlink" style="border-type: solid"> <td class="center"><a href="index.htm">Home</a></td> <td class="center"><a href="link1.htm">Cartoons</a></td> <td class="center"><a href="link2.htm">Guestbook</a></td> <td class="center"><a href="link2.htm">Contact Me</a></td> </table> <table style="margin: 6px; border: 1px; border-style: solid"><tr><td width="650px"> <h1>Site Released </td></tr></table> </tr></td> </table> </body> </html> Does anyone know how to keep the smiley face and the words "First time here? Click the smiley!" In one place while the window is resized. (Preferably without having to put them in the table.) Hello. I have a question. In order to put an applet in my web page, I have to link to my applet. This works great for normal people viewing my page, and they can use my applet just fine. However, I don't like the idea of people being able to look at the source code, get the link to the applet location, enter it into their browser, and then download my jar file because then they can hack into the jar, decompile, and steal my code (not that it is worth stealing, but still). How can I keep people from being able to download my jar file? My guess is to have the applet some kind of folder options that only allow web-server be able to access it if that is possible. I tried messing with the folder security settings but either the jar was still able to downloaded by entering the link in the browser, or the jar file wasn't able to be read by the web-server. Please help me out. Thank you. I am having a real problem with keeping the text located at the top of the page right below the navigation. for some reason the text and photos just drop down the page in IE. No problem in Safari though. This seems to only be happening with images on the page. http://www.musicbridgesinternational.com please help I have no idea what the problem is here. thank you! Hey all ! I'm looking to make some simple feature but i don't know how. What I'm trying to do is, making my button to preform some action and stay in the same URL. I'll explain: Suppose i have "main.html". In there i have a button, which is defined something like: <input type="submit" value="send"> and this button is under a form with action like: <Form action:"localhost:10000/SomeService/SomeMethod"> The problem is, that by clicking on Send, the URL changes to "localhost:10000/SomeService/SomeMethod" and i would like to see the result on main.html. The method "SomeMethod" returns a new "main.html" HTML generated page with its results and i get this page great, but i would like to keep it under the source URL. I hope i explained my self well Anyone knows about it? I don't know how to use JS (the code is in JAVA) so please try to help me in different ways (if there is any)... Thank you all! I have a painting company and just recently took on the task of learning a little web design in order to try creating my own site. I initially thought I could just learn a little html and be off and working. After months and months of free time I'm still having trouble with something that to me should be basic... it probably is... the positioning of my elements. I've completed the home page and have trouble with the position of nearly all my elements changing when the browser window is resized. The function of my page is dependent on these elements staying put. There are a couple elements that do stay put when the window is resized, which really throws me for a loop because as far as I can tell they are all positioned the same (css absolute). I designed the site using mozilla firefox, and this positioning problem seems so particular that even when another tab is opened the position of elements change (certain images). I don't see this happening in any other sites similar to mine, and is really nerve racking. Feel free to take a look at the code. To see the problem just resize the window to anything other than maximized. Making it even smaller will accentuate the problematic effects. Any suggestions are welcome, not on just the said problem, but anything about the site in general. The link is jduffpainting.com Thanks, and I hope this isn't something for the css forum! 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 Hello, I am having a bit of a problem with a website I just started. I am currently on a resolution of 1280x1024 and I want it work for 1024x768. Well, I want it to work for any resolution, really. In fact, I noticed the problem exists when I go from maximizing the browser window to minimizing it. Here is what it looks like at 1280x1024 with the browser window maximized. Here is what it looks like at 1024x768 or when the browser window is less than maximized. See the problem? The two background images to either side of the banner image are lessening, as the resolution decreases or the browser window is decreases. Yet, the banner image remains unaffected. How can I make sure that the html is proportional to resolution, such that the background image on either side of the banner image remain unaffected in the manner in which they are currently? Thank you. Here is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Test</title> </head> <body> <table border="2"> <!-- table 1 --> <tbody> <tr> <td width="10%" style="BACKGROUND-IMAGE: url(pictures\BG.jpg)"><!-- col 1 --> </td> <td width="80%"><!-- col 2 --> <table border="4"> <!-- Table 2 --> <tbody> <tr> <td><img src="pictures/banner.jpg"> </td> </tr> <tr> <td>More stuff goes here</td> </tr> </tbody> </table> </td> <td width="10%" style="BACKGROUND-IMAGE: url(pictures\BG.jpg)"><!-- col 3 --> </td> </tr> </tbody> </table> <!-- table 1 --> </body> </html> Greetings, I have a script that needs to load a ~250Mb file from an FTP server in order to function. During this 20+ minute process, the connection between the server and client is lost; is there a header I can use to make sure the connection does not timeout? Thank you and Godspeed! Hey guys... I'm new and have looked everywhere. I can get an embedded WMV/AVI/etc. to work on my website and I can even position the file to where I want using my screen's resolution 1440X900, but when I view this website in a 1024X768 resolution, the embedded media file is not where it's supposed to be. Can anyone please please help me figure out how to embed a windows media file and keep the same position on the webpage for all resolutions (800X600 and up)... I have created the webpage with Adobe Imageready, and then edited the HTML accordingly to embed the media player. Please help.... Thanks.... Hiyas, well I am trying to make an html website, and I got two things I trie to add to my page. One is a shoutbox using direct link code, and in the preview it displays fine, and works fine. Another is a teamspeak launcher I made, just a link and an image. I align one to the right the other to the left, and that works. The problem is, that the one on the right is level with the bottom of the shoutbox on the left, whereas I want them to be a part of two side columns eventually, where they are both the same length etc, not all uneven. Here is my preview page: http://i116.photobucket.com/albums/o...Untitled-1.gif I hope you see what I mean. Please help me, as I need this website online ASAP cos me and my clan are going to some tournaments and seriously need this online. Thanks in advance, Ferinos Ok I'd really like to design a darker them with a lot of textures like this one: http://www.grafpedia.com/tutorials/c...o-pixel-layout But thats just a photoshop walk-thru. So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image? I'm worried about download times as I have my background image as a 1px image set on repeat. But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I? Basically I'm lost as to how to get my site to look like the design in the link. Here it is now: http://acidtripmediaproductions.com/lmi/index.html I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it Whats the easiest way to do that? Would I want to keep the side bar nav where its at if I do this? Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J 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? |