Help - Search - Members - Calendar
Full Version: I Need Help With my DIV Layout & map :(
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
Glamourouz
Nov 19 2006, 09:51 PM
I've tried everything by reading 4 or 5 tutorials & they'd start off ok & then end messed up, like in the end my layout would be warped or something...I tried to model it after the Rihanna DIV, well that's what I used to try to help me but it's not the same or a replica of course...Can someone please help me...I took my coding for this layout off my myspace so it wouldn't look messed up but these are the codes I used....

here's the picture of the link to the layout
http://img.photobucket.com/albums/v603/Cho...ss05/glamcm.png

here's the link to the bg img
http://img.photobucket.com/albums/v603/Cho...tkiss05/bg4.png

here's the code I put in the about me
CODE
<style type="text/css">
body {
    background-color:7e3724;
    scrollbar-face-color:bf4c49;
    scrollbar-highlight-color:7e3724;
    scrollbar-3dlight-color:7e3724;
    scrollbar-shadow-color:7e3724;
    scrollbar-darkshadow-color:7e3724;
    scrollbar-arrow-color:bf4c49;
    scrollbar-track-color:7e3724;
     }

div, textarea, input{font-family:helvetica;font-size:11px;color:bf4c49;background-color: transparent;} </style>
<style>.r{}</style>

<style type="text/css">
table table table table div {visibility:hidden;}
div table table table table table div input, div a, td.text div {visibility:visible;}</style>
<style type="text/css">
.Main { position:absolute; left:51%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;background-image: url('http://img.photobucket.com/albums/v603/Chokalitkiss05/bg4.png'); background-repeat:repeat;

background-position:center center;background-attachment: fixed}
</style>
<style>.orangetext15{display: none;}</style>
<style type="text/css"> .hidethem {visibility:hidden; display:none;} </style>
<style type="text/css"> .Main { position:absolute; left:50%; top:125px; width:715px;

z-index:1; margin-left:-370px; padding:0px; border:0px; background-color:transparent;}
.contactTable {display:none!important; border:0px !important;}
.blacktext12 { visibility:hidden; display:none }DONOTBLOCKOURADS body div table tbody tr td font

{visibility:hidden;} .navbar {visibility:visible;} .navbar font {visibility:hidden;} table

td div div font  {visibility:hidden;}

.Main { position:absolute; left:51%; top:125px; width:715px; z-index:1; margin-left:-370px; padding:0px; border:0px; background-color:transparent;} </style>
<style type="text/css">
table td div div {visibility:hidden;}
</style>

<style type="text/css">.comments {visibility:hidden;display:none;}</style>

<style>div div table tr

td a.navbar, .navbar, div div table tr td font {display: none;}</style>

<style type="text/css">
body div div table td { display: none }
.navibar {background-color: !important; position: absolute; left:50%; top:127px; margin-left: -475px; width: 715px; height: 26px; color:bf4c49;}
.navbar { display: none; }
</style>

<style>div div table

tr td a.navbar, div div table tr td font {display: none;}</style> <style type="text/css">

.hidethem {visibility:hidden; display:none;} </style> </td> </tr>

<style type="text/css">.comments {visibility:hidden;display:none;}</style>

</div>

<STYLE type="text/css">
input, form, td.text input, td input {visibility: visible !important;}
</style>

<style type="text/css">
table table table {width:110px;}
table table table table table table {width:20%;}
</style>
<style>.r{}</style><style type="text/css">
a.text, table div font a, table div div {visibility:hidden;}
</style>
<style type="text/css">
td.text td.text table table table,
td.text td.text table br,
td.text td.text table
.orangetext15,
td.text td.text .redlink,
td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td,
td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
.rid br {display:none;}
</style>

<style>.r{}</style>
<DIV class="Main"> <table style="width:796px; height:604px; cellpadding:0px;

cellspacing:0px; border:0px solid silver; background-color:7e3724; background-image: url('http://img.photobucket.com/albums/v603/Chokalitkiss05/bg4.png'); background-repeat:repeat;

background-position:center center;background-attachment: fixed}"> <tr> <td valign="top">

<style type="text/css"> body { background:; background-image: url('http://img.photobucket.com/albums/v603/Chokalitkiss05/bg4.png'); background-repeat:repeat;

background-position:center-left; background-attachment:; background-color:7e3724; background-

repeat:repeat; background-position:center-left; background-attachment:; </style>

<style type="text/css">

a:active, a:visited, a:link { font-family:helvetica; color:rgb(55,113,147); font-size:8pt; border:0px; }
a:hover { font-family:helvetica; color: rgb(0,0,0); font-size:8pt; }

</style>

<style> table, tr, td {background-color: transparent; border: 0px; padding:0;position: right;}
table table {background-color: transparent;border: 0px;position: right;}
table table table {border:0px solid; border-color:; padding:0; background-color:;background-image:url();position: right;}
table table table table{border: 0px;position: right; margin-top:10px;}</style>

<style

type="text/css">table table td.text table td.text tbody table tbody td table td {display:none;}div div table td td font {visibility: hidden;div div table tr td a.navbar, .navbar, div div table tr td font {display: none;}</style>

<style type="text/css"> table td div div font {visibility:hidden;} </style>



here's the code I put in the I'd like to meet section
CODE
<CENTER><IMG NAME="LAYOUT" STYLE="position:absolute;top:0px;left:0px;margin-bottom:0px" SRC="http://img.photobucket.com/albums/v603/Chokalitkiss05/glamcm.png" WIDTH="687" HEIGHT="1004" BORDER="0" USEMAP="#cm">

<MAP NAME="cm">
<AREA SHAPE="rect" COORDS="345,469,408,487" HREF="http://home.myspace.com/index.cfm?fuseaction=user" TARGET="_parent" ALT="Go Back To Homepage!">
<AREA SHAPE="rect" COORDS="383,495,497,516" HREF="http://www.myspace.com/index.cfm?fuseaction=user.homeComments&friendID=11035158" TARGET="_parent" ALT="Leave A Comment!">
<AREA SHAPE="rect" COORDS="360,525,413,546" HREF="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=11035158" TARGET="_parent" ALT="Read My Blog!">
<AREA SHAPE="rect" COORDS="356,555,500,574" HREF="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=11035158" TARGET="_parent" ALT="Send Me a Message!">
<AREA SHAPE="rect" COORDS="411,592,499,610" HREF="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=11035158" TARGET="_parent" ALT="Add Me To Your Friend List!">
<AREA SHAPE="rect" COORDS="404,628,497,647" HREF="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=11035158" TARGET="_parent" ALT="View My Pictures!">
<AREA SHAPE="rect" COORDS="379,664,505,686" HREF="http://www.myspace.com/Modules/ViewFriends/FriendsView.aspx?friendID=11035158" TARGET="_parent" ALT="These Are My Many Friends!">
</MAP></CENTER>

<div style="position:absolute;top:707;left:32;overflow:auto;width:305px; height:274px;background-color:transparent">
<center>Write Me a Comment:<br><BR><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="11035158">
<textarea name="f_comments" cols="20" rows="5">Write Comment Here...</textarea><br><input type="submit" value="Submit"><input type="reset" value="Clear"></form>
</center></font></div><br>

<div style="position:absolute;top:847;left:347;overflow:auto;width:337px; height:125px;background-color:transparent">

Top Friends Marquee here

</div>

<div style="position: absolute; top:141px; left:329px; width:332px;height:741;background-color:transparent;">
Here you can put whatever you want, perhaps a picture of yourself, just make sure its no wider than 280 px. If you don't know what that means, then just be sure your picture isn't bigger than this brown square in which u are typing! Here are a few things you can fill in to fill up this space....don't leave it empty it takes away from the design of the layout! And replace this paragraph with your own greeting!<br><br><b>About Me</b><br>
<b><u>Name: </b></u>Insert Name Here<br>
<b><u>Age: </b></u>Insert Age Here<br>
<b><u>Sign: </b></u>Insert Zodiac Here<br>
<b><u>Location: </b></u>Rep ya home here<br>
<b><u>Status: </b></u>Insert Status Here<br>
<b><u>School: </b></u>Insert School Here<br>
<b><u>Class of: </b></u>Insert Graduation Date Here<br>
<b><u>Interests: </b></u>Insert Anything Else Here<br><br><Br>

<br><br>ADD WHATEVER ELSE YOU WANT TO IN HERE, FAVORITE LINKS MAYBE? PICTURES?<BR><BR><br></div>
<style>.r{}</style><style>.bottomlinks {visibility:hidden;display:none}</style>
<div style="position:relative; height:400px; overflow:hidden; border:0px;"><table><tr><td><table><tr><td>




Thanks alot for the help....
freeflow
Nov 19 2006, 11:35 PM
Ok to tell you the truth your code is just eh. I went through it trying to combine it together for you, to make it easier but you code is worthless (no offense) just saying that can cause you ALOT of confusion.

Why don't you get rid of it. Read this:
http://www.createblog.com/forums/index.php?showtopic=142922
And post the steps you get lost on.
Glamourouz
Nov 20 2006, 12:29 AM
that's one of the tutorials i used...the layout looked ok except I messed up the background & didn't know how to inlude the map without distorting the image...
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.