|
HTML - I Searched I Really Did.. Page Stays Same Content Changes Smoothly
hello, everyone I know this is a pretty basic one on the account that it is currently everywhere on the internet now. But you know how you are on a page and you decide to click a link and the PAGE stays the same mean it doesn't reload but the content changes and loads... for example ... facebook... or http://diettogo.com/menu-nutrition/l...an-1600/week-4
when you click week one or week 2 the content changes but the entire layout doesn't reload... what is causing this.. how can I set my llinks up in this way.. is smooth and clean. Similar TutorialsReference Link: {website taken off for personal reasons} If you visit the link I posted, what I want to happen, is when you click on the tabs Home, Giving Programs, Leave A Legacy or Make a Gift, I want the content of them to appear in the green box that is below the tabs. When you click on the tabs to the right - Events, Home, Home, I want their content to appear in the box that is below those tabs. I have that much figured out - but my question is - when you click on the links on the left, or on the right, the information in the opposite box (from the previous link that was clicked) goes away. Is there anyway to keep the information up in both boxes at all times? Example: If you click on Make a Gift - Tab content 4 here Tab content 4 here shows up in the green box below the tabs. BUT... when you click on Events to the right - TOOOOOOOOOOLS shows up - but 'Tab content 4 here' goes away. PROBLEM - I want 'Tab content 4 here' to stay up. Thanks so much in advance!! This website has a skyscraper banner on the left that stays with you as you scroll down the page. http://www.vcdq.com Can this same effect be used on a skyscraper that's in a wordpress theme's sidebar.php? What HTML code creates a bar that stays at the bottom of the screen, even when the paged is scrolled Like the Wibiya toolbar does http://wibiyareview.com/ Thanks James I was wondering if there is a way to display a section of another webpage, such as a table, through a separate site. Obviously I could just copy the code from one of my pages to the other, but I would prefer if it would automatically take the code from one page and display on another? I hope I am making a bit of sense. Nick C. Rather than re-write this page and the css, I'd just like to fix what I'm working with, please. This page is not lining up correctly, as you can see from the attached image. All the text content should be to the right of the (left) red column and the red column is supposed to be the width of the gray bar above it. (The header is a separate piece of this page) Can you help me get the left red column to the correct width and all the text content to the right of the red column? thanks. Here's my code: Code: <table valign='top' align="right" cellpadding="0" width="100%" height="80%"> <table style="background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:100% height:80%> <table width="770" border="0" cellpadding="0" cellspacing="0" id="maintable" align="center"> <link href="custom.css" rel="stylesheet" type="text/css"> <tr><td id="menu" align="left"> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="index.php"><font color="#DDCEA2"><font face="Arial" size="2">Home</a></font><br> <img src="images/bullet.gif" alt="" width="10" height="10"><A href='index.php?command=signup_page'><font color="DDCEA2"><font face="Arial" size="2">Sign Up</font></A><br /> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="faq.html"><font color="DDCEA2"><font face="Arial" size="2">FAQ</a><br> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="legal.html"><font color="DDCEA2"><font face="Arial" size="2">Terms of Use</a><br><br><br><br><br><br><br><br> </tr> <form method="POST" action="index.php"> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='renew'> <input class='field' type='hidden' name='account_id' value='[account_id]'> <td colspan='2' class='pageTitle'><div class='hLine'><font face="Arial" color="#EE7600" size="3"> Choose a Transaction</font></div></tr></td> <tr><td class='fieldLabel' width="30%"><font face="Arial" color=#000000" size="3" Style="padding: 5px;"> <font face="Arial" color="#000000" size="2"> Transaction Type:</font></td> <td align="left"><font face="Arial" color="#EE7600" size="2">[account_type_panel]</font></tr> <tr> <tr><td> </td></tr> <tr><td align="left"> </td> <td align="left"><input name="submit" type='submit' class='button' value='Next' /> </td> </tr> </form> <tr height='30%' ><td colspan="2"><div class='hLine'> </div></td></tr> </table> Hey there, I'm very new to HTML, but I can't figure out why the content area of my page is overlapping with my top frame. It's most obvious just to the right of the right angle formed by the place where the top and left frames each other. The website www.fourseasonssunrooms.ca. Any ideas as to how to move the content area down so this overlap does not occur?? I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html>
<head>
<title>Official Site of Premier Security Group, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.centerContainer { margin: 0 auto; }
body
{
background-image:url(images/bkgd2.png)
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:1200px;
}
#PSindex-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:69px;
}
#PSindex-02 {
position:absolute;
left:0px;
top:69px;
width:20px;
height:174px;
}
#PSindex-03 {
position:absolute;
left:20px;
top:69px;
width:760px;
height:174px;
}
#PSindex-04 {
position:absolute;
left:780px;
top:69px;
width:20px;
height:174px;
}
#PSindex-05 {
position:absolute;
left:0px;
top:243px;
width:800px;
height:13px;
}
#PSindex-06 {
position:absolute;
left:0px;
top:256px;
width:20px;
height:35px;
}
#PSindex-07 {
position:absolute;
left:20px;
top:256px;
width:126px;
height:35px;
}
#PSindex-08 {
position:absolute;
left:146px;
top:256px;
width:129px;
height:35px;
}
#PSindex-09 {
position:absolute;
left:275px;
top:256px;
width:125px;
height:35px;
}
#PSindex-10 {
position:absolute;
left:400px;
top:256px;
width:1px;
height:944px;
}
#PSindex-11 {
position:absolute;
left:401px;
top:256px;
width:123px;
height:35px;
}
#PSindex-12 {
position:absolute;
left:524px;
top:256px;
width:130px;
height:35px;
}
#PSindex-13 {
position:absolute;
left:654px;
top:256px;
width:126px;
height:35px;
}
#PSindex-14 {
position:absolute;
left:780px;
top:256px;
width:20px;
height:35px;
}
#PSindex-15 {
position:absolute;
left:0px;
top:291px;
width:400px;
height:909px;
}
#PSindex-16 {
position:absolute;
left:401px;
top:291px;
width:399px;
height:909px;
}
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div class="centerContainer">
<div>
<div id="Table_01">
<div id="PSindex-01">
<img src="images/PSindex_01.png" width="800" height="69" alt="">
</div>
<div id="PSindex-02">
<img src="images/PSindex_02.png" width="20" height="174" alt="">
</div>
<div id="PSindex-03">
<img src="images/PSindex_03.png" width="760" height="174" alt="">
</div>
<div id="PSindex-04">
<img src="images/PSindex_04.png" width="20" height="174" alt="">
</div>
<div id="PSindex-05">
<img src="images/PSindex_05.png" width="800" height="13" alt="">
</div>
<div id="PSindex-06">
<img src="images/PSindex_06.png" width="20" height="35" alt="">
</div>
<div id="PSindex-07">
<img src="images/PSindex_07.png" width="126" height="35" alt="">
</div>
<div id="PSindex-08">
<img src="images/PSindex_08.png" width="129" height="35" alt="">
</div>
<div id="PSindex-09">
<img src="images/PSindex_09.png" width="125" height="35" alt="">
</div>
<div id="PSindex-10">
<img src="images/PSindex_10.png" width="1" height="944" alt="">
</div>
<div id="PSindex-11">
<img src="images/PSindex_11.png" width="123" height="35" alt="">
</div>
<div id="PSindex-12">
<img src="images/PSindex_12.png" width="130" height="35" alt="">
</div>
<div id="PSindex-13">
<img src="images/PSindex_13.png" width="126" height="35" alt="">
</div>
<div id="PSindex-14">
<img src="images/PSindex_14.png" width="20" height="35" alt="">
</div>
<div id="PSindex-15">
<img src="images/PSindex_15.png" width="400" height="909" alt="">
</div>
<div id="PSindex-16">
<img src="images/PSindex_16.png" width="399" height="909" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
I need help with my layout + putting content on my page + putting wordpress on my page and editing it to match someone help please? I'm trying to set up an affiliate popup for my buddies and each time someone clicks a certain link, there will be a popup, but each time you click the link the content on the popup is different. I was wondering if this is possible. Problem solved. This can be deleted. Hiii experts, I am creating 2 HTML pages when click on 1st page hyperlink, we will go to 2nd page 2nd page contains an image. when clicking on image i want to go to 1st page with new content and want to remove privious content. also when 2nd page open 1st page is visible but when cliking on image , new content should be visible on 1st page. please help me its urgent!! At the bottom of each of my many pages I like to put a set of various buttons/links and I like to center them all, beginning with my email addy. I'm using the identical html on every page and so far, on every page it all has centered correctly. On the one I'm working on now, though, they are "left-justified." You can see it at http://www.sticksite.com/fishing/indexNEW.html at the bottom, directly below the horizontal line, and starting with my email addy. Can anyone please tell me why, on THIS page, that stuff will not center, when I did use the tag: <div style="text-align: center> which has worked on every other page so far? THANKS! (maybe fishing is not compatible with centering?) Sorry, my title is unclear see if I can explain it better he ok when I click from any of the other pages to the menu page, the name and address (which is on every page in the same place) moves to the left slightly. the name and address stay in the same place when clicking to and from any of the other pages, its just the menu page with this hiccup. This happens both in IE and Firefox. Any ideas on how to correct this?? HTML of home page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="EN-GB"> <meta name="author" content="xxxxxxx"> <meta name="description" content="Kabasa Guest House and Restaurant - Online"> <meta name="copyright" content="2011"> <meta name="keywords" content="Kabasa Guest House and Restaurant, Places to stay in Kenya, Accomdation in Kenya"> <title>Kabasa Guest House and Restaurant</title> <link rel="stylesheet" type="text/css" href="styles6.css"> </head> <body> <ul id="navbar"> <li><a href="home.html">HOME</a></li> <li><a href="menu.html">MENU</a></li> <li><a href="room.html">ROOMS</a></li> <li><a href="rates.html">RATES</a></li> <li><a href="book.html">BOOK</a></li> </ul> <div id="header"> <h1>Kabasa Guest House and Restaurant</h1> <div id="address"> <pre> xxxxxxxx xxxxxxx xxxxxxxxx Tel: +00000000000 </pre> </div> </div> <br> <p class="center"> The Kabasa guest house and restaurant is situated just a<br> few metres from the worlds second largest fresh water<br> Lake Victoria. We welcome you to come and experience our<br> accommodation with excellent service at affordable rates.<br> </p> <br> <img src="Images/d4.jpg" class="center"/> <br> <div id="footer"> <p>Copyright 2011 © Kabasa Guest House and Restaurant. All rights reserved</p> </div> </body> </html> HTNL of the menu page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="EN-GB"> <meta name="author" content="xxxxxx"> <meta name="description" content="Kabasa Guest House and Restaurant - Online"> <meta name="copyright" content="2011"> <meta name="keywords" content="Kabasa Guest House and Restaurant, Places to stay in Kenya, Accomdation in Kenya"> <title>Kabasa Guest House and Restaurant</title> <link rel="stylesheet" type="text/css" href="styles6.css"> </head> <body> <ul id="navbar"> <li><a href="home.html">HOME</a></li> <li><a href="menu.html">MENU</a></li> <li><a href="room.html">ROOMS</a></li> <li><a href="rates.html">RATES</a></li> <li><a href="book.html">BOOK</a></li> </ul> <div id="header"> <h1>Kabasa Guest House and Restaurant</h1> <div id="address"> <pre> xxxxxxxxxx xxxxxxxx xxxxxxxxx Tel: +0000000000 </pre> </div> </div> <h2>Menu</h2> <div id="menucenter"><b>We offer a full continental buffet breakfast table service by order.</b> <b>We also offer room service.</b></div> <div id="menu"> <pre> <u>Full Breakfast</u> Our full breakfast gives you a choice of the following: Fruits : Pineapple, Watermelon, Sweet Banana, Pawpaw, Oranges Fresh Juice : Passion, Mango, ****tail Cereal : Weetabix or Corn flakes served with cold or warm milk Toast, sausages, eggs and bacon <u>Beverages</u> Drinking chocolate, Tea, Nescafe, Milo <u>Snacks</u> Sandwiches (by order), chips, sausages, beef rolls, samosas (chicken, beef and vegetables), meat pie, cakes. <u>Main meals/courses</u> Chicken Curry, Chicken Masala, chicken stew, butter chicken, boiled chicken, chicken biriani, chicken wet fry. All served with Rice, ugali, chapatti, pasta, spaghetti and vegetables with garnishing Beef Stroganoff, beef stew, beef curry, fried beef, boiled beef, beef masala Whole (stewed or fried) tilapia, Fish fillet in coconut source, Fresh (stewed Tilapia), Whole (masala) Tilapia All Served with rice, ugali, chapatti and vegetable garnishing <u>Soups</u> Vegetable cream, Tomato cream, French onion soup, Served with Crotons. Traditional Kenyan Vegetables served with Ugali, Rice, Mash Potatoe, Boiled Potatoes, Baked Potatoes and fried vegetable rice <u>Salads</u> Kachumbari, we also have a number of assorted fruits and vegetable salads. <u>Burgers</u> Cheese beef burgers, Egg beef burgers, Beef burgers <u>Choma Zone</u> T-bone steak (400gms), pork chops, barbeque chicken, prime fillet steak <u>Beers</u> Tusker, White Cap (Tusker Malt), Guinness, Smirnoff ice (black and red) <u>Juices</u> Soda, Alvaro, Novida, Mineral water, Passion, Avocado </pre> </div> <div id="footer"> <p>Copyright 2011 © Kabasa Guest House and Restaurant. All rights reserved</p> </div> </body> </html> CSS: Code: body {
margin:2% 4%;
font-family:'lucida grande',tahoma,helvetica,sans-serif;
font-size:11pt;
color:#006;
background:#ffc;
}
#navbar {
float:left;
width:12%;
margin:0;
padding:0;
font-size:20px;
list-style-type:none;
}
#navbar li {
margin-bottom:2px;
}
#navbar a {
display:block;
padding-left:8px;
background-color:#cff;
}
#navbar a:hover {
color:#000;
background-color:#fff;
}
#header {
margin-left:%;
}
h1 {
text-align:center;
margin-right: 10%;
}
#address {
width:182px;
padding:0 4px;
margin: auto;
font-family:arial,sans-serif;
font-size:10pt;
font-weight: bold;
background-color:#fff;
filter:alpha(opacity=75);
opacity: 0.75;
}
h2 {
clear:both;
margin-top:3%;
margin-left:%;
text-align:center;
}
h3 {
clear:both;
margin-top:3%;
margin-left:%;
text-align:center;
}
h6 {
margin: auto;
left:0;
right:0;
width: 655px;
font-weight: bold;
font-size: 10pt;
font-family: arial, sans-serif;
}
#rates {
padding:8px;
background-color:#fff;
filter:alpha(opacity=75);
opacity: 0.75;
}
#rates span {
text-decoration:underline;
font-weight:bolder;
}
#menu {
margin: auto;
left:0;
right:0;
width: 675px;
background-color:#fff;
filter:alpha(opacity=75);
opacity: 0.75;
}
#menucenter {
text-align: center;
}
p.center {
text-align: center;
}
img.center {
margin-left: auto;
margin-right: auto;
display: block;
}
#footer {
clear: both;
width: 100%;
font-family: Arial Unicode MS;
font-size: 8pt;
text-align: center;
}
Many thanks Jackie Ello I'm a complete newb so sorry if I'm posting in the wrong place guys. Could anybody out there help me make a field / box like the one on this site. http://www.laptopsdirect.co.uk/Acer_...62/version.asp Below the laptop is a large field, if you click things like "technical specification" etc, it changes only that field. Then if you press the back button it backs up to the last page, rather than the last configuration of the current page. Phew.. confusing myself now lol. Anyhoo, just want to know how I would make such a box, with tabs that change that box only? Thanx Sarah I don't have the ability to add an anchor to the page, it's not mine, but I'd like to link to a specific area on the page. Is that possible without that page having some sort of anchor already on it? hello, I'm an HTML novice who designed/maintains my own site without any expertise at all. One problem I can't seem to figure out: When the browser window is sized more narrowly than the content on the page, the table sections get shoved down underneath one another. Most sites I see don't do that -- when the browser window narrows, the site content stays in place. Any insight about what my error is? You can check out the problem at www.adamgwon.com. Thanks much. Hi all, I am a little lost here.. I am programming a page where many images load. It happens that the next time you visit the page, updated images with the same filename should load, but the older version of the image loads instead. I am guessing that it finds the image in the cache, with the same filename, and loads that one, thinking it's the image it's looking for. That being said, I have looked through so many forums to find a solution that would make it re-download fresh content of the page directly from the server, rather than from the cache. here is the code that seems fairly unanimous: <META HTTP-EQUIV="Expires" CONTENT="-1" /> <META HTTP-EQUIV="Pragma" CONTENT="no-cache" /> <META HTTP-EQUIV="Cache-Control" content="no-store" /> <META HTTP-EQUIV="Cache-control" CONTENT="no-cache" /> <META HTTP-EQUIV="Cache" CONTENT="no-cache" /> <META HTTP-EQUIV="Expires" CONTENT="thu, 01 Jan 1998 12:00:00 GMT" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> But still with this code in the head tag, the updated images don't get loaded from the server... Any ideas?? Thanks so much, Steph Hi All, I have just started my first page and there is a little problem with it that is driving me nuts. Basically, Im trying to make a simple page where the content is centered and there are two background columns on the right and left: we see these pages everywhere. Here is the code (pseudo) I am trying <body> <centered content> <body_divis> <pic> insert picture (top left) <pic> </body_div> </centered content> <body> now im using a css file in which we have: <centetred content> : fix width (1000px), auto left and right margin, gray background. <body_div>: white background. <pic>: 0 margins. So far so good, I get the desired effect: white page in the middle, two side columns in gray. All of this starts at the very top of the page. Now I just want to move the picture slighlty down. As soon as I do that the whole white centered section moves down with it, creating a horizental gray bar on top of the page that is driving me nuts.... it seems that the white section starts where the first object is placed. I just want it to start at the top and then plance my objects wherever. All margins are good in my code as I have checked and rechecked. I appreciate any help. Thanks, Kakeez |
|||||||