PDA

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.