website help Options

[sweetlilpnai]

im making a div layout and im going to put a navigation on the left and the website part on the right.. so when you click on it the only thing that will change the page would be the div not the whole thing...


heres an example


[example]


see how wen you click on the navigation the only thing that changes is that one area.. i was wondering how would i do that

sorry if im a little confusing.. thank you for the help in advance

[*mipadi*]

You could do it using iframes. If you do a Google search for iframe, you should find a tutorial on how to use those.

[freeflow]

Yea use iframes , use a div for the navigation and use an iframe for the part that you want your content to change into.
Heres a good iframe tutorial:
http://www.createblog.com/forums/index.php?showtopic=85687
http://pixelfx.org

[sweetlilpnai]

thank you very much!! =)

[sweetlilpnai]

okay for some reason its not working.. its making me reallie mad..can you use iframes on geocities

[freeflow]

Yes you can , i think post your iframe code .

[sweetlilpnai]

heres the site im doing. its for my sisters sorority.. its not working though..
http://www.geocities.com/delta_akdphi/

[freeflow]

Ok try this

CODE

<iframe FRAMEBORDER="0" BORDER=0 width=550
height=385 src="http://www.geocities.com/delta_akdphi/index.html"
name=Main style="position:absolute; left:40; top:-400" scrolling=auto></iframe>

thats your current. change it to this:

CODE

<iframe FRAMEBORDER="0" BORDER=0 width=550
height=385 src="index.html"
name=Main style="position:absolute; left:40; top:-400" scrolling=yes></iframe>

[sweetlilpnai]

i only have to do it to my main page right? cuz i have other html sections for each page .

[freeflow]

Yea . only put the iframe on the main page.

[sweetlilpnai]

hmm its still not working because like everytime i try to click on the link the whole page refreshes.. am i doing something wrong

[freeflow]

look this should fix it.
heres your code

CODE

<A href="http://www.geocities.com/delta_akdphi/index.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Untitled-3.gif" alt="Image hosted by Photobucket.com"></A><BR><BR>
<A href="http://www.geocities.com/delta_akdphi/Delta_akdphi.html" target=_blank><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/aboutus.gif" alt=""></A><BR><BR>
<A href="http://www.geocities.com/delta_akdphi/Sisters.html" target=_blank><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/sisters.gif" alt=""></A><BR><br>
<A href="http://www.geocities.com/delta_akdphi/Guestbook.html" target=_blank><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Guestbook.gif" alt=""></a><BR><BR>
<A href="http://www.geocities.com/delta_akdphi/Photography.html" target=_blank><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/photo.gif" alt=""></a>
<br><br><A href="http://www.geocities.com/delta_akdphi/Contact.html" target=_blank><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/contact.gif" alt=""></a></td>

it should be

CODE

<A href="http://www.geocities.com/delta_akdphi/index.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Untitled-3.gif" alt="Image hosted by Photobucket.com"></A><BR><BR>
<A href="http://www.geocities.com/delta_akdphi/Delta_akdphi.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/aboutus.gif" alt=""></A><BR><BR>
<A href="http://www.geocities.com/delta_akdphi/Sisters.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/sisters.gif" alt=""></A><BR><br>
<A href="http://www.geocities.com/delta_akdphi/Guestbook.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Guestbook.gif" alt=""></a><BR><BR>
<A href="http://www.geocities.com/delta_akdphi/Photography.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/photo.gif" alt=""></a>
<br><br><A href="http://www.geocities.com/delta_akdphi/Contact.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/contact.gif" alt=""></a></td>

and its not target=_blank just to let you know its target="_blank". the "_blank" makes the page refresh.

[sweetlilpnai]

now it doesnt want to change pages.. sorry

[*mipadi*]

and its not target=_blank just to let you know its target="_blank". the "_blank" makes the page refresh.

It can be target=_blank, as long as it's not XHTML (XHTML requires quotes around attribute values). _blank doesn't make the page refresh; it just loads the content of a link in a new window.

[freeflow]

now it doesnt want to change pages.. sorry

I can't see your iframe code anymore .. you still have it in there right?

[talcumpowder]

Stylesheets go in header. And, you can use iFrames on Geocities, it just as to be executed right. And... The name of the iFrame should be enclosed in quotation marks... =S That seems to be the only way it works on Geocities.

[sweetlilpnai]

I can't see your iframe code anymore .. you still have it in there right?

yeah its still on there...

Stylesheets go in header. And, you can use iFrames on Geocities, it just as to be executed right. And... The name of the iFrame should be enclosed in quotation marks... =S That seems to be the only way it works on Geocities.

i put the name of the iframe in quotation marks.. but how do i know if i did it right..

[freeflow]

yeah its still on there...
i put the name of the iframe in quotation marks.. but how do i know if i did it right..

Your iframe should work.

[sweetlilpnai]

do you think its because of the codes that i have on their its not working?

[freeflow]

Who knows try posting your codes here rather than use looking through view source.

CODE

<html>
<head>
<title>TITLEOFSITEHERE</title>
STYLESHEETHERE
</head>
<body>
ANY OTHER CODES HERE
</body>
</html>

try redoing your main page so its like that put all divs , iframes , images and anything but your stylesheet in between <body> and </body>

[sweetlilpnai]

okay thank you.. im going to try it brb =)

[sweetlilpnai]

<!-- begin code provided by createblog.com --><br /><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/crest.gif" alt=""><br /><!-- end code provided by createblog.com -->

This is for my sisters header the on where it says alpha kappa delta phi

<!-- begin code provided by createblog.com --><br /><br /><html><br /><head><br /><title>Alpha Kappa Delta Phi Santa Cruz [Delta Chapter]</title><br /><style>A:link { color: #3e84c2;  text-decoration: underline }<br />                                                A:active { color: #663399;  text-decoration: underline }<br />                                                A:hover { color: white;  text-decoration: none }<br />                                                A:visited { color: #cc66ff;  text-decoration: underline}</style><br /><br /><style><br />b {font-family:arial;font-size:8pt;color:black;letter-spacing:2px;text-transform: uppercase; font-weight:bold;}<br /></style><br /><br /><style type="text/css"><br />div {<br />filter:chroma(color=#00FF00); /* here you are defining which color you want to be transparent in your scrollbars */<br /><br />scrollbar-arrow-color: #336699;<br />scrollbar-face-color: #00FF00; /* transparent */<br />scrollbar-3dlight-color: #00FF00; /* transparent */<br />scrollbar-darkshadow-color: #00FF00; /* transparent */<br />scrollbar-highlight-color: #00FF00;<br />scrollbar-shadow-color: #00FF00;<br />scrollbar-track-color: #00FF00; /* transparent */<br />}<br /></style> <br /><br /><style text="text/css"><br />body,tr,td {font-size: 11px; <br />           font-family: Centurty Gothic; <br />     text-align: justify; <br />     color: white; <br />     line-height:13px; <br />     letter-spacing: 1pt} </style><br /></head><br /><body><br /><div style="position: absolute; top:-400; left:40"><br /><iframe FRAMEBORDER="0" BORDER=0 width=550 <br />height=385 src="index.html" <br />name="main" style="position:absolute; left:40; top:-400" scrolling=yes></iframe></div><br /><IMG src="http://img.photobucket.com/albums/v513/inday8298/backgrounds/akdphi.gif"><br /><div style="position:static; margin-left: <br />40px;margin-top: -400;border: 0px solid black; width: 550px; height:385px;background: none;overflow-y: auto;overflow-x:hidden;><br /><DIV id="scroll3" style="width:530px; height:365px; overflow-y: auto;overflow-x: hidden; border:0px; border-width:0px;"><br /><BR><BR><BR><Br><BR><BR><BR><BR><BR><BR><BR><BR><BR><br /><font color=black><font size=4>DELTA DIVAS</font></font></font><br /><BR><BR><br /><A href="http://img.photobucket.com/albums/v513/inday8298/akdphi/akdphihousepic.jpg" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/akdphihousepic.jpg" alt="click to enlarge"width=300 height=200></A><br /><br /><br /></body><br /></html><br /><br /><br /><!-- end code provided by createblog.com -->

This is where the pages should show up at

<!-- begin code provided by createblog.com --><br /><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/NAVIGATE.gif"><br /><br /><div style="position:static; margin-left: <br />40px;margin-top: -330;border: 0px solid black; width: 550px; height:385px;background:;overflow-y: auto;overflow-x:hidden;><br /><DIV id="scroll3" style="width:530px; height:365px; overflow-y: auto;overflow-x: hidden; border:0px; border-width:0px;"><br /><br /><A href="http://www.geocities.com/delta_akdphi/index.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Untitled-3.gif" alt="Image hosted by Photobucket.com"></A><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Delta_akdphi.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/aboutus.gif" alt=""></A><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Sisters.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/sisters.gif" alt=""></A><BR><br><br /><A href="http://www.geocities.com/delta_akdphi/Guestbook.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Guestbook.gif" alt=""></a><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Photography.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/photo.gif" alt=""></a><br /><br><br><A href="http://www.geocities.com/delta_akdphi/Contact.html" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/contact.gif" alt=""></a></td><br /><br /><br /><br /><!-- end code provided by createblog.com -->

Navigation bar

[freeflow]

First off it seems like you have ALOT of divs and your not ending all of them . For instance the navigation one . For one you really need to go through and make sure you end all your codes. You might also want to try taking your iframe out of a div and aligning the iframe.

That might not fix the iframe but you need to fix thats stuff.

[sweetlilpnai]

okay i closed all my div codes xcept for the main one that the page will show up on

[talcumpowder]

For Geocities, I found that moving the iFrame in the div is a lot easier than moving the iFrame itself. It just seems to work better. But since you're moving the iFrame itself, I suggest you take out the div. You don't need it.
And, yeah, you need to end a lot of your divs with </div>.
edit// Found your problem. You do realize that the IFRAME is where your pages are going to show up, right?

[sweetlilpnai]

yeah i know that thats where my pages are going to show up im trying to get it to show up but when ever i click on the link it doesnt change the page

[talcumpowder]

Okay. And, your problem is that you're linking the index.html file, which is the main page. Which is why nothing's changing probably. You should name it something like indexx.html or home.html for the content of the iFrame.

[sweetlilpnai]

i did that... its still not working..

[talcumpowder]

Try this, I'm not sure I added everything, you broke it up, so I didn't quite know where you actually wanted everything.

<!-- begin code provided by createblog.com --><br /><html><br /><head><br /><title>Alpha Kappa Delta Phi Santa Cruz [Delta Chapter]</title><br /><style><br />A:link { color: #3e84c2;  text-decoration: underline }<br />A:active { color: #663399;  text-decoration: underline }<br />A:hover { color: white;  text-decoration: none }<br />A:visited { color: #cc66ff;  text-decoration: underline}<br />b {font-family:arial;font-size:8pt;color:black;letter-spacing:2px;text-transform: uppercase; font-weight:bold;}<br />div {<br />filter:chroma(color=#00FF00); /* here you are defining which color you want to be transparent in your scrollbars */<br />scrollbar-arrow-color: #336699;<br />scrollbar-face-color: #00FF00; /* transparent */<br />scrollbar-3dlight-color: #00FF00; /* transparent */<br />scrollbar-darkshadow-color: #00FF00; /* transparent */<br />scrollbar-highlight-color: #00FF00;<br />scrollbar-shadow-color: #00FF00;<br />scrollbar-track-color: #00FF00; /* transparent */}<br />body,tr,td {font-size: 11px; <br />font-family: Centurty Gothic; <br />text-align: justify; <br />color: white; <br />line-height:13px; <br />letter-spacing: 1pt} <br /></style><br /></head><br /><body><br /><iframe FRAMEBORDER="0" BORDER=0 width=550 <br />height=385 src="index.html" name="main" style="position:absolute; left:40; top:-400" scrolling=yes></iframe><br /><IMG src="http://img.photobucket.com/albums/v513/inday8298/backgrounds/akdphi.gif"><br /><div style="position:static; margin-left: 40px;margin-top: -400;border: 0px solid black; width: 550px; height:385px;background: none;overflow-y: auto;overflow-x:hidden;><br /><DIV style="width:530px; height:365px; overflow-y: auto;overflow-x: hidden; border:0px; border-width:0px;"><br /><BR><BR><BR><Br><BR><BR><BR><BR><BR><BR><BR><BR><BR><br /><font color=black><font size=4>DELTA DIVAS</font></font></font><br /><BR><BR><br /><A href="http://img.photobucket.com/albums/v513/inday8298/akdphi/akdphihousepic.jpg" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/akdphihousepic.jpg" alt="click to enlarge"width=300 height=200></A><br /></div></div><br /><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/NAVIGATE.gif"><br /><br /><div style="position:static; margin-left: <br />40px;margin-top: -330;border: 0px solid black; width: 550px; height:385px;background:;overflow-y: auto;overflow-x:hidden;><br /><DIV id="scroll3" style="width:530px; height:365px; overflow-y: auto;overflow-x: hidden; border:0px; border-width:0px;"><br /><br /><A href="http://www.geocities.com/delta_akdphi/index.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Untitled-3.gif" alt="Image hosted by Photobucket.com"></A><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Delta_akdphi.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/aboutus.gif" alt=""></A><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Sisters.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/sisters.gif" alt=""></A><BR><br><br /><A href="http://www.geocities.com/delta_akdphi/Guestbook.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Guestbook.gif" alt=""></a><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Photography.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/photo.gif" alt=""></a><br /><br><br><A href="http://www.geocities.com/delta_akdphi/Contact.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/contact.gif" alt=""></a></td><div></div><br /></body><br /></html><br /><!-- end code provided by createblog.com -->

[sweetlilpnai]

aww thanks for doing the code for me.. but uhh hehe its still not working

[talcumpowder]

When you're doing the pages that are supposed to show up in the iFrame, the layout code shouldn't be included. It should just be the content you want to show up on the page when you click the link.[/random]

[sweetlilpnai]

o0o i didnt know that okay.. i tried it though but it still wont change pages


http://www.geocities.com/delta_akdphi/


thats the site

[freeflow]

ok go do this now:

1) on your index.html page . have the layout , the iframe and all the divs.
2) on every other page , have only your stylesheet code and the content NOT IN A DIV just out there like a word document.

[sweetlilpnai]

i did that .. but then the guest boook just went to the bottom of the page.. and the layout is at the top of the page

[talcumpowder]

Considering your source looks like this....

<!-- begin code provided by createblog.com --><br /><table border=0 cellspacing=0 cellpadding=0 width=263><br /><tr valign="top" align="left"><br /> <td><img src="http://www.geocities.com/clipart/pbi/c.gif" height=1 width=73></td><br /> <td><img src="http://www.geocities.com/clipart/pbi/c.gif" height=1 width=9></td><br /> <td><img src="http://www.geocities.com/clipart/pbi/c.gif" height=1 width=110></td><br /> <td><img src="http://www.geocities.com/clipart/pbi/c.gif" height=1 width=1></td><br /> <td><img src="http://www.geocities.com/clipart/pbi/c.gif" height=1 width=39></td><br /> <td><img src="http://www.geocities.com/clipart/pbi/c.gif" height=1 width=31></td><br /> <td><img src="http://www.geocities.com/clipart/pbi/c.gif" height=1 width=1></td><br /><br /></tr><br /><tr valign="top"><br /> <td colspan=7 height=56></td><br /></tr><br /><tr valign="top"><br /> <td colspan=2 height=150></td><br /> <td colspan=3 rowspan=1 width=150><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/crest.gif" alt=""></td><br /> <td colspan=2 height=150></td><br /></tr><br /><tr valign="top"><br /> <td colspan=7 height=2></td><br /></tr><br /><br /><tr valign="top"><br /> <td colspan=4 height=1></td><br /> <td colspan=2 rowspan=2 width=70><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/NAVIGATE.gif"><br /><br /><div style="position:static; margin-left: <br />40px;margin-top: -365;border: 0px solid black; width: 550px; height:385px;background:;overflow-y: auto;overflow-x:hidden;><br /><DIV id="scroll3 style="width:530px; height:365px; overflow-y: auto;overflow-x: hidden; border:0px; border-width:0px;"><br /><br /><A href="http://www.geocities.com/delta_akdphi/index.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Untitled-3.gif" alt="Image hosted by Photobucket.com"></A><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Delta_akdphi.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/aboutus.gif" alt=""></A><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Sisters.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/sisters.gif" alt=""></A><BR><br><br /><A href="http://www.geocities.com/delta_akdphi/Guestbook.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/Guestbook.gif" alt=""></a><BR><BR><br /><A href="http://www.geocities.com/delta_akdphi/Photography.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/photo.gif" alt=""></a><br /><br><br><A href="http://www.geocities.com/delta_akdphi/Contact.html" target="main"><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/contact.gif" alt=""></a></td><div></div></td><br /> <td colspan=1 height=1></td><br /></tr><br /><br /><tr valign="top"><br /> <td colspan=1 height=149></td><br /> <td colspan=2 rowspan=2 width=119><br /><html><br /><head><br /><title>Alpha Kappa Delta Phi Santa Cruz [Delta Chapter]</title><br /><style><br />A:link { color: #3e84c2;  text-decoration: underline }<br />A:active { color: #663399;  text-decoration: underline }<br />A:hover { color: white;  text-decoration: none }<br />A:visited { color: #cc66ff;  text-decoration: underline}<br />b {font-family:arial;font-size:8pt;color:black;letter-spacing:2px;text-transform: uppercase; font-weight:bold;}<br />div {<br />filter:chroma(color=#00FF00); /* here you are defining which color you want to be transparent in your scrollbars */<br />scrollbar-arrow-color: #336699;<br />scrollbar-face-color: #00FF00; /* transparent */<br />scrollbar-3dlight-color: #00FF00; /* transparent */<br />scrollbar-darkshadow-color: #00FF00; /* transparent */<br />scrollbar-highlight-color: #00FF00;<br />scrollbar-shadow-color: #00FF00;<br />scrollbar-track-color: #00FF00; /* transparent */}<br />body,tr,td {font-size: 11px; <br />font-family: Centurty Gothic; <br />text-align: justify; <br />color: white; <br />line-height:13px; <br />letter-spacing: 1pt} <br /></style><br /></head><br /><body><br /><iframe FRAMEBORDER="0" BORDER=0 width=550 <br />height=385 src="indexx.html" name="main" style="position:absolute; left:40; top:-400" scrolling=yes></iframe><br /><IMG src="http://img.photobucket.com/albums/v513/inday8298/backgrounds/akdphi.gif"><br /><div style="position:static; margin-left: 40px;margin-top: -400;border: 0px solid black; width: 550px; height:385px;background: none;overflow-y: auto;overflow-x:hidden;><br /><DIV style="width:530px; height:365px; overflow-y: auto;overflow-x: hidden; border:0px; border-width:0px;><br /><BR><BR><BR><Br><BR><BR><BR><BR><BR><BR><BR><BR><BR><br /><br /><font color=black><font size=4>DELTA DIVAS</font></font></font><br /><BR><BR><br /><A href="http://img.photobucket.com/albums/v513/inday8298/akdphi/akdphihousepic.jpg" target=main><img src="http://img.photobucket.com/albums/v513/inday8298/akdphi/akdphihousepic.jpg" alt="click to enlarge"width=300 height=200></A><br /></div></div><br /><br /></body><br /></html><br /></td><br /> <td colspan=1 height=149></td><br /> <td colspan=1 height=149></td><br /></tr><br /><tr valign="top"><br /> <td colspan=1 height=1></td><br /><br /> <td colspan=4 height=1></td><br /></tr><br /></table><br /></body><br /></html><br /><!-- end code provided by createblog.com -->

I wouldn't be surprised that nothing is working.

[sweetlilpnai]

so its wrong.. ehhh...

[freeflow]

Seems like you should go back and recode it , read the div tutorials in teh tutorials section so you dont have all these extra codes , your source is really complicated to look at , when you postiion try absolute rather then static.

There are soo many codes and alot were messed up so you should really go back and recode

[sweetlilpnai]

okay ill do that right now