having trouble creating custom myspace layout......css/div, myspace Options

[rubicon]

Ok so i have been reading crazy tutorials and have been trying the method of using and tweaking code but im having trouble going from the step of creating my background and then acutually implementing it into my myspace page....

background on me: i know and am familiar with html, made my background in photoshop, uploaded my background to imageshack (http://img482.imageshack.us/img482/5008/raygunbackgroundmt0.jpg) , i am decent with dreamweaver

what i have done so far was to use a div code found on here to hide my profile and i tried using some css stylesheets that some users on here posted but saw right away that i was gonna have problems using them with my background...

can someone push me in the right direction because im totally new with using css and div and im wandering at the moment...thanks!!

[*This Confession*]

okay well first It doesn't matter if your good with dreamweaver or not, I am as well. But that stuff isn't going to work on myspace. You have to write that stuff out.


Anyway go hide your profile
If you don't want your comments to show use this,
http://www.createblog.com/forums/index.php...amp;pid=2188843

If you do want your comments to show use this one,
http://www.createblog.com/forums/index.php?showtopic=148089


Now once you have your profile hidden

add your background color and text and link colors. You can go to this link and get a layout code.
http://www.createblog.com/forums/index.php?showtopic=84325

Now use this and put your image which I will do for you and put it in your about me.

CODE

<div class="bg" style="position: absolute; left:0px; top:120px; width:800px; height:600px; overflow: hidden;">
<img src="http://img482.imageshack.us/img482/5008/raygunbackgroundmt0.jpg">
</div>

In the code above you may want to change the left number to what ever you want and check back to your myspace page to see where it is.

[rubicon]

ok now how do i go from using my graphic as a background:



to using my graphic as a layout where i have created my own nav box and about me box??..seems as though im stuck in a dreamweaver mentality and i want to change my myspace page into an actual webpage where i can layout my graphics and create links to diff parts of my page to access "send a message" or "view friends"...take a peak at the second image and hopefully you can see what my goal is....





when i saw this layout i tried to take some of its aspects and apply them to what i wanted to create...i wanted to use their about me section and the friends concept..here is below

http://www.createblog.com/layouts/preview.php?id=13919


THANKS!!

[*This Confession*]

okay
so

you still need to go do this

CODE

<div class="bg" style="position: absolute; left:0px; top:120px; width:800px; height:600px; overflow: hidden;">
<img src="IMAGE HERE">
</div>

For the layout and position it on to the myspace. and hide your profile if you haven't done that yet.
Can you please give me the myspace link to where your working on this?

Also FORGET DREAMWEAVER
its not going to help you code your myspace at all.

[rubicon]

ok i will def forget that it exists in fact dream who?? haha

here is my myspace link

www.myspace.com/thisrubicon

[rubicon]

the graphic shows up fine now but i dont know why the top part of the page is still showing grey..??

also i have been trying to decipher how to tell what table code refers to what myspace table (when viewing codes)...if i know this then i will at least have a starting point in learning how to put these tables where i want them on my page

my next step (i think at least) is putting my about me scroll box in the about me section that i left open, then adding a friends table in the black area right beneath the shoe graphic...then adding links to the nav menu (friends, add me etc) and finally adding my flash mp3 player which i already have the code for....

im feel like im so close but so far....

myspace link again

www.myspace.com/therubicon

[RxCore]

fix the background by adding this to your stylesheet.

body {background-color:000000}

and you might want to hide the top/bottom links and the copyright
http://www.createblog.com/forums/index.php?showtopic=122371

[rubicon]

thank you soooo much those codes worked puuuurrrfectly! also KUDOS to "this confession" for the positioning made easy post...i've got two words after reading that "PRINT SCREEN"

nowwww lesse, now i'd like to learn how to add a box for my about me section..when i started making this layout i had this box in mind that i saw used in another createblog members layout so here is the link



http://www.createblog.com/layouts/preview.php?id=13919

[RxCore]

easy as pie. holly is like a myspace goddess. you should actually take a look at her tutorial. it helped me alot.

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto;">
then your content goes in here.
</div>

[rubicon]

ok yes i have read this tutorial and this is exactly where i got stuck...i am not sure how to tweak this code to suit my needs but this was my result in the effort. By the way i do know what size i need the table to be which is the 164px width X 249 px height with a transparent background color

first i tried


<div class="content" style="position: absolute; left:000px; top:000px; width:164px; height:249px; overflow: auto;">
then your content goes in here.
</div>

2nd i tried

.about{position: absolute; left:000px; top:000px; width:164px; height:249px; overflow: auto; visibility:visible}
</style>


the difficult part of this for me is not knowing how to properly tweak this code to get an about me scrollbox like this http://www.createblog.com/layouts/preview.php?id=13919
to go in the yellow area of my myspace layout www.myspace.com/thisrubicon



THIS IS MY ENTIRE CODE SO FAR (dont laugh too hard at my notes, trying to keep some sense of these codes though):

<style type="text/css">
table, tr, td {background:transparent;}
table table table table, table table table table td.text, table.contactTable {display:none;}
td.text table, .orangetext15 {visibility:hidden;}
td.text table table {display:inline; visibility:visible;}
td.text td.text table {display:none;}
div b font font, div font font u {display:none;}
.whitetext12 { display: none; }.nametext { display:none;}
table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}
table table table {border: 0px solid; border-color: transparent; background-color: transparent; }
.r{hide profile}

body {background-color:000000}
.r{keep background consistent}

div table form tr td, a.navbar, font{visibility:hidden!important; height:0px!important;}
table tr td div div {visibility:hidden;border:0px!important;background-color:transparent;}
table div font a, table div div {visibility:hidden; display:none;border:0px!important;background-color:transparent;}
.r{hide top and bottom links and copyright}

</style>

<div class="bg" style="position: absolute; left: 0px; top:-90px; width:800px; height:600px; overflow: hidden;">
<img src="http://img46.imageshack.us/img46/4870/blkraygunaz1.jpg">
</div>

[freeflow]

<div class="content" style="position: absolute; left:000px; top:000px; width:164px; height:249px; overflow: auto;">
then your content goes in here.
</div>

You have to change 000 to actual numbers! Like 150 etc.

[*This Confession*]

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

[RxCore]

<div class="content" style="position: absolute; left:000px; top:000px; width:164px; height:249px; overflow: auto;">
then your content goes in here.
</div>

You have to change 000 to actual numbers! Like 150 etc.

doh! i forgot to mention that.

[rubicon]

k i checked out that link and that info makes sense...helps me understand a bit of what the info in the div tables for comments/friends sections means...

however i have entered the following code in between my style tags (all in my about me section) and have played with the positioning values but i do not see a table anywhere on my page i dont understand why i cant see the tables...maybe they are transparent or maybe it is because i have hidden the copyright area and the top links...my myspace link is at the bottom

<div class="content" style="position: absolute; left:100px; top:20px; width:164px; height:249px; overflow: auto;">
then your content goes in here.
</div>


www.myspace.com/thisrubicon

[freeflow]

You don't put that part in the red in style tags. Just put it by its self.
Make sure oyu set your profile overall font color to a color you can see.

My suggestion. Don't hide anything (except the profile) until you done your entire div layout.

[rubicon]

ok guys i have mad alotta progress since my last post....but now i cannot figure out how to code my navigation menu (send message, view more pics etc).

I def am starting to understand this css coding and how to manipulate it much more but im having trouble with this part....


OHHHH and i figured out a nice trick...if you open your background in fireworks and use the marquee tool to highlight an area where you want your table to be it will give you the exact pixel info so that you dont have to tinker and toy around trying to place it correctly[size=2]


now please take a peek at my layout and hopefully someone can help with this navigation menu i have and coding it correctly

www.myspace.com/thisrubicon

[freeflow]

You need to use a program to image slice that part to add the links in. I know imageready works but you cna look into seeing if fireworks does.

[rubicon]

ok well any tips on how to do this in imageready??

i feel like i've painted myself into a corner haha...once i make a hotspot for the link to be i will have to save the file and i can't save and link a psd file so i dunno what the next step is but im anxious to see what the imageready method is.....

[freeflow]

You save it and the html. Its really easy on imageready.
This may help. Its hard to ind a good tut . But its easy.

[RxCore]

before i got imageready i used to use this:
http://www.pcoward.com/imagemapper/stage1.asp

they walk you through it step-by-step and it's very user friendly.

[rubicon]

cool that was a GREAT tip, THANKS! I just cant figure out where to put this code at in regards to the rest of my code....