OK guys, i'm new here. Very new. (1st post, woo)
Anyway, I dont know crap about HTML or CSS, all I know how to do really is reposition, change font, color and type. I don't know what any of the codes mean, I'm real green!
Anyway, is this possible? (see link)
Basically I wanna create a DIV at the very top of my myspace page, that has a logo with links underneath it ( Home, FRiend, Pics, Vids, etc....) and then just have a standard myspace layout underneath of it. With the standard contact table hidden..... is this possible? I want my band's page to look just like the picture, but I'd like to be able to edit stuff like how you can with layout codes (IE: modify blogs, text, band members, shows, musicp layer, etc....) IS this possible? and if so, can someone show me, or explain to me how to do it? Thanks - Roger
Full Version: IS this possible? (example inside)
Yes, that's definitely possible. Try this to add a DIV at the top of your page. You can play around with that code to get a banner and a few links under it. To hide the contact table, use this code:
If you want to modify the things you listed, just play around with DIVs. To remove everything on the top left section, use this code:
Then, you can just add DIVs and position them where you want them to be. This tutorial is very good, but start out with Step 2. Step 1 is for a myspace page, not a music myspace page.
CODE
<style>
.contactTable {display:none;}
</style>
.contactTable {display:none;}
</style>
If you want to modify the things you listed, just play around with DIVs. To remove everything on the top left section, use this code:
CODE
<style>
table.H, .nametext, font strong{display:none;}
div.clearfix i i, .i {display:none;}
table table table table td.text img {display:none;}
table table p table table td.text img, table table td.text table table td.text img {display:block;}
table, td {height:auto !important; }
table table br {display:none}
table table td.text br, table table p td br {display:inline; line-height:13px}
p {margin-top:-13px;}
</style>
table.H, .nametext, font strong{display:none;}
div.clearfix i i, .i {display:none;}
table table table table td.text img {display:none;}
table table p table table td.text img, table table td.text table table td.text img {display:block;}
table, td {height:auto !important; }
table table br {display:none}
table table td.text br, table table p td br {display:inline; line-height:13px}
p {margin-top:-13px;}
</style>
Then, you can just add DIVs and position them where you want them to be. This tutorial is very good, but start out with Step 2. Step 1 is for a myspace page, not a music myspace page.
Thanks. Now for the 1st part, where I can make the photo at the top above my myspace profile, for the links i want under it, how do i create each word as a different link? do i use the image/link code, or is there a way to make a link come up behind the word that is invisible? I know i'd have to play around with the placement of it, but what kinda link code do i use for that? Thanks - Roger
Also, for the code that removes the top left stuff, will it push all the stuff under that section up to the top, like how I made it in the Jpeg? - Roger
QUOTE(hippiehead025 @ Oct 9 2008, 02:17 PM) 
Thanks. Now for the 1st part, where I can make the photo at the top above my myspace profile, for the links i want under it, how do i create each word as a different link? do i use the image/link code, or is there a way to make a link come up behind the word that is invisible? I know i'd have to play around with the placement of it, but what kinda link code do i use for that? Thanks - Roger
Look at the code that was provided:
CODE
<style type="text/css">
.profileWidth table { margin-bottom:400px; width:800px; }
.rail { display:none; }
.topbanner {
background:url(IMAGE LINK) top left no-repeat;
width:800px; height:400px;
position:absolute; top:0; left:50%;
margin:160px 0 0 -400px;
</style>
<div class="topbanner">
Any text, links, videos you want can be added here.
</div>
.profileWidth table { margin-bottom:400px; width:800px; }
.rail { display:none; }
.topbanner {
background:url(IMAGE LINK) top left no-repeat;
width:800px; height:400px;
position:absolute; top:0; left:50%;
margin:160px 0 0 -400px;
</style>
<div class="topbanner">
Any text, links, videos you want can be added here.
</div>
Where it says "Any text, links, videos you want can be added here", that's where you should place whatever content you want to be at the top of your page. That includes the image and the links.
For the link question, yes. Use image link codes to put them up. I suggest designing an image that has the top banner that you want to add along with the links underneath. Then, just slice up that image. Upload the sliced images one by one so you can turn whichever image you want into a link.
Now, when i put the sliced images into the code, do i use the <a href="URL_OF_SITE_HERE"><img src="URL_OF_IMAGE_HERE"></a> code, then put position, margin, etc.... under it?
so it'd be like
And when the code is entered to delete/ hide the left upper section of the myspace, will all the rest of thestuff be pushed up flush as I have in my original picture?
so it'd be like
CODE
<style>
<a href="URL_OF_SITE_HERE"><img src="URL_OF_IMAGE_HERE"></a>
width: Height:
position:absolute; top:X; left: XX%;
margin:XXpx 0 0 xxpx;
</style>
<a href="URL_OF_SITE_HERE"><img src="URL_OF_IMAGE_HERE"></a>
width: Height:
position:absolute; top:X; left: XX%;
margin:XXpx 0 0 xxpx;
</style>
And when the code is entered to delete/ hide the left upper section of the myspace, will all the rest of thestuff be pushed up flush as I have in my original picture?
First of all, you don't put image link codes inside <style> tags. They're HTML codes, not CSS codes. Second, you don't put CSS attributes inside style tags when you're defining nothing. Putting an image link code at the top is worthless and it won't be styled. Third, no. You don't have to add margin attributes to the codes if you sliced the image correctly. The sliced images should show up accordingly just by using image link codes. This is the correct one:
Anyway, what bands/artists usually do is they get rid of the whole left module and just place a DIV where it used to be. That's the easiest way you can recreate that layout. Try out this tutorial to achieve that. Or you can get TJ (decaydancefbr) to help you out. He's pro at music MySpaces.
CODE
<a href="LINK URL"><img src="IMAGE URL"></a>
Anyway, what bands/artists usually do is they get rid of the whole left module and just place a DIV where it used to be. That's the easiest way you can recreate that layout. Try out this tutorial to achieve that. Or you can get TJ (decaydancefbr) to help you out. He's pro at music MySpaces.
OK i dont think we're talking the same "slice" u just mean where i have Home, Add, Photos, Videos should be cut into rectangles and set as links, correct? And with that code, how am i supose to dictate how far down and across they go( the links?) I want them to be in an evenly spaced horizontal line under where it says "Carpe Diem". Like I said I have no idea what this stuff is or how to do it... I dont know codes, or css. I'm trying to learn it. - Roger
Alright, I'll use an image to show you what I mean:
This is the DIV layout I designed that I have on my page. (Don't mind the black boxes. Those are where my comments and content go.) You see the lines? If you take the images inside them separately, upload them, and use the correct codes, you should have something that looks exactly like that Carpie Diem band has on their page.
What you need to do is create an image like that first. Put everything where you want them to be already. Don't worry about alignment yet. Then, once you have it looking the way you want it, slice up the image the way the image above was sliced.
Whatever images are inside the red lines need to be put up with image codes while images inside blue lines need to be put up with image link codes. The ones inside the blue lines are the links. Of course, it may be different than what you have on your page but that's just to show you how I constructed mine. It's easier to use images than messing around with positioning, in my opinion.
If you'd like to use image maps instead, try out this tutorial. I think that's harder to keep up with, but that's me.
This is the DIV layout I designed that I have on my page. (Don't mind the black boxes. Those are where my comments and content go.) You see the lines? If you take the images inside them separately, upload them, and use the correct codes, you should have something that looks exactly like that Carpie Diem band has on their page.
What you need to do is create an image like that first. Put everything where you want them to be already. Don't worry about alignment yet. Then, once you have it looking the way you want it, slice up the image the way the image above was sliced.
Whatever images are inside the red lines need to be put up with image codes while images inside blue lines need to be put up with image link codes. The ones inside the blue lines are the links. Of course, it may be different than what you have on your page but that's just to show you how I constructed mine. It's easier to use images than messing around with positioning, in my opinion.
If you'd like to use image maps instead, try out this tutorial. I think that's harder to keep up with, but that's me.
ok, i think i got it now, so basically ima cut the picture up, then post them in the div, adjusting margins and top margin till they are where they are supose to be to create the whole image, correct? And FYI the Carpe Diem band. Is my band. I made that picture i posted with photoshop to show what I wanted to do with my page. if you goto www.myspace.com/carpediemmd you'll see what I have currently. - Roger
OK so i found the code to make a banner under the nav bar, and i found out how to create coords for links, but none of the links are working? they arent even registering as links..... can someone tell me whats wrong with my coding?
www.myspace.com/carpediemmd
Thanks - Roger
www.myspace.com/carpediemmd
CODE
<style> .profileWidth table { margin-bottom:400px; width:800px; } .rail { display:none; } .topbanner { background:url() top left no-repeat; width:639px; height:202px; position:absolute; top:60; left:50%; margin:160px 0 0 -319px; </style> <div class="topbanner"> <img src="http://i27.photobucket.com/albums/c171/Hippiehead025/Myspace%20Stuff/myspaceheader-3.jpg" usemap="&035;name" border="0" /><map name="header"> <area shape="rect" alt="Home" coords="42,151 43,170 123,171 124,155" href="www.myspace.com/carpediemmd" /> <area shape="rect" alt="Friends" coords="139,152 138,172 192,169 194,154" href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0yMDAxMjUzMzA=" /> <area shape="rect" alt="Message" coords="216,151 218,167 320,154 321,172" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yMDAxMjUzMzAmTXlUb2tlbj0xNmZjN2Y0Zi00ODZjLTQ4MDMtODdhMS1iNmZjM
I1NDRhMTY=" /> <area shape="rect" alt="Video" coords="340,152 341,171 415,172 415,150" href="http://vids.myspace.com/index.cfm?fuseaction=vids.showvids&friendID=200125330&n=200125330&MyToken=16fc7f4f-486c-4803-87a1-b6fc0b544a16" /> <area shape="rect" alt="Photos" coords="434,150 434,169 521,171 521,156" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0yMDAxMjUzMzA=" /> <area shape="rect" alt="Blog" coords="542,150 542,166 596,151 598,171" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkNvbmZpcm0mZnJpZW5kSUQ9MjAwMTI1MzMw" /> </map> </div> <Style type="text/css" source="http://www.strikefile.com/" author="Thomas Zwaagstra"> table, tr, td{ background-color:transparent; border-style:none; } body, body.bodycontent{ background-color:rgb(0,0,0); background-image:url(http://i27.photobucket.com/albums/c171/Hippiehead025/MyspaceBG.jpg); background-position:center center; background-repeat:no-repeat; background-attachment:fixed; scrollbar-face-color:rgb(0,0,0); scrollbar-base-color:rgb(0,0,0); scrollbar-3dlight-color:rgb(51,51,51); scrollbar-shadow-color:rgb(51,51,51); scrollbar-darkshadow-color:rgb(51,51,51); scrollbar-highlight-color:rgb(51,51,51); scrollbar-track-color:rgb(0,0,0); scrollbar-arrow-color:rgb(51,51,51); } body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{ color:rgb(255,255,255); font-size:8pt; font-weight:bold; font-style:normal; text-decoration:none; text-transform:none; } .orangetext15, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{ color:rgb(102,102,102); font-size:8pt; font-weight:bold; font-style:FairydustB; text-decoration:none; text-transform:none; } a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{ color:rgb(0,0,204); font-size:8pt; font-weight:bold; font-style:italic; text-decoration:none; text-transform:none; } a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{ color:rgb(0,0,204); font-size:9pt; font-weight:bold; font-style:italic; text-decoration:underline ; text-transform:none; } table table table, div table table{ border-style:none; border-width:1px; } table table table table, div table table table{ border-style:none; } A IMG{ border-style:none; } a </Style> <br><br>Carpe Diem is a four piece all original band out of Walkersville, Maryland, currently in the process of writing and recording songs. We are recording a 4-Track Demo at the moment so the current playlist has been removed, but as the final demos are recorded they will be posted so everyone can take a listen. These are low quality, done in our (not so ideal for recording) practice spot, but let us know what you think anyways. <br><br> If you're interested in booking the band contact us here or at CDBand07@yahoo.com.<br><br>
2FnZSZmcmllbmRJRD0yMDAxMjUzMzAmTXlUb2tlbj0xNmZjN2Y0Zi00ODZjLTQ4MDMtODdhMS1iNmZjM
I1NDRhMTY=" /> <area shape="rect" alt="Video" coords="340,152 341,171 415,172 415,150" href="http://vids.myspace.com/index.cfm?fuseaction=vids.showvids&friendID=200125330&n=200125330&MyToken=16fc7f4f-486c-4803-87a1-b6fc0b544a16" /> <area shape="rect" alt="Photos" coords="434,150 434,169 521,171 521,156" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0yMDAxMjUzMzA=" /> <area shape="rect" alt="Blog" coords="542,150 542,166 596,151 598,171" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkNvbmZpcm0mZnJpZW5kSUQ9MjAwMTI1MzMw" /> </map> </div> <Style type="text/css" source="http://www.strikefile.com/" author="Thomas Zwaagstra"> table, tr, td{ background-color:transparent; border-style:none; } body, body.bodycontent{ background-color:rgb(0,0,0); background-image:url(http://i27.photobucket.com/albums/c171/Hippiehead025/MyspaceBG.jpg); background-position:center center; background-repeat:no-repeat; background-attachment:fixed; scrollbar-face-color:rgb(0,0,0); scrollbar-base-color:rgb(0,0,0); scrollbar-3dlight-color:rgb(51,51,51); scrollbar-shadow-color:rgb(51,51,51); scrollbar-darkshadow-color:rgb(51,51,51); scrollbar-highlight-color:rgb(51,51,51); scrollbar-track-color:rgb(0,0,0); scrollbar-arrow-color:rgb(51,51,51); } body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{ color:rgb(255,255,255); font-size:8pt; font-weight:bold; font-style:normal; text-decoration:none; text-transform:none; } .orangetext15, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{ color:rgb(102,102,102); font-size:8pt; font-weight:bold; font-style:FairydustB; text-decoration:none; text-transform:none; } a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{ color:rgb(0,0,204); font-size:8pt; font-weight:bold; font-style:italic; text-decoration:none; text-transform:none; } a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{ color:rgb(0,0,204); font-size:9pt; font-weight:bold; font-style:italic; text-decoration:underline ; text-transform:none; } table table table, div table table{ border-style:none; border-width:1px; } table table table table, div table table table{ border-style:none; } A IMG{ border-style:none; } a </Style> <br><br>Carpe Diem is a four piece all original band out of Walkersville, Maryland, currently in the process of writing and recording songs. We are recording a 4-Track Demo at the moment so the current playlist has been removed, but as the final demos are recorded they will be posted so everyone can take a listen. These are low quality, done in our (not so ideal for recording) practice spot, but let us know what you think anyways. <br><br> If you're interested in booking the band contact us here or at CDBand07@yahoo.com.<br><br>
Thanks - Roger
that, you can blame on myspace. unfortunately, you can't do an image map on a music profile, so you'll have to slice your image.
the easiest way to do will leave you with seven different images. chop off the top part of the banner (most of "carpe diem"), and then cut out smaller images around the areas you want the links to be. this is the code that should end up between the <div class="topbanner"></div> tags.
(no pun intended by "home slice," by the way...)
the easiest way to do will leave you with seven different images. chop off the top part of the banner (most of "carpe diem"), and then cut out smaller images around the areas you want the links to be. this is the code that should end up between the <div class="topbanner"></div> tags.
CODE
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="6"><img src="URL TO TOP HALF" /></td>
</tr>
<tr>
<td><a href="URL FOR HOME"><img src="URL TO HOME SLICE" /></a></td>
<td><a href="URL FOR JOIN"><img src="URL TO JOIN SLICE" /></a></td>
<td><a href="URL FOR MESSAGE"><img src="URL TO MESSAGE SLICE" /></a></td>
<td><a href="URL FOR VIDEO"><img src="URL TO VIDEO SLICE" /></a></td>
<td><a href="URL FOR PHOTOS"><img src="URL TO PHOTOS SLICE" /></a></td>
<td><a href="URL FOR BLOG"><img src="URL TO BLOG SLICE" /></a></td>
</tr>
</table>
<tr>
<td colspan="6"><img src="URL TO TOP HALF" /></td>
</tr>
<tr>
<td><a href="URL FOR HOME"><img src="URL TO HOME SLICE" /></a></td>
<td><a href="URL FOR JOIN"><img src="URL TO JOIN SLICE" /></a></td>
<td><a href="URL FOR MESSAGE"><img src="URL TO MESSAGE SLICE" /></a></td>
<td><a href="URL FOR VIDEO"><img src="URL TO VIDEO SLICE" /></a></td>
<td><a href="URL FOR PHOTOS"><img src="URL TO PHOTOS SLICE" /></a></td>
<td><a href="URL FOR BLOG"><img src="URL TO BLOG SLICE" /></a></td>
</tr>
</table>
(no pun intended by "home slice," by the way...)
Or if you cut them up correctly, you can just use:
CODE
<div class="topbanner">
<img src="">
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
</div>
<img src="">
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
</div>
Thanks guys. and i'm finding im not likin myspace right now...ha. - Roger
I usually don't, either. LOL. Alright, PM me if you need this reopened. Topic closed & moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.