Make OVERLAYS without any PROGRAMS

**™wedzmer** · Subject: Make OVERLAYS without any PROGRAMS Wed Apr 02, 2008 8:23 pm

how to make an overlay layout that look like this
preview:
http://www.geocities.com/apolpie.n_nuggets//switpotatotuitorial.html

first i didnt include the css codes...here
juz plain design for main page itself..
u dont need any prog for this tricks...
all u need are:
1. ready made images.. banner ...
2. geocities acct
3 tons of...imagination
lets start:
open an acct in geocities...
u will be redirected to home.. click... the button that says...
edit and update... fie manager... then NEW

legend:
title.... where u will put ur page name
head ..where u wil insert ur css codes like scrollbar etc..
body... for main page design ( codes for ur table)...javascript like
statusbar etc etc...
be sure to save ur work ...with an ending of .html ( dot html)
then look for table launcher ( LAUNCH TABLE MAKER)
we will use this to view the possible size of ur table... assign specific location ( centered..left etc.. make margin padding etc etc...)
let say ill be using this banner for my overlay

at table laucher i specify the length of my talbe w/c accords with my banner properties..
i made a table with 2 row.. 1column.. ... press SHOW HTML to view the codes copy paste those and insert bet ur <head>< /head> tag
we will have something that look like this

original codes from table launcher:

Code:

alter the td
let say ill use the 1st TD for may banner
then the 2nd for my navigation

Code:

<TABLE WIDTH="729" BGCOLOR="#FFCCCC" ALIGN="center" CELLSPACING="0" CELLPADDING="0" BORDER="0"
background="[url=http://i180.photobucket.com/albums/x225/monikamote/monix1.gif]http://i180.photobucket.com/albums/x225/monikamote/monix1.gif[/url]">
<TR>
<TD>
<center/>
<img src="[url=http://i180.photobucket.com/albums/x225/monikamote/pixnixbanner.gif">http://i180.photobucket.com/albums/x225/monikamote/pixnixbanner.gif"></center</A>>
</TD>
</TR>
<TR>
<TD height="10px">

<font face="Arial" size="1" color="#F38383">
     <a href="<A href=]> | <a href="<A href='http://www.friendster.com/user.php">Profilehttp://www.friendster.com/user.php">Profile</a</A>> | <a href="<A href='http://www.friendster.com/friends.php">Friendshttp://www.friendster.com/friends.php">Friends</a</A>> | <a href="<A href='http://www.friendster.com/gallery.php">Searchhttp://www.friendster.com/gallery.php">Search</a</A>> | <a href="<A href='http://grouper.friendster.com">Videoshttp://grouper.friendster.com">Videos</a</A>> | <a href="<A href='http://classifieds.friendster.com/fi">Classifiedhttp://classifieds.friendster.com/fi">Classified</a</A>> | <a href="<A href='http://www.friendster.com/logout.php">Log'>http://www.friendster.com/logout.php">Log</A> yourselft out</a>
                                
                       
   
                        kamote concept™
</font>
</TD>
</TR>
</TABLE>

take note:
  codes for space
be cautious in my td and table wherein i add some tweaks like bg and specific height

now wer doen for upper part..
lets do then the main content ..menu of our page
let say ill make a 3 column.. 1 row table..

original codes:

Code:

then alter be noted with changes i done with my TD and TABLE..

Code:

take note:
u may add inside the td ur chatbox... all pa ekek ( xtra )
modues codes..
and div so ur page wont get long

i add this table for my credits w/c is optional
since u made include this inside the above mention TD

Code:

<table border="0" align="center" width="729" height="39" cellspacing="0" cellpadding="0" background="[url=http://i147.photobucket.com/albums/r299/switpotato/joyzzelogoheart.png]http://i147.photobucket.com/albums/r299/switpotato/joyzzelogoheart.png[/url]">
<tr>
<td><font face="Arial" size="1" color="salmon">
      Credits:       <a target="_blank" href="[url=http://www..com">Hello]http://www..com">Hello[/url] kitty</a>  | 
<a target="_blank" href="[url=http://www.">c..for]http://www.">c..for[/url] the OG</a>  | 
<a target="_blank" href="<A href='http://www.photobucket.com">photobucket</a>&nbsp'>http://www.photobucket.com">photobucket</a>&nbsp[/url]; | 
<a target="_blank" href="[url=http://www.">kamote]http://www.">kamote[/url] works</a> |
 
<a target="_blank" href="<A href='http://www.imageshack.com">imageshack</a> http://www.imageshack.com">imageshack</a> </a</A>>

</td>
</tr>
</table>

this part is for my friendster footer etc...
w/c then i decided to be just an ordinary txt w/o table ..

Code:

<p align="center"><font face="Arial" size="2" color="salmon">
<center><b style="font-size:9"><a href="#">About Us</a> | <a href="#">Contact Us</a> | <a href="">Events</a> | <a href="#">Promote My Profile</a> | <a href="#">Help</a> | <a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a><BR>Copyright 2002-2006 Friendster, Inc. All rights reserved. U.S.<br><br><br>
<Center><img src="<A href='http://i147.photobucket.com/albums/r299/switpotato/TBDaisy1.gif">http://i147.photobucket.com/albums/r299/switpotato/TBDaisy1.gif"></center</A>>
<center><b style="font-size:10">u.nix_07@yahoo.com</center></b><br><br>

overlay wont b complete w/o css pls check site like dynamic drive ..etc for more tricks..
for add ons pls browse the forum like modules for specific div etc...

~quoted from switpotato...~