Making a DIV Overlay Layout, Step by step Options

[ranmori]

simulation credit auto

Voted

[25kati]

hey can you help me code my iv please.. i tried but its quite confusing. i have a few other divs i was going to make but they'll all have the same design.. to a point i wanted to know if you could help or code this one. please.


http://i189.photobucket.com/albums/z56/25k.../Untitled-1.jpg

[iBwapU]

hey, can you tell me where to put this code in the CSS?...i'm using the third one from step 2

<div class="bg" style="position: absolute; left:0px; top:0px; width:000px; height:000px; overflow: hidden;">
<img src="IMAGEURLHERE">
</div>

i'm trying to make a DIV layout with this:

http://img13.imageshack.us/img13/4500/nstdivlayoutx.png

[Mikeplyts]

^That goes in your I'd Like To Meet section or any other section really.

[RealArtDesigns]

this is a joke...

i knwo alitle of css but i dont know how to

make a link with it :S

i have saw msypace with only 1 image adn they just modify it with css and put the links with it

so i want the code for the links if someone can do it or explain it!

[Mikeplyts]

^ are you talking about this?

Defining the a tag in the CSS first:

CODE

a:link, a:link font, a:active, a:active font, a:visited, a:visited font, a.navbar:link, a.navbar:active, a.navbar:visited, a.redlink:link, a.redlink:active, a.redlink:visited {font-family:arial; font-size:12px; color:000000; text-transform:none; text-decoration:none;}
a:hover {font-family:arial; font-size:12px; color:FFFFFFF; text-transform:none; text-decoration:none;}

(Alter those properties.)

Then, this in your About Me:

CODE

<a href="URL">Text</a>

With URL being the url to the page you want the link to take someone to.

[RealArtDesigns]

yeah but can you make a link with CSS?

i knwo the rollovers

but i want ot know if i cant

becuase u have saw a lot of myspace's
with it...

[Mikeplyts]

Can you give an example or a link?

[choochookitty]

Hi.
I feel kinda stupid for posting this, but I need to ask some questions.

First, this is the layout I'm trying to code.
http://s758.photobucket.com/albums/xx227/H...t=First_DIV.jpg

Okay, I need lighter text for the body and idk how to do that.
Also, how do I activate the links I've set up?

[choochookitty]

Also, thanks for any help!

[mychael]

PROFILE 1.0 IS OFFICIALLY GONE.....CAN DIV OVERLAY STILL BE USED WITH PROFILE EDITOR 2.0? just create a new myspace page and follow through with all the steps:
create blogs
customize profile
go back to profile 1.0
only option available is: "start from scratch"

profile editor 1.0 is history....
is there any help out there?

[xxxx]

First of all, thank you so much for this tutorial.
It was basic and extremely helpful.
I have finally started being able to see through the
confusing div coding.

Now my problem is that I've made a super simple layout in GIMP and uploaded it
on ImageShack. When I put the url code in for the background, my layout does not appear.
I would really appreciate some help asap.
Thanks :)

Links :

Layout : http://img44.imageshack.us/img44/9679/mysp...ckgroundxbw.jpg

Myspace : http://www.myspace.com/adelheidesjmaylormissy

[SunshineSpine]

Okay, so I was trying to make the links for each thing on my myspace like photos, add, comment, message and I copy/pasted the div code for that each time and changed it to have the tiny pic of my link and the actual link. Only the last one I dis would show up so now my photos is the only thing that will work. Also, I put my music player on there and whenever you click it, it go to the last one I did as well, so you push pause and it goes to my photos.

myspace.com/iheartsquidkid

[karmakiller]

^ Are you referring to this div?

CODE

<div class="photos" style="position:absolute;
top:805px;
left:772px;
overflow:auto;width:462;height:624;
color:000000;
font-size:9pt;
font-weight:bold;
font-family:ariel;
text-align:center;
background-color:Transparent;
background-image: http://i37.tinypic.com/24p9ys7.jpg;
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">

<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=446313018">
<img src="http://i37.tinypic.com/24p9ys7.jpg" width="155" height="55" />



</div>

Your links aren't closed. Rewrite your linked images as:

CODE

<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=446313018">
<img src="http://i37.tinypic.com/24p9ys7.jpg" width="155" height="55"></a>

And repeat that for each link, changing the URL and image URL.

[iPityForiPodRIPJ...]

Please Help!
Okay, I've managed to hide my profile and get a background div up,
But I can't get my content to appear.

Here's my profile.

About Me:

CODE

<style>
body {
background-color: 000000;
}

table table div form {display:inline !important;}
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table div div{visibility:hidden;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
body div div form {display:none !important;}div div div select {position:absolute !important; margin-left:-1000px !important; left:0px !important; display:none !important; }div div table div {display:none;} div div table div {display:none;} div form, .mslogo, div ul {display:none!important;}
div div, div td {background-color:transparent; background-image:none!important;}
div.profileWidth {margin-top: -30px !important;}div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}div.profileWidth div.clearfix, i i i,
div.profileWidth div div {filter:none; opacity:0.9999}div.profileWidth div.clearfix {position:relative; top:30px}
div div select, div div form {display:none !important;}div div table div {display:none;} .clearfix table div div {display:block;}
.profile, div ul {display:none !important;}
</style>

<div class="bg" style="position: absolute; left:-50px; top:110px; width:820px; height:964px; overflow: hidden;">
<img src="http://img32.imageshack.us/img32/3177/layoutbackground.jpg" />
</div>

Who I'd Like To Meet:

CODE

<style>
.content1 {
background: transparent;
width: 350px;
height: 320px;
position: absolute;
z-index:1;
overflow: auto;
top: 155px;
left: 50%;
margin-left: +60px;
font: 10px tahoma;
line-height: 15px;
color: ffffff;
text-align:center;
}
</div>
<div class="content1">

Hello, :), My name is Jake, <br />
I live in a small, boring town known as Hamlet.<br />
(Name says it all) I do not currently go to school, <br />
and will not until January. <br />
I like drawing, and playing guitar and piano. <br />
My birthday is April 14. I work on bikes, and ride them a lot.
<br />I am currently on probation for stupid reasons. <br />I like cheesecake, and I stick with old school Nintendo(Not the Wii!)
<br />I make money online, it's fun and easy.
<br />I am "good" at photoshopping, and I am also smart in HTML, CSS, and pHp. <br />
I code my own layouts. If you'd like an image edited, or a custom layout, just ask. :)
</div></style>

[SunshineSpine]

^ Are you referring to this div?

CODE

<div class="photos" style="position:absolute;
top:805px;
left:772px;
overflow:auto;width:462;height:624;
color:000000;
font-size:9pt;
font-weight:bold;
font-family:ariel;
text-align:center;
background-color:Transparent;
background-image: http://i37.tinypic.com/24p9ys7.jpg;
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">

<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=446313018">
<img src="http://i37.tinypic.com/24p9ys7.jpg" width="155" height="55" />
</div>

Your links aren't closed. Rewrite your linked images as:

CODE

<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=446313018">
<img src="http://i37.tinypic.com/24p9ys7.jpg" width="155" height="55"></a>

And repeat that for each link, changing the URL and image URL.

Okay, so I changed those and the music player stopped linking to the photos.
However the other links, other than photos, do not work.
I don't know what to doooooo.
D:

&&Thank you so much for the help.

[laydieeh]

How Do You Take Off Scroll Bars They Show Up In Firefox.
Please Help !.
http://www.myspace.com/laydieehlouis

CODE

<style>Body{background-color:000000;}</style>


</font></font><style>
div div table div {display:none;} .clearfix table div div {display:block;}
tr td div, div td, div tr, div table {background-color:transparent !important;}
.profile, div ul {display:none !important; }</style>







<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>






<style>
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,div,p,xmp,table,tr,td,th{
background-color:http://i31.tinypic.com/2db5hg4.jpg;
scrollbar-arrow-color:000000;
scrollbar-track-color:000000;
scrollbar-shadow-color:CCFFFF;
scrollbar-face-color:CCFFFF;
scrollbar-highlight-color:CCFFFF;
scrollbar-darkshadow-color:CCFFFF;
scrollbar-3dlight-color:CCFFFF;
font-family:tahoma;
font-size:8pt;
color:CCFFFF;
border:none;}

input, select, textarea, .textfield, .button {
font-family:tahoma;
font-size:8pt;
color:FFFFFF;
border: 0px dashed FFFFFF;
background-color:transparent;
text-align:center;}

{ TEXT DEFAULTS }
{class for the basic font for the page}
.text {
font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-align:justify;}

b,i,strong,em,u,s {
font-family:tahoma; font-size:8pt;color:FFFF00;font-weight:normal;cursor:help;}

{style for the number of friends you have.}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;border:0px solid FFFFFF; }

{repeat of the style for how many comments you have}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF; border:0px solid FFFFFF;}

{"Blurbs", "About Me", "Who I’d like to Meet", "Friend Space", and "Friend’s Comments" style}
.orangetext15{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000; border:0px solid FFFFFF;text-decoration:underline;}

{"General", "Music", "Movies", "Television", "Books", "Heros", "Status", "Here for", "Hometown", "Body Type", "Ethnicity", "Religion", "Sign", "Smoke/Drink", "Children", "Education", "Occupation", and "Income" title style}
.lightbluetext8{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000;border:0px solid FFFFFF;text-align:right;}

{"In your extended network" style}
.blacktext12{font-family:courier new; font-size:16px; color:FFFF00; font-weight:bold;text-decoration: underline; text-transform:uppercase;}

{"Contacting", "Interests", "Details", and "Schools" title styling}
.whitetext12{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration: underline; border:0px solid CCFFFF; text-transform:uppercase;}

{Stylizing of your name above your picture; appears you can’t change the color of your name from here. Suggestions?}
.nametext{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration:underline;border:none;text-transform:uppercase;}

{date stamp on comments}
.blacktext10{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;border:0px solid FFFFFF;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a, a:link,a:active,a:visited{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-decoration:none}
a:hover{border-bottom:1px dashed FFFFFF; font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;}

{not used on profile}
a.readmail,a.readmail:link,a.readmail:active,a.readmail:visited{font-family:tahoma; font-size:8pt; line-height:10pt; text-decoration:none;color: CCFFFF;}
a.readmail:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF; }

{ "View all friends" and "invite more" link style}
a.redlink,a.redlink:link,a.redlink:active,a.redlink:visited{font-family:tahoma; font-size:8pt;font-weight:bold;color:FFFFFF;text-decoration:none}
a.redlink:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:tahoma; font-size:8pt;color:FFFFFF;text-decoration:none}
a.navbar:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00; border-bottom:1px dashed FFFFFF;}

{ TEXT FORMATTING
DEFAULT FONT, SIZE 8, BLACK }
{ btext used for "latest blog entry" and "USERNAME has * friends"}
.btext, .itext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border:0px solid FFFFFF;}

{ DEFAULT FONT, SIZE 8, COLORS }
{unused on profile}
.bwtext, .rtext, .rbtext, .subhead{font-family:tahoma; color:FFFF00;font-size:8pt;font-weight:bold;}

{ DEFAULT FONT, SIZE 8 }
{unused on profile}
.stext, .sbtext, .swtext{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ DEFAULT FONT, SIZE 11 }
{unused on profile}
.head11, .text11{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ TABLE COLORS }
{apparently unused?}
table.grey, tr.grey, td.grey{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.white, tr.white, td.white{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_light, tr.accent_light,
td.accent_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_dark, tr.accent_dark,
td.accent_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.action, tr.action, td.action{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF; }
table.blue_light, tr.blue_light,
td.blue_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.blue_dark, tr.blue_dark, td.blue_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}


{"Help" and "Signout" in very top in right corner}
a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:FFFFFF; text-decoration:none;}
a:hover{font-family:tahoma;
font-size:8pt;color:FFFF00; text-decoration:none;border-bottom:1px dashed FFFFFF;}
</style>




<div class="bg" style="position: absolute; left:150px; top:170px; width:1000px; height:674px; overflow: hidden;">
<img src="http://img4.imageshack.us/img4/7881/haaaa.png" />
</div>








<div class="content" style="position: absolute; left:990px; top:216px; width:106px; height:43px; overflow: auto;"><center>
<img src="http://i30.tinypic.com/1236vjr.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Home" coords="1,4 106,41, 1,40 106,2" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />

</map>
</div>




<div class="content" style="position: absolute; left:1010px; top:260px; width:105px; height:46px; overflow: auto;"><center>
<img src="http://i28.tinypic.com/29qi7np.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Mssq" coords="4,4 103,44, 100,1 3,44" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuY29t
G9zZVYz" />

</map>
</div>





<div class="content" style="position: absolute; left:990px; top:310px; width:77px; height:42px; overflow: auto;"><center>
<img src="http://i27.tinypic.com/1zxtyxd.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Add" coords="1,0 75,40, 75,1 2,38" href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0xNjM5MjUwODc=" />

</map>
</div>



<div class="content" style="position: absolute; left:1020px; top:360px; width:101px; height:42px; overflow: auto;"><center>
<img src="http://i28.tinypic.com/5kpv2h.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Kmmt" coords="1,0 98,39, 99,1 2,39" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTE2MzkyNTA4Nw==" />

</map>
</div>



<div class="content" style="position: absolute; left:980px; top:405px; width:143px; height:41px; overflow: auto;"><center>
<img src="http://i32.tinypic.com/1zdbu6q.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Picktureesz" coords="1,1 141,39, 141,3 2,37" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=163925087&albumId=1891179" />

</map>
</div>


<div class="content" style="position: absolute; left:970px; top:570px; width:147px; height:238px; overflow: auto;"><center>
<center><p style="visibility:visible;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="190" width="135" style="visibility:visible;width:135px;height:190px;" border="0">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://assets.myflashfetish.com/swf/mp3/mff-bear.swf?myid=27731947&path=2009/08/19" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="flashvars" value="mycolor=f78f9d&mycolor2=aa77e0&mycolor3=00CCFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false" />
<param name="salign" value="TL" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://assets.myflashfetish.com/swf/mp3/mff-bear.swf?myid=27731947&path=2009/08/19" height="190" width="135" style="visibility:visible;width:135px;height:190px;" border="0" wmode="transparent" quality="high" flashvars="mycolor=f78f9d&mycolor2=aa77e0&mycolor3=00CCFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false" salign="TL" />
</object><br /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1peHBvZC5jb20vcGxheWxpc3QvMjc3MzE5NDc=" target="_blank">
</div>







<div class="content" style="position: absolute; left:520px; top:248px; width:422px; height:204px; overflow: auto;"><center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="204" width="422">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/50cnpCV3jJ8&hl=en&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/50cnpCV3jJ8&hl=en&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f" height="204" width="422" wmode="transparent" />
</object>
</div>

[IVIike]

you can set your overflow to visable

CODE

overflow: visable;

b/c the transparent scroll bar will not work in firefox.