myspace artist profile layout, when shows are added, header moves help! Options

[kimmyxfleur]

this is the layout im working on: http://www.myspace.com/testlayoutxpio

i followed the tutorial pinned here. i believe i followed each step correctly. yet for some reason, whenever shows or blog entries are added the header shifts downward. so does the stuff on the left side. ive been trying to figure out what is wrong but i cant seem to get it.

here is the code for the layout:

CODE

<style>body table { margin-top: 240px;_margin-top: 218px; color: 000000; } body td table, body div table { margin-top: 220; _margin-top:220; color: 000000; z-index:9;}</style> <style> .masthead {position:absolute; margin-top:-810px; margin-left:-404px; left:50%; width:806px; height:240px; z-index:2;} </style> <div class="masthead"> <img src="http://img193.imageshack.us/img193/3897/header5testn.jpg" /> </div> <style> {THIS MAKES THE BODY TABLE TRANSPARENT} {*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR} table, tr, td{background-color:transparent;} body, body.bodycontent{ background-color: FFFFFF; background-image:url(http://img39.imageshack.us/img39/7526/bg4cj.jpg); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; overflow-x: hidden; } {THIS EDITS THE MAIN TEXT STYLE AND COLORS} body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{ color:48576b; font-size:8pt; font-weight:normal; font-style:normal; text-decoration:none; text-transform:none; font-family:arial; } {THIS CHANGES COLOR AND STYLE OF NAMETEXT AND HEADINGS} .orangetext15, text, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{ color:48576b; font-size:8pt; font-weight:normal; font-style:normal; text-decoration:none; text-transform:bold; font-family:arial; } {THIS CHANGES COLOR AND STYLE OF LINKS} 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:ffffff; font-size:8pt; font-weight:bold; font-style:normal; text-decoration:none; text-transform:bold; font-family:arial; } {THIS CHANGES COLOR AND STYLE OF LINKS ON HOVER} 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:ffffff; font-size:8pt; font-weight:bold; font-style:normal; text-decoration:none; text-transform:bold; font-family:arial; } {THIS ALSO MAKES THE BODY TABLE TRANSPARENT AND MAKES SURE ALIGNMENTS ARE FINE} {NOTHING NEEDS TO BE CHANGED HERE EXCEPT IF YOU WANT THE FONT CHANGED} p {margin: 0px 0px 1em 0px; font-family: arial !important} body>div {margin-left: 0px;} table, tr, td, table table, table table td {border-width:0px; background-color: transparent;} table table table td {background-color:transparent;margin:0px;padding: 0 0px 0px 0px} table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;} table table table table td {padding:0px;margin:0px;} table table table { background-color: transparent; border: 0 solid; border-color: transparent; width: 100%; } object {position:relative; z-index:1;} body td table, body div table {margin-top: 0px;} .a {hide URL label} .a {hide top links} .a {unhide navigation bar} .navbar {visibility:visible;} {THIS HIDES BASICALLY EVERYTHING ON THE LEFT SIDE] {*NOTE* - IF YOU DON'T WANT THE LEFT SIDE HIDDEN, TAKE OUT EVERYTHING BUT .ORANGETEXT15 AND .WHITETEXT12} .contactTable {display: none;} .orangetext15 {display: none;} .navigationbar {display: none;} .userprofileurl {display: none;} .profileInfo{display:none;} .whitetext12 {display: none;} img {border:0px;} {THIS HIDES UNNECESSARY BORDER LINES WHEN HIDING SECTIONS} table table table table div {visibility:hidden;} div table table table table table div input, div a, td.text div {visibility:visible;} table table table table div {visibility:hidden;} div table table table table table div input, div a, td.text div {visibility:visible;} </style> <style> .tg_left {position:absolute; margin-top:-555px; margin-left:-390px; left:50%; width:0px; height:230px; background-color:FFFFFF; z-index:2;} </style> <div class="tg_left"> <table id="Table_01" width="325" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=338905536"> <img src="http://i409.photobucket.com/albums/pp177/kimmyxfleur/Untitled-20_01-5.jpg" width="325" height="202" border="0" alt="" /></a></td> </tr> <tr> <td colspan="2"> <img src="http://i409.photobucket.com/albums/pp177/kimmyxfleur/Untitled-20_02-5.gif" width="224" height="1" alt="" /></td> <td rowspan="2"> <a href="http://vids.myspace.com/index.cfm?fuseaction=vids.channel&ContributorID=11148463"> <img src="http://i409.photobucket.com/albums/pp177/kimmyxfleur/Untitled-20_05-5.jpg" width="101" height="28" border="0" alt="" /></a></td> </tr> <tr> <td> <img src="http://i409.photobucket.com/albums/pp177/kimmyxfleur/Untitled-20_04-3.gif" width="112" height="27" alt="" /></td> <td> <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=338905536"> <img src="http://i409.photobucket.com/albums/pp177/kimmyxfleur/Untitled-20_04-05-4.gif" width="112" height="27" border="0" alt="" /></a></td> </tr> </table> <style> .contactTable { width:0px !important; height:175px !important; padding:0px !important; background-image:url(http://img17.imageshack.us/img17/9590/ct3g.jpg); background-attachment:scroll; background-position:center center; background-repeat:no-repeat; background-color:transparent;} .contactTable table, table.contactTable td { padding:0px !important; border:0px; background-color:transparent; background-image:none;} .contactTable a img {visibility:hidden; border:0px !important;} .contactTable a {display:block; height:28px; width:115px;} .contactTable .text {font-size:1px !important;} .contactTable .text, .contactTable a, .contactTable img {filter:none !important;} .contactTable .whitetext12 {display:none;}C{ } </style> <style> .thebanner{ background-color:000000; position: absolute; left: 50%; top: 0px; width: 0px; height: 0px; margin-left: -400px; overflow:hidden; background-image: ; background-position:center left; background-repeat:no-repeat; border-width: 0px; border-style: solid; } body table table td {padding-top:0px;} body {margin-top:0px;} div table table td {padding-top:0px;} body table table table td {padding-top:0px;} </style> </div>

perhaps someone can help me? actually i need help asap being that we'd like to have this layout finished by a certain deadline.

[Mickey]

Follow this step of the tutorial to put up your top banner instead of the method you're using now.

[kimmyxfleur]

thank you, i believe the header is fixed now. the left side though, where the general info should be, is still shifting downward though. any ideas as to why that is?

[Mickey]

Look for this:

CODE

<style>
.tg_left {position:absolute; margin-top:-560px; margin-left:-390px; left:50%; width:0px; height:230px; background-color:FFFFFF; z-index:2;}
</style>

Replace margin-top with just top, then fix the value appropriately.

[kimmyxfleur]

thanks so much! it works now. we applied the layout, but it seems one last problem arose.

heres the actual myspace: http://www.myspace.com/pilotsinorbit

the left side portion that is supposed to be hidden, as in that bit that says last login and what not is not hidden. how do i hide just that section?

EDIT:
actually i figured it out, the headline was too long. still that means the left side isnt completely hidden right?

[shawtiegotem]

Hey I'm designing a band layout, um. how do you put a image right beside the music player like that??

[Mickey]

Just position your left column high enough for your image to line up with the music player.