View Full Version : How to make an overlay?
Forsaken_One
01-11-2006, 11:08 PM
Despite what the title says, I am not submitting anything on how to create an overlay. But, what I am doing... Is asking for some help.
Right now, I am somewhat familiar with HTML as well as CSS. But, I do not know where to start, to begin a decent overlay. I have gone through several tutorials, but have yet to successfully learn how to create my own.
So, this is where you all come in I guess... Is there anyone out there willing to teach me how to create an overlay? Or can someone at least point me in the direction as to where I can "most likely" learn how to create one... http://www.proboards.com/v4images/smiley.gif
Thanks ahead of time for the help.
Fenguin
01-11-2006, 11:15 PM
Excuse me for asking, but what is an overlay?
Forsaken_One
01-11-2006, 11:17 PM
Well, erm...
Maybe I have the terminology wrong. XD
But, what I am asking for is:
Some sites don't let you edit everything. So, an overlay is kind of a way to cheat, and post a picture or something along those lines "over" the existing webpage. Then, from there you can kind of go from there.
Right now, I am just trying to do a simple one, something for... myspace. Mainly for a learning experience with using CSS and HTML. As for I am still learning how to use them together...
EDIT:
Here is a stylesheet for an Overlay...
<style type="text/css">
.Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent; background-image:url("http://xs60.xs.to/pics/05516/blackandwhiteback.png "); color:000000; font-size:12pt; background-color: ;}
.Scrollbox { overflow:auto;width:450px;height:300px; color:000000; font-size:12pt; font-family:sylfaen; background-color: ; background-image: url(); border:2px solid black;}
.comments { width:10px; height:10px; overflow:auto; }
.player { position:absolute; left:0px; width:300; top:500 }
/* Navbar */
body div div table td { visibility: }
.navibar {background-color: white !important; position: absolute; left:50%; top:0px; margin-left: -400px; width: 800px; height: 153px; }
.nav { color:000000 !important; font-family:arial !important; }
/* Background Codes */
body {background-color:ffffff; background-position:center center; background-repeat: none; background-attachment:fixed;background-image:url("http://xs60.xs.to/pics/05516/blackandwhiteback.png ")}
/* Scrollbar Codes */
body {scrollbar-face-color:white;
scrollbar-highlight-color:black;
scrollbar-3dlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-shadow-color:black;
scrollbar-arrow-color:black;
scrollbar-track-color:white}
/* Miscellanous Codes */
div div table tr td a.navbar, div div table tr td font {display:;}
table td div div font {visibility:;}
</style>
<div class="navibar">
<table width="800" height="26" border="0" cellspacing="0" cellpadding="0">
<tr valign="middle">
<td align="center" class="text">
<a class="nav" href=""></a>
<a class="nav" href=""></a>
<a class="nav" href=""></a>
<a class="nav" href=""></a>
<a class="nav" href=""></a>
<a class="nav" href=""></a>
<a class="nav" href=""></a>
<a class="nav" href=""></a>
</tr>
</td>
</table>
</div>
<DIV class="Main"> <table style="width:800px; height:600px; cellpadding:10px; cellspacing:px; border:20px solid Black; background-color:ffffff;background-image:url(http://xs60.xs.to/pics/05516/blackandwhiteback.png);}"> <tr> <td valign="top">
<table width=780 align=center>
<tr>
<td valign=top align=center width=300px>
<br><a href="LINK TO YOUR VIEW MORE PICTURES "><img src="YOUR MAIN PIC URL HERE" ><br><font size=1 face=tahoma color=3399CC >Click Here For More Pictures</font></a>
<br><br>
<a href=http://home.myspace.com/index.cfm?fuseaction=user&Mytoken=14128601-1006-B016-366F11D1265FD8F527380637><font face=tahoma size=1 color=3399CC>Go To Your Home</a>
<br><a href= color=red]LINK TO YOUR MAIL ><font face=tahoma size=1 color=3399CC>Go To Your Mail</a>
<br><a href=LINK TO YOUR BLOG ><font face=tahoma size=1 color=3399CC>View My Blog</a>
<br><a href="LINK TO YOUR MESSAGE ME "><font face=tahoma size=1 color=3399CC >Send Me A Message</font></a>
<br><a href="LINK TO YOUR ADD ME TO FAVORITES "><font face=tahoma size=1 color=3399CC >Add Me To Your Favorites</font><a>
<br><a href="LINK TO YOUR VIEW MY FRIENDS "><font face=tahoma size=1 color=3399CC >View My Friends</font></a>
<br><a href=" LINK TO YOUR ADD ME "><font face=tahoma size=1 color=3399CC >Add Me To Your Friends</font></a>
<br><a href="YOUR VIEW MY COMMENTS LINK "><font face=tahoma size=1 color=3399CC >View My Comments</font></a>
<br><a href="LINK TO YOUR ADD COMMENT "><font face=tahoma size=1 color=3399CC >Leave Me A Comment</a></font>
<br>
<td valign=top align=left width=480px>
<center><font face=tahoma size=25px><b>[ <font color=3399CC >YOUR NAME HERE</font color> ]</b></font></p></center><br><br>
<font color=3399CC>
YOUR MAIN TEXT HERE
</font>
</td>
</tr></table>
</td> </tr> </table> </DIV>
<div class="comments"> <table><tr><td><table><tr><td>
bluemicrobyte
01-22-2006, 4:20 PM
, something for... myspace. Mainly for a learning experience with using CSS and HTML. As for I am still learning how to use them together...
Come out and say it loudly! We all do it, theres nothing to be ashamed of even though it's the most hated blog-ish thing in the world.
I tried customizing my myspace a long time ago and gave up. I now have a large link on my myspace pointing to my website since it's 35234 times easier to make a cool website than a cool myspace.
GrassDragon
01-22-2006, 8:39 PM
The "overlay" effect you're looking for can be accomplished by using the z-index attribute and absolute positioning. I believe the higher the z-index, the farther "up" to object is, i.e. it would be above everything else. Then just position it and bingo.
vBulletin® v3.7.2, Copyright ©2000-2008, Jelsoft Enterprises Ltd.