Log In · Register

 

Help Topic Rules and Requirements


For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Hosts Looking for Hostees | Hostees looking for Hosts | Big Book of Resources

Submission Guidelines

6 Pages V  < 1 2 3 4 > »   
Reply to this topicStart new topic
Making a DIV Overlay Layout, Step by step
*Insurmountable*
post Sep 16 2007, 10:45 AM
Post #26





Guest






^Yea I've been meaning to really update this tutorial maybe i'll get to it in the future.

How To Image Map with Divs


Ah heres the full version, you need to go to the link below and read that as well:
*Most of this is for if you have photoshop, if you don't have photoshop tell me and i'll re-write a bit of this to help you
Ello again _smile.gif

Alright these are called Image maps.
Need an Example? Look at this layout as an example _smile.gif
http://www.createblog.com/layouts/preview.php?id=20372
*they do look like normal links, although their part of the image _smile.gif

When I first started using image maps I used this tutorial:
http://www.myspaceprodesigns.com/tutorial/map/

Make sure to use server side for myspace.

If you don't understand it then I'll be more than happy to explain how to use image maps throughly.
If you do have any questions read over this: I wrote this for another person with the same question as you _smile.gif

Ello, since i'm currently talking to you on aim about this and i can't send coding through aim I'll post it here for you _smile.gif
This is your actual image maps, remember those coords you needed to get that I said was going to be wayyy easier using photoshop for? Well here is where you'll put them in. _smile.gif As you can see for a rectangle the points are like this when image mapping:

Now pretend like there is an imaginary rectangle around each link on your image: http://i7.tinypic.com/6aitczq.gif
Now take the little point and go over the top left corner, you'll get two coords that look like this in photoshop:

The x is your x1
and the y is your y1.
Now go to the bottom right corner of your imaginary rectangle that these two points will be your x2 and y2.
Now do this step over and over for each link _smile.gif

In the code below it should be pretty easy to figure out that you now know which coord is which. Just go in the code below and fill out each one of these:

Each is going to be different for each link.
LOCATION- You can keep track of which link is which by writing "Home" or "Message" or any of your other link names.
x1,y1,x2,y2 - Well I hope you know what to write in the place of those tongue.gif
LINK- This is where you place the actual link for each one of these.

CODE
<div class="navigation">

<img src="http://i7.tinypic.com/6aitczq.gif" width="448" height="465" border="0" alt="" usemap="#navibar_Map">
<map name="navibar_Map">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK">
</map>
</div>


Your almost done:
All of this is in a div, which I'm sure you know what that is. All you need to do is position this div right where your existing links are. So pretty much your overlaying a image over your existing image but this div has all your links in it _smile.gif

CODE
.navigation {
    width:450px;
    height:470px;
    overflow-x:hidden;
    position:absolute; z-index:2;
    background-color:transparent;
    border:0px solid;
    border-color:white;
    margin-left:255px;
    margin-top:458px;
    text-align:justify;
    visibility:visible;
}


Just fill this out like you would any other div and put it with your other divs _smile.gif
Any other questions or concerns feel free to post them in here
 
Insurmountable
post Oct 20 2007, 09:27 PM
Post #27


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923



^Did you look at the first post on this page?

Just use those codes and when your done writing it just add it in to your coding.
 
Fantaspic
post Oct 28 2007, 09:08 PM
Post #28


Newbie
*

Group: Member
Posts: 7
Joined: Oct 2007
Member No: 584,706



Oh, is it? I'll take it off private then. And I just need help making the nav bars/basics/credit.
 
TamaCalix
post Feb 28 2008, 10:59 PM
Post #29


Member
**

Group: Member
Posts: 11
Joined: Feb 2008
Member No: 625,874



Hey, I cant seem to get my bands music player to work with my DIV LAYOUT... Is there a way to fix this?


HERES WHATS IN THE BAND BIO:


CODE
<style type="text/css">
body {background-color:000000; background-image:url(http://img214.imageshack.us/img214/9874/bk6ni3.gif); background-repeat:repeat-y; background-position:center center; background-attachment:scroll; scrollbar-arrow-color: 6C6028; scrollbar-track-color: 0e0e0e; scrollbar-shadow-color: 0F0400; scrollbar-face-color:1E0B04; scrollbar-highlight-color:3C210C; scrollbar-darkshadow-color:000000; scrollbar-3dlight-color:000000;}
img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable, .jazz, .text, td.text td.text table, .contactTable, .lightbluetext8 { display:none; }
.jazzy img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .jazz a { visibility:hidden; }
marquee { visibility:visible !important; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
table table, table table td {padding:0px; height:0px;}
table.navigationbar {display:none!important;}
b {color:3F230D; font-weight:bold; font: 13px arial;} i, s {color:6C6028;} u {color:becccc;font-weight:bold;}
.main a:link, .main a:visited,
.main a:active {color:DFC08B!important; font-family:arial 9px;}
.main a:hover {color:FFC45F!important; text-decoration:none!important;}

table table div embed, table table div object{display: block; position:relative; left:50%; top:0%; top:680px; _top:670px; left:291px; _left:306px; width:210px; height:37px; visibility:visible!important; z-index:9;}

select {position:relative !important; top:-1000px;}
td td td select {position:static !important;}
div table div form {display:none !important}
.bodyContent table table div form {display:inline !important;}

.lounge{height: 25px; width: 210px; overflow: hidden; background: url(http://img526.imageshack.us/img526/3696/loungeuq1.png) bottom left no-repeat; display: block;}
.lounge:hover{background-position: top left;}
.note{height: 25px; width: 210px; overflow: hidden; background: url(http://img521.imageshack.us/img521/6562/notezu5.png) bottom left no-repeat; display: block;}
.note:hover{background-position: top left;}
.add{height: 25px; width: 210px; overflow: hidden; background: url(http://img520.imageshack.us/img520/8337/addtq4.png) bottom left no-repeat; display: block;}
.add:hover{background-position: top left;}
.forward{height: 25px; width: 210px; overflow: hidden; background: url(http://img526.imageshack.us/img526/336/forwardna8.png) bottom left no-repeat; display: block;}
.forward:hover{background-position: top left;}
.photos{height: 25px; width: 210px; overflow: hidden; background: url(http://img520.imageshack.us/img520/4458/photosgh9.png) bottom left no-repeat; display: block;}
.photos:hover{background-position: top left;}
.fav{height: 25px; width: 210px; overflow: hidden; background: url(http://i125.photobucket.com/albums/p46/TamaCalixte/favit8copy.png) bottom left no-repeat; display: block;}
.fav:hover{background-position: top left;}
.kats{height: 25px; width: 210px; overflow: hidden; background: url(http://img211.imageshack.us/img211/4691/katssj9.png) bottom left no-repeat; display: block;}
.kats:hover{background-position: top left;}
.shouts{height: 25px; width: 210px; overflow: hidden; background: url(http://img403.imageshack.us/img403/2179/shoutsdr0.png) bottom left no-repeat; display: block;}
.shouts:hover{background-position: top left;}
.block{height: 25px; width: 210px; overflow: hidden; background: url(http://img263.imageshack.us/img263/6634/blockxo7.png) bottom left no-repeat; display: block;}
.block:hover{background-position: top left;}
.crash{height: 25px; width: 210px; overflow: hidden; background: url(http://img140.imageshack.us/img140/2245/crashqb7.png) bottom left no-repeat; display: block;}
.crash:hover{background-position: top left;}

.links {position:absolute; left:50%; top:0%; top:555px; margin-left:200px; z-index:7; visibility:visible!important; overflow:auto; overflow-x:hidden; width:auto; height:200px;}
.links a:link, .links a:visited,
.links a:active {
display: block;
width: 197px; _width: 198px; padding-left: 3px;
font-weight: normal; font: 13px arial;
color: 6C6028;
text-decoration: none;
border: 1px solid;
border-color: 5F3B1D;
border-width: 0 0 1px 0;}
.links a:hover {
text-decoration: none; font: 13px arial; color: 5F3B1D;
display: block; width: 197px; _width: 198px;
background-color: 0E0E0E; border-color: 0E0E0E;}

.myCommentFormD {position:absolute; left:50%; top:0%; top:799px; margin-left:-280px; z-index:8; visibility:visible!important; text-align:left!important;}
textarea.myFormBox {width:350px; height:80px; font:10px arial; font-weight: bold; color:6C6028; letter-spacing:3px;
background-color:0E0E0E;
border:1px solid; border-color:3C210C;!important}
input.submit {height: 32px; width: 87px; overflow: hidden; background: url(http://img263.imageshack.us/img263/1563/postqd0.png) bottom left no-repeat; border:0px!important;}
input.submit:hover{background-position: top left; cursor: pointer!important; border:0px!important;}

.title {
color: 6C6028;
font: 18px arial;
font-weight: normal;
letter-spacing: 6px;
padding: 0px;
background-color: transparent;
background-image: url('http://img211.imageshack.us/img211/7654/titlebg3beq3.png'); background-position: bottom left; background-repeat:no-repeat;
text-align:left;
display: block;}
.main, .main p {color:666666!important;
font: 10px arial;
letter-spacing:2px;
text-align:justify;}
.main {width:400px; height:230px;
position:absolute; z-index:3; left:50%; top:0%;
margin-left:-280px; margin-top:540px; visibility:visible; overflow:auto;}
.side1 {
background-image:url(http://img522.imageshack.us/img522/9483/side1dlj0.png); background-repeat:repeat; background-color:121212;
width:45px; height:90px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-402px; margin-top:0px;
visibility:visible; border: 2px solid;
border-color: 0e0e0e;
border-width: 0 0 0 2px;}
.side2 {
background-image:url(http://img523.imageshack.us/img523/6889/side2dls8.png); background-repeat:repeat; background-color:121212;
width:45px; height:90px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:355px; margin-top:0px;
visibility:visible; border: 2px solid;
border-color: 0e0e0e;
border-width: 0 2px 0 0;}
.layout {
background-image:url(http://i125.photobucket.com/albums/p46/TamaCalixte/minjazyu2334copy.png); background-repeat: no-repeat; background-color:121212;
width:800px; _width:802px; height:860px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-402px; margin-top:90px; text-align:justify;
visibility:visible; border: 2px solid;
border-color: 0e0e0e;
border-width: 0 2px 0 2px;}

marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.jazzy div, .jazzy div font, .jazzy div a, .jazzy div div, .jazzy font a, .jazzy span, .jazzy div table a, .jazzy div table img, .jazzy div table font, .jazzy div table, .jazzy div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
</style>
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>


HERE'S WHATS IN THE MEMBERS:

</td></tr></table></td></tr></table></td></tr></table></div> <div class="jazzy"> <div class="main"> <span class="title">Welcome</span> <br> Thank you for visiting Michael Turner<br> Lewis's music page. If you would like to leave<br> a comment, simply type it in the space<br> provided below. Please don't forget to take a look<br> at our bottom navigation system. <br> <br> <span class="title">About Me</span> <br> Born to inspire and maintain upward movement in <br> myself, family, community and Nation. I am not my <br> age, nor my stats, these can be fictitious appearances <br> of truth. Some of us prefer that kind of reality and I <br> understand and respect that because I too sometimes <br> prefer the illusion. For now, I ask that you find out <br> "About me" through my message of music.<br> <br> </div> <div class="links"> <a href="http://www.myspace.com/x_clusivedesigns">Layout by X-Clusive Designs</a> </div> <div class="myCommentFormD"> <form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"> <input name="friendID" value="318261166" type="hidden"/> <textarea name="f_comments" class="myFormBox"></textarea> <p align="center"> <input type="submit" value="" class="submit"></p> </form> </div> <div class="side1"></div><div class="side2"></div> <div class="layout"> <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=318261166" class="add" border=0 style="position:absolute; top:215px; margin-left:580px;"></a> <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=318261166" class="photos" border=0 style="position:absolute; top:245px; margin-left:580px;"></a> <a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=318261166" class="note" border=0 style="position:absolute; top:275px; margin-left:580px;"></a> <a href="http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&friendID=318261166" class="fav" border=0 style="position:absolute; top:305px; margin-left:580px;"></a> <a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.forward&friendID=318261166&f=forwardprofile" class="forward" border=0 style="position:absolute; top:335px; margin-left:580px;"></a> <a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=318261166" class="block" border=0 style="position:absolute; top:365px; margin-left:580px;"></a> <a href="http://home.myspace.com/index.cfm?fuseaction=user" class="lounge" border=0 style="position:absolute; top:679px; margin-left:590px;"></a> <a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=318261166" class="kats" border=0 style="position:absolute; top:707px; margin-left:590px;"></a> <a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=318261166" class="shouts" border=0 style="position:absolute; top:735px; margin-left:590px;"></a> </div> </div> <div class="jazz"><table><tr><td><table><tr><td><table><tr><td>
 
Insurmountable
post Feb 28 2008, 11:36 PM
Post #30


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923



Major clean out


If your posting your layout code, please make sure to post in within a codebox so it doesn't stretch out the page. If fail to do so, we will delete your posts.
 
casaundradonald
post Mar 2 2008, 06:16 PM
Post #31


Newbie
*

Group: Member
Posts: 3
Joined: Mar 2008
Member No: 626,790



Hello!

I have a question!
I have been making divs for a longggg time, but today was the first time I used a background behind the div, and now when I put the sections into the div, it takes out the div pic and goes to the background....

the link is: http://profile.myspace.com/index.cfm?fusea...endid=346999615

Thank you sooo much!
 
Insurmountable
post Mar 3 2008, 08:15 AM
Post #32


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923



QUOTE(casaundradonald @ Mar 2 2008, 06:16 PM) *
Hello!

I have a question!
I have been making divs for a longggg time, but today was the first time I used a background behind the div, and now when I put the sections into the div, it takes out the div pic and goes to the background....

the link is: http://profile.myspace.com/index.cfm?fusea...endid=346999615

Thank you sooo much!



I'm not seeing the problem, there aren't any divs. It looks like all you've done so far with your layout is just throw the background for the whole div layout up there is all.


EDIT: Nevermind, your layout looks completely different in Internet Explorer, could you please post your codes within code boxes and I'll look over your coding.
 
casaundradonald
post Mar 4 2008, 04:27 PM
Post #33


Newbie
*

Group: Member
Posts: 3
Joined: Mar 2008
Member No: 626,790



I hope I am doing this right....

CODE

<style type="text/css">
.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;}
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{

body {background-color:1f5079;background-image: url("http://i26.tinypic.com/3354bnr.jpg");background-position: top left;background-repeat: repeat;background-attachment: fixed;}

background-color:transparent;
scrollbar-arrow-color:fb4c6b;
scrollbar-track-color:fb4c6b;
scrollbar-shadow-color:fb4c6b;
scrollbar-face-color:fb4c6b;
scrollbar-highlight-color:fb4c6b;
scrollbar-darkshadow-color:fb4c6b;
scrollbar-3dlight-color:fb4c6b;
font-family:tahoma;
font-size:8pt;
color:white;
border:white;}

input, select, textarea, .textfield, .button {
font-family:tahoma;
font-size:8pt;
color:FFFFFF;
border: 1px 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>


<style type="text/css">
b, strong {background-color: dda387;
color: white;
font-family:Georgia;
font-size:8pt;
letter-spacing:1pt;
font-weight:bold; }
i,em{
background-color:transparent;
color:7e6657;
font-family:Georgia;
font-size:8pt;
letter-spacing:0pt;
font-weight:normal; }
u{
background-color: transparent;
color:7e6657;
font-family:Georgia;
font-size:8pt;
letter-spacing:1pt;
font-weight:normal; }

</style>

<style>
body table td div form {display:none !important;}
</style>

<style>div table div div select {position:absolute !important; top:-200px !important; left:0px !important; }</style>


<div class="bg" style="position: absolute; left:180px; top:150px; width:800px; height:600px; overflow: hidden;">
<img src="http://i32.tinypic.com/15z59o7.jpg">
</div>




<div class="content" style="position: absolute; background-color:transparent; left:180px; top:150px; width:800px; height:600px; overflow: auto;"><center>
<html>
<html>
<head>
<title>numbaaatwo</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="http://i32.tinypic.com/15z59o7.jpg" width="800" height="600" border="0" alt="" usemap="#numbaaatwo_Map">
<map name="numbaaatwo_Map">
<area shape="rect" alt="Click for Everything!!" coords="459,417,788,582" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zNTQzOTAwNTgmTXl0
2tlbj0yQ0I0RTM4OS0wNDRDLTQ4RTItOTRGQzI1OUU5OTNBMzE1MDE4NDAwNzA=" target="_self">
<area shape="rect" alt="My site Pets!" coords="42,535,150,565" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMzQzODQ1ODUmTXl0
2tlbj00RTFEMUVFNi1BNzkyLTRFOUEtOTFCOEM4Q0YwNUQ2RjFDNTQ3NTA4NjIy" target="_self">
<area shape="rect" alt="Popular's Signs!" coords="32,494,119,527" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Must Read!!" coords="32,439,118,479" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMTIwNzkzNDAmTXl0
2tlbj0wNDI0MDY2OS02MTZFLTQ4OTktODc4NEZGN0E1RjNEODJFQzI1ODE2NDgz" target="_self">
<area shape="rect" alt="SFS?" coords="42,403,108,431" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMzQzODUzMjQmTXl0
2tlbj1COENFRjU3My04Njc2LTQxOUUtOEQ1REFGMTY5ODA5REYyQzY0MTY3MDU=" target="_self">
<area shape="rect" alt="Delete :(" coords="42,354,119,390" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmNvbmZpcm1kZWxldGVmcmllbmQmZnJpZW5kSUQ9MjExMTg3NjM5" target="_self">
<area shape="rect" alt="Comment Popular!" coords="23,304,141,328" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTIxMTE4NzYzOSZN
VRva2VuPTdhOTJjOGJiLWUyNjQtNGJlOC1hZjlmLWU4OTMyYTEwMTI5" target="_self">
<area shape="rect" alt="Message Popular!" coords="42,265,120,294" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Add Popular!" coords="42,216,109,253" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRpZD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Home" coords="23,167,142,208" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" target="_self">
</map>

</body>
</html>
</div>



<div class="content" style="position: absolute; left:260px; top:260px; width:150px; height:150px; overflow: auto;"><center>

grr
</div>
 
Bit me
post Mar 5 2008, 09:38 PM
Post #34


Be Strong!
***

Group: Member
Posts: 73
Joined: Apr 2007
Member No: 517,185



hi! can u guys post tutorial on how to make div like this..? u know when u hover over the links like add or comment..etc it change to different style, that's really cool, if u dont understand u can check it out..please help me.. CLICK!
 
hezmilullaby
post Mar 6 2008, 09:30 PM
Post #35


Newbie
*

Group: Member
Posts: 3
Joined: Mar 2008
Member No: 628,011



i got 1 question
where do u post all the links like in ur acctual myspace profile or wat??
 
whoahitznikki
post Mar 6 2008, 10:29 PM
Post #36


Senior Member
****

Group: Member
Posts: 207
Joined: Aug 2007
Member No: 559,093



is there an easy and accurate way to estimate the amount of pixels you need to insert in the margins? or is it guess and check?
 
casaundradonald
post Mar 11 2008, 07:24 PM
Post #37


Newbie
*

Group: Member
Posts: 3
Joined: Mar 2008
Member No: 626,790



QUOTE(casaundradonald @ Mar 2 2008, 07:16 PM) *
Hello!

I have a question!
I have been making divs for a longggg time, but today was the first time I used a background behind the div, and now when I put the sections into the div, it takes out the div pic and goes to the background....

the link is: http://profile.myspace.com/index.cfm?fusea...endid=346999615

Thank you sooo much!



Can someone please help me figure this out, my coding is below this post!
I have tired making a different div, but the same thing happened!
:[[[

Please helppppp!
 
pearlescentskybl...
post Mar 12 2008, 08:40 PM
Post #38


Newbie
*

Group: Member
Posts: 8
Joined: Dec 2006
Member No: 488,335



How would you add a comment box?
I know how I could add the comment link, but adding a comment box feels like a completely different thing.
 
Insurmountable
post Mar 12 2008, 08:56 PM
Post #39


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923



^well you can get codes for comment boxes here:
http://www.createblog.com/scripts/index.ph...g=comment%20box
 
xPeace
post Mar 14 2008, 10:23 PM
Post #40


Newbie
*

Group: Member
Posts: 1
Joined: Nov 2007
Member No: 586,542



I'm trying to get the code down for this layout I'm doing but when i put a certain code, in the other part doesn't show.
For example for the baout me part i would put:

.layout{
postition: absolute;
top:165px:
ect.

Then at the I'd like to meet part, i would put <div class="layout">

I have two different section things, one for my content, and one for my layout but for the i'd like to meet part, when i put, for example the layout code first, the contents dont show unless i put that before the layout code and if i do that the layout doesn't show.

X____X this is really frusturating...T_T please help


here's the code of you need it

ABout Me part:


CODE
<style type="text/css">
.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:1000px;height:800px;
background-color:transparent;
position:absolut;
top:160px;





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;}
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 type="text/css">
.contactTable {display: none;}


.layout{
position: absolute;
top:165px;
left:45%;
margin-left:-400px;
width:900px;
height:700px;
z-index:0;
padding:0px;
border:0px solid black;
background-color:FE0000;
background-image:url("http://i168.photobucket.com/albums/
u194/Rosiegrlx/Untitled-1copy.jpg")
}










body {
background-color: FE0000;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FE0000;
scrollbar-track-color: FE0000;
scrollbar-shadow-color: FE0000;
scrollbar-face-color:FE0000;
scrollbar-highlight-color:FE0000;
scrollbar-darkshadow-color:FE0000;
scrollbar-3dlight-color:FE0000;}






</style>





<style type="text/css">
.div1{
position: absolute;
top: 165px;
left:45%;
width:900px;
height:700px;
z-index:3;
padding:0;
border: 1px solid black;
background-color: transparent;
}

</style>











I'd Like to meet

CODE
<div class="layout">
<div class="div1">



Nevermind I figured it out
 
cristinadoc84
post Mar 18 2008, 01:12 AM
Post #41


Newbie
*

Group: Member
Posts: 1
Joined: Mar 2008
Member No: 631,802



guyz, please help me with my div layout

mspace.com/ilovetibo

it doesn't work at all..
 
SelahStar
post Mar 22 2008, 03:59 PM
Post #42


Newbie
*

Group: Member
Posts: 1
Joined: Jan 2008
Member No: 616,492



Thank You for this it helped me alot!!!
 
MiseryChild
post Apr 21 2008, 04:52 PM
Post #43


Newbie
*

Group: Member
Posts: 2
Joined: Feb 2008
Member No: 621,556



I'M SO FRUSTRATED!:XD:
I have my navi and my bg and main image up where I want it but the different sections in my div aren't working [lyk where you put your about me and stuuf] its just and box with an outlined color and i cant get it to work.

CAN SOMEONE PLEASE TELL ME WHAT I'M DOING WRONG BECAUSE ITS SO FRUSTRATING!?????!! rolleyes.gif tongue.gif pinch.gif [font="Arial"][/font]
 
MoonlightOrigina...
post Apr 21 2008, 10:27 PM
Post #44


Newbie
*

Group: Member
Posts: 1
Joined: Mar 2008
Member No: 633,620



_unsure.gif stubborn.gif mellow.gif
How do u start to make it like post a thing to make a new layout?
 
MiseryChild
post Apr 22 2008, 05:44 PM
Post #45


Newbie
*

Group: Member
Posts: 2
Joined: Feb 2008
Member No: 621,556



the link for my testing site is "www.myspace.com/blaq_silver_vampire"
its kind of my back up account for testing stuff out.
 
xXDarkTemariXx
post Apr 24 2008, 03:20 PM
Post #46


Newbie
*

Group: Member
Posts: 1
Joined: Apr 2008
Member No: 641,509



OMG! I GOT THE LAYOUT ON THE PAGE. biggrin.gif thumbsup.gif

I'm sooooooooooooooooooo new to this. _smile.gif

But do i make a Div for the Navigation because i tried

<div class="navigation">

and it didn't work.
 
divinebovine
post Apr 25 2008, 01:43 PM
Post #47


Newbie
*

Group: Member
Posts: 4
Joined: Mar 2008
Member No: 633,914



you can call me a complete noob if you want but i dont understand :P
Ive copied the code from step 1 and pasted it into my about me, ive copied the stuff from step 2 into my about me and all i can see are a couple of boxes, ive uploaded my image and pasted it where is says paste url and nothings happened, someone care to give me a dummies guide to wtf im ment to do(complete dummy edition)?????
 
MissHollywood22
post Apr 26 2008, 06:57 PM
Post #48


Newbie
*

Group: Member
Posts: 8
Joined: Oct 2007
Member No: 584,227



Can someone help me? I made myself a div layout. I made the background and all and followed all these steps!! (I still have to do the colors and all, but that isn't that hard) The problem is. I uploaded my Main Div Image, and since I want to move to step 4 of this turtiol and make the other div, it won't show up at all. I think it is hidden under the main div image. What can I do to fix this? Thanks tongue.gif

by the way, my URL is: http://www.myspace.com/insane_design22
 
foxdanger
post Apr 27 2008, 11:51 PM
Post #49


Senior Member
***

Group: Member
Posts: 39
Joined: Apr 2008
Member No: 640,524



Can anyone help with one question:


In my Band Profile, how can i put the Player on a div?
 
nessag0titall
post May 20 2008, 01:10 PM
Post #50


Newbie
*

Group: Member
Posts: 1
Joined: May 2008
Member No: 649,374



hi... im lost, where in the code do i add the div codes???

im using this one to make a div overlay. is it the right one????

CODE
<style type=text/css>

body {
background-color: ######;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: ######; background-color: ######; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea
{font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{style for the number of comments you have. The actual ..}
.redtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}
.redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px;}

{”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:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}
.whitetext12{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”In your extended network” style}
.blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }
.nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}

{date stamp on comments}
.blacktext10{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}
a.redlink{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

</style>
Reason for edit: please just code boxes. thanks -nat
 

6 Pages V  < 1 2 3 4 > » 
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: