coding div layouts Options

[Sidekick_Animati...]

kinda new with divs.. need help coding a layout for myspace .. already have the boxes done out and everything on the layout jus need to code the layout ..

[freeflow]

http://www.createblog.com/forums/index.php?showtopic=142922

[Sidekick_Animati...]

thats the image i need to code .. i jus want to know how to code those boxes.. the smallest one for the comments n the biggest one for like an about me section .. the tutorial thingy u gave me jus covers some of the stuff .. i heard u can slice or map or something like that but idk .. a little confused.


EDIT: Changed Image ..

[*Infinite.*]

If you read the tutorial correctly, then you would know what to do:

1st: hide your profile, use one of the codes that will show the comments.
http://www.createblog.com/scripts/download.php?id=376

2nd: Position your image on to the layout:

CODE

<div class="bg" style="position: absolute; left:0px; top:120px; width:000px; height:000px; overflow: hidden;">
<img src="http://img402.imageshack.us/img402/9490/sneaks1copyqk4.png">
</div>

^You need to edit the width and height to the same as that image.

3rd: Make your layout, such as adding a background color and text colors, link colors, etc.

http://www.createblog.com/forums/index.php?showtopic=84325

Pick any of those and fill it out. 3rd one down explains what each part edits. Probably want to use the background stuff, and the normal text properties and the stuff for the comments since you want those to show.


One you have that, you can reply again for further help if you don't get what to do next.

[Sidekick_Animati...]

ok, i dont get what to do next. i finished what you told me. how do i code the boxes ? heres the new image. i want to code the top into links, and the boxes. (one box to post comments, one box to add a marquee of friends, and one box to add an about me sort of thing with a pic in the corner)

[freeflow]

To add all those things read the tutorial and what Holly told you thats how you do it. The marquee code is

CODE

<marquee>
<a href="urltoriend"><img src="urltofriendspicture"></a>
</marquee>

The comments in a div and comment box code are in scripts.


Just read the tutorial everything is answered in there.

Also please thumb your image.

CODE

[thumb] img url [/thumb]

[Sidekick_Animati...]

okay im almost done, but the last thing i need help with is coding where it says "home, view comments, etc"

[*Infinite.*]

So i'm gussing you want to do image mapping/slicing for that?

[Sidekick_Animati...]

yea, how do i image map that?

[*Infinite.*]

I don't really go about image mapping unless its highly nessacary, which I haven't come to that point yet so I guess if you really need help I could teach myself really fast which wouldn't take long more than likely.

But for now perhaps this will work:
http://www.myspaceprodesigns.com/tutorial/map/ or
http://www.siteexperts.com/forums/viewConv....asp?d_id=18409

[Sidekick_Animati...]

is slicing alot easier ? if so, how do i slice the "home, view comments, etc" ?

[Sidekick_Animati...]

can someone help me out? like walk me thru steps when slicing? i sliced the parts already n saved for web. where do i go from there?

[freeflow]

When you save make sure you are saving both html and files. If so you should get a folder with images and a html file. Upload all the images. And then open the html file. Then take the urls to the uploaded images and place them in the right spot in the code.

[Sidekick_Animati...]

can i get like a code so that i would just have to input the hosted images url .

[freeflow]

You can't. The code is different for each layout. When you slice it. Go to file > Save optimized as (if you use imageready , which I suggest) and make sure it says images and html .

Or do you not get slicing at all? You can always image map .

[Sidekick_Animati...]

probably i just dont get it. i've saved the files and everything, but idk. i tried to do imagemap it jus came out wrong. this is the code i made when doing the imagemap:

CODE

<div class="layoutmap">
<IMG SRC="http://img296.imageshack.us/img296/174/sewerlayoutcopyyi4.png" USEMAP="#sewer_Layout.jpg" WIDTH=900 HEIGHT=675 BORDER=0>
<MAP NAME="sewer_Layout.jpg">
<AREA SHAPE=RECT COORDS="97,63,176,97" HREF="http://home.myspace.com/index.cfm?fuseaction=user" ALT="Home">
<AREA SHAPE=RECT COORDS="199,58,399,79" HREF=" http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=63909291"&MyToken=3334265d-0094-4f5a-9c13-083dfdce2bb3" ALT="View Comments">
<AREA SHAPE=RECT COORDS="420,43,557,56" HREF="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=YOURFRIENDID" ALT="Message Me">
<AREA SHAPE=RECT COORDS="573,26,625,99" HREF="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=YOURFRIENDID" ALT="Add Me">
<AREA SHAPE=RECT COORDS="645,14,792,56" HREF="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=YOURFRIENDID" ALT="View More Pictures">
</MAP> </div>

but then when i put that in my myspace to preview with everything else, i jus got 2 backgrounds and it seemed messed up.

[Sidekick_Animati...]

CODE

<style type="text/css"> .hidethem {visibility:hidden; display:none;} </style>
<style type="text/css">.comments {visibility:hidden;display:none;}</style>
<style>div div table tr td a.navbar, div div table tr td font {display: none;}</style>
<style type="text/css">
body div div table td { display: none }
.navibar {display: none }
.navbar { display: none; }
div div table
tr td a.navbar, div div table tr td font {display: none;}
.hidethem {visibility:hidden; display:none;}
a.navbar{display: none;}  
a.navbar:link{display: none;}
a.navbar:active{display: none;}
a.navbar:visited{display: none;}
a.navbar:hover{display: none;}
</style>

<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{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 type="text/css">
body,table, td, li, p, div, textarea  
{font-family:arial; font-size:8pt; color:FFFFFF; font-weight:none;}
body
{background-image:url("");
background-attachment:no-fixed;
background-color:000000;
background-repeat:repeat;
background-position:center;
scrollbar-arrow-color: 000000;    
scrollbar-track-color: 000000;
scrollbar-face-color: 000000;
scrollbar-shadow-color: 000000;
scrollbar-highlight-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-3dlight-color: 000000;}

.text {font-family:arial; font-size:8pt;
color:000000; font-weight:none}  

.title {
color: 000000;
font: 20px arial;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -3px;
padding: 0px;
background-color: transparent;}

div {
font-family: arial;
color : 000000;
font-size : 8pt;
letter-spacing:0pt;
text-align: justify;
background-color: transparent;
border: 0px solid 000000;}


strong, b  {
font: 7px small fonts;
color: FFFFFF;
text-transform:uppercase;
text-align: justify;}

i, em, i  {
font: 14px small fonts;
color: ffffff;
text-transform:uppercase;
text-align: justify;}

u, s, s, sb, sw {
font: 8px small fonts;
color: 999999;
text-transform:uppercase;
border-bottom: 1px DOTTED 000000;
text-align: justify;}


a{font-family:arial; font-size:8pt;  
font-weight:bold;background-color:transparent;}  
a:link{color:FFFFFF;font-weight:none;font-family:arial}
a:active{color:8f8f8f;font-weight:none;font-family:arial}
a:visited{color:FFFFFF;font-weight:none;font-family:arial}
a:hover{color:8f8f8f;font-weight:none;font-family:arial}

a.man{font-family:arial; font-size:8pt;  
font-weight:normal;background-color:transparent;}
a:link{color:8f8f8f;font-weight:none;font-family:arial}  
a:active{color:ffffff;font-weight:none;font-family:arial}  
a:visited{color:8f8f8f;font-weight:none;font-family:arial}
a:hover{color:ffffff;font-weight:none;font-family:arial}
</style>

<div class="bg" style="position: absolute; left:160px; top:100px; width:900px; height:675px; overflow: hidden;">
<img src="http://img296.imageshack.us/img296/174/sewerlayoutcopyyi4.png">
</div>

<div class="content" style="position: absolute; left:597px;  top:265px; width:430px; height:350px; overflow: auto;">

<img src="" align=left border=0></a>


<u>Name: </u>
<br><u>Age: 16</u>
<br><u>Status: </u>
<br><u>Location: </u>
<br><u>Body Type: </u>
<br><u>Ethnicity: </u>
<br><u>Orientation: </u>
<br><u>Zodiac Sign: </u>


blah blah blah

</center></div>

<div class="content" style="position: absolute; background-color:transparent; left: 188px;  top:638px;

width:290px; height:110px; overflow: none;"><center><br>
<form method="post" action="http://collect.myspace.com/index.cfm?fuseaction=user.confirmComment"><input name="friendID" value=63909291" type="hidden"><textarea name="f_comments" cols="40"

rows="4" style="border-width: 1px; border-style: solid; border-color: 000000; font-family: arial;

font-size: 8pt; color: ffffff; background-color: transparent;"

style="overflow:none">...</textarea><BR><input value="Drop It" style="border-width: 1px; border-style:

solid; border-color: 000000; font-family: arial; font-size: 8pt; color: ffffff; background-color:

transparent;" type="submit"></form></center></div>




</style>

[ekhast]

For the background not to look double delete this:

CODE

<div class="bg" style="position: absolute; left:160px; top:100px; width:900px; height:675px; overflow: hidden;">
<img src="http://img296.imageshack.us/img296/174/sewerlayoutcopyyi4.png">
</div>

and change this

CODE

<div class="layoutmap">
<IMG SRC="http://img296.imageshack.us/img296/174/sewerlayoutcopyyi4.png" USEMAP="#sewer_Layout.jpg" WIDTH=900 HEIGHT=675 BORDER=0>
<MAP NAME="sewer_Layout.jpg">
<AREA SHAPE=RECT COORDS="97,63,176,97" HREF="http://home.myspace.com/index.cfm?fuseaction=user" ALT="Home">
<AREA SHAPE=RECT COORDS="199,58,399,79" HREF=" http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=63909291"&MyToken=3334265d-0094-4f5a-9c13-083dfdce2bb3" ALT="View Comments">
<AREA SHAPE=RECT COORDS="420,43,557,56" HREF="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=YOURFRIENDID" ALT="Message Me">
<AREA SHAPE=RECT COORDS="573,26,625,99" HREF="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=YOURFRIENDID" ALT="Add Me">
<AREA SHAPE=RECT COORDS="645,14,792,56" HREF="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=YOURFRIENDID" ALT="View More Pictures">
</MAP> </div>

for this:

CODE

<div class="bg" style="position: absolute; left:160px; top:100px; width:900px; height:675px; overflow: hidden;">
<MAP NAME="bg">
<AREA SHAPE=RECT COORDS="97,63,176,97" HREF="http://home.myspace.com/index.cfm?fuseaction=user" ALT="Home">
<AREA SHAPE=RECT COORDS="199,58,399,79" HREF=" http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=63909291"&MyToken=3334265d-0094-4f5a-9c13-083dfdce2bb3" ALT="View Comments">
<AREA SHAPE=RECT COORDS="420,43,557,56" HREF="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=YOURFRIENDID" ALT="Message Me">
<AREA SHAPE=RECT COORDS="573,26,625,99" HREF="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=YOURFRIENDID" ALT="Add Me">
<AREA SHAPE=RECT COORDS="645,14,792,56" HREF="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=YOURFRIENDID" ALT="View More Pictures">
</MAP>
<IMG SRC="http://img296.imageshack.us/img296/174/sewerlayoutcopyyi4.png" width:900px; height:675px; USEMAP="#bg" BORDER="0">
</div>