Log In · Register

 
Overlay Div Help
Relentless
post Feb 2 2006, 08:48 PM
Post #1


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
I'm having trouble on my first overlay div. I'm just trying it but now it's so frusterating. I'm using the hide profile script and some other script to hide so I can start the Overlay Div. Although, when I put my image/css/div's it comes out weird. ALSO, I can see the profile on the side and that big huge white square box which was from the hide profile. I tried to position stuff first but it was complicated, couldn't position it.

Here's the CSS code, which was directly from here, except the changes.


<!-- end code provided by createblog.com -->

Here's the code I put in my Who'd I Like to meet (Interest section)


Here's the outline I'm TRYING TO do.
-- http://img431.imageshack.us/img431/1539/layoutoutline7xj.jpg --
I'm having trouble positioning and the profile underneath the "hide profile" script. I can only see like part of my image. I'm trying to do. Anyone help me with these couple problems? (x Thanks.
 
2 Pages V   1 2 >  
 Start new topic
Replies (1 - 30)
freeflow
post Feb 2 2006, 10:01 PM
Post #2


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
When you hide your profile, your position your layout ontop of it.
Try using styletags w/ your divs like below: it may help them position better
CODE
<style>
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,div,p,xmp,table,tr,td,th{
background-color:FFFFFF;
scrollbar-arrow-color:EDF3FE;
scrollbar-track-color:FFFFFF;
scrollbar-shadow-color:FFFFFF;
scrollbar-face-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-darkshadow-color:FFFFFF;
scrollbar-3dlight-color:FFFFFF;
font-family:arial;
font-size:8pt;
color:000000;
border:none;}

input, select, textarea, .textfield, .button {
font-family:arial;
font-size:8pt;
color:000000;
border: 1px  solid 000000;
background-color:transparent;
text-align:left;}

{ TEXT DEFAULTS }
{class for the basic font for the page}
.text {
font-family:arial; font-size:8pt; line-height:10pt; color:000000;text-align:justify;}

b,i,strong,em,u,s {
font-family:arial; font-size:8pt;color:3D80DF;font-weight:normal;cursor:cross-hair;}

{style for the number of friends you have.}
.redbtext{font-family:arial; font-size:8pt; line-height:10pt; color:000000;border:0px solid 000000; }

{repeat of the style for how many comments you have}
.redbtext{font-family:arial; font-size:8pt; line-height:10pt; color:000000; border:0px solid 000000;}

{"Blurbs", "About Me", "Who I’d like to Meet", "Friend Space", and "Friend’s Comments" style}
.orangetext15{font-family:arial; text-transform:uppercase; font-size:11px; color:000000; font-weight:bold;background:000000; border:0px solid 000000;text-decoration:underline;}

{"General", "Music", "Movies", "Television", "Books", "Heros", "Status", "Here for", "Hometown", "Body Type", "Ethnicity", "Religion", "Sign", "Smoke/Drink", "Children", "Education", "Occupation", and "Income" title style}
.lightbluetext8{font-family:arial; text-transform:uppercase; font-size:11px; color:000000; font-weight:bold;background:000000;border:0px solid 000000;text-align:center;}

{"In your extended network" style}
.blacktext12{font-family:arial; font-size:16px; color:000000; font-weight:bold;text-decoration: underline; text-transform:uppercase;}

{"Contacting", "Interests", "Details", and "Schools" title styling}
.whitetext12{font-family:000000; font-size:16px; color:000000; font-weight:bold;text-decoration: underline; border:0px solid CCFFFF; text-transform:uppercase;}

{Stylizing of your name above your picture; appears you can’t change the color of your name from here. Suggestions?}
.nametext{font-family:arial; font-size:16px; color:000000; font-weight:bold;text-decoration:underline;border:none;text-transform:uppercase;}

{date stamp on comments}
.blacktext10{font-family:arial; font-size:8pt; line-height:10pt; color:000000;border:0px solid 000000;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a, a:link,a:active,a:visited{font-family:arial; font-size:8pt; line-height:10pt; color:FFFFFF;text-decoration:none}
a:hover{border-bottom:1px dashed FFFFFF; font-family:arial; font-size:8pt; line-height:10pt; color:FFFFFF;}

{not used on profile}
a.readmail,a.readmail:link,a.readmail:active,a.readmail:visited{font-family:arial; font-size:8pt; line-height:10pt; text-decoration:none;color: ffffff;}
a.readmail:hover{font-family:arial; font-size:8pt; line-height:10pt; color:000000;border-bottom:1px dashed 000000; }

{ "View all friends" and "invite more" link style}
a.redlink,a.redlink:link,a.redlink:active,a.redlink:visited{font-family:arial; font-size:8pt;font-weight:bold;color:FFFFFF;text-decoration:none}
a.redlink:hover{font-family:arial; font-size:8pt; line-height:10pt; color:000000;border-bottom:1px dashed FFFFFF;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:arial; font-size:8pt;color:000000;text-decoration:none}
a.navbar:hover{font-family:arial; font-size:8pt; line-height:10pt; color:000000; border-bottom:1px dashed FFFFFF;}

{ TEXT FORMATTING
DEFAULT FONT, SIZE 8, BLACK }
{ btext used for "latest blog entry" and "USERNAME has * friends"}
.btext, .itext{font-family:arial;  font-size:8pt; line-height:10pt; color:000000;border:0px solid FFFFFF;}

{ DEFAULT FONT, SIZE 8, COLORS }
{unused on profile}
.bwtext, .rtext, .rbtext, .subhead{font-family:arial; color:000000;font-size:8pt;font-weight:bold;}

{ DEFAULT FONT, SIZE 8 }
{unused on profile}
.stext, .sbtext, .swtext{font-family:arial; color:000000;font-size:8pt;}

{ DEFAULT FONT, SIZE 11 }
{unused on profile}
.head11, .text11{font-family:arial; color:000000;font-size:8pt;}

{ TABLE COLORS }
{apparently unused?}
table.grey, tr.grey, td.grey{font-family:arial;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.white, tr.white, td.white{font-family:arial;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_light, tr.accent_light,
td.accent_light{font-family:arial;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_dark, tr.accent_dark,
td.accent_dark{font-family:arial;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.action, tr.action, td.action{font-family:arial;
font-size:8pt;background:transparent;border:0px solid FFFFFF; }
table.blue_light, tr.blue_light,
td.blue_light{font-family:arial;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.blue_dark, tr.blue_dark, td.blue_dark{font-family:arial;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}


{"Help" and "Signout" in very top in right corner}
a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:FFFFFF; text-decoration:none;}
a:hover{font-family:tahoma;
font-size:8pt;color:FFFF00; text-decoration:none;border-bottom:1px dashed FFFFFF;}
</style>
<style>
.titlebar {
color: FFFFFF;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color:;
background-image: url('http://img139.imageshack.us/img139/194/title9wo.png');
background-repeat:repeat;
text-align:center;}

.comments {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:left;}

.lyrics {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:justify;}

.blog {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:justify;}

.friends {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:justify;}
</style>
 
Relentless
post Feb 2 2006, 11:37 PM
Post #3


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
So you're saying I should make my main image and put it in a DIV and position it? Then position all the other div's?
 
freeflow
post Feb 2 2006, 11:46 PM
Post #4


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
Well no, You can do that. But I was talking about your div customation:
.titlebar {
color: FFFFFF;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color:;
background-image: url('http://img139.imageshack.us/img139/194/title9wo.png');
background-repeat:repeat;
text-align:center;}

.comments {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:left;}

.lyrics {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:justify;}

.blog {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:justify;}

.friends {
color: 000000;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color: transparent;
text-align:justify;}
</style>
you didn't have them in style tags. Thats what I meant to add styletags

But yes it would be smart to align your image in a div. If you can't get it to work in the main template.
But do you have the hide your profile code in there? Can you point it out? Because if you use the one in scripts you should have part of the code in about me & who'd I like to meet. Then under the divs it tells you to put in who'd I like to meet you put your iamge and it should come up the right size.
 
Relentless
post Feb 3 2006, 12:47 AM
Post #5


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
Oh yeah. I do have the style tags in that div class thing. I just put the style tags in my about me because I just took my code from my notepad and pasted it.

Anyway.. The hide profile I code I used was from here: http://www.createblog.com/forums/index.php?showtopic=87336.

I'll just show you my code I have right now: In about me


And in the "Who'd I like to meet":
 
freeflow
post Feb 3 2006, 10:06 AM
Post #6


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
A link to yur myspace may be more useful , but put your image between: "> and <td> </tr> </table> </DIV>

and what happens?
 
Relentless
post Feb 3 2006, 07:05 PM
Post #7


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
I did what you asked me to do. I put my whole image in a DIV and put 50%px to make it centered in the DIV. I also put <td> </tr> </table> </DIV> at the end of the DIV. But, it looks weird still. =X

This is the code for the whole image.


Oh yeah. My MS is here.
 
freeflow
post Feb 3 2006, 07:23 PM
Post #8


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
What happens when you change it to this:
CODE
<div class="lyrics" style="position: absolute; left:100px; top:150px; width:802px; height:568px; overflow: hidden;">
<center><img src="http://img139.imageshack.us/img139/5509/layout013nl.png"><br><img src="http://img139.imageshack.us/img139/6803/layout028zg.png"><br><img src="http://img503.imageshack.us/img503/5345/layout032br.png"><br><img src="http://img139.imageshack.us/img139/9895/layout047vq.png"></div>
<td> </tr> </table> </DIV>

?
 
Relentless
post Feb 3 2006, 07:52 PM
Post #9


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
Okay I submitted it, and now it's like blank. (x
 
freeflow
post Feb 3 2006, 08:49 PM
Post #10


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
How many divs do you have in the section you pasted that in? (who'd I like to meet)
 
Relentless
post Feb 3 2006, 09:30 PM
Post #11


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
None. I didn't put the DIV's in there yet because I wanted to get the image up first.
 
freeflow
post Feb 3 2006, 09:36 PM
Post #12


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
When I put the codes in I got this:
http://profile.myspace.com/index.cfm?fusea...iendID=19686661
 
Relentless
post Feb 3 2006, 09:44 PM
Post #13


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
Wahhh!?!? How'd you get that. Why wouldn't it show up on mine. ='[ It's all screwed up or something.

Can you tell me what's in you're about me & who'd i like to meet. So that, I can paste it in on mine and FINALLY can proceed the layout. (x

EDIT--

O m g. I found the problem, I had the DIV to "hide profile" script and it was in my interests. Not who'd I like to meet. Errgh, hate that thing, can't see who'd i like to meet link to edit. =X

So far.. this is right, right? In my Who'd I like to meet



EDIT AGAIN--

O m g. Yay! Finally. The image is up, 1 more question toyo. You noe the DIV's, am i suppose to put it in Who'd I like to meet or About me?
 
freeflow
post Feb 3 2006, 09:56 PM
Post #14


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
Sure I know its not really aligned but yea you can pretty much play with it after that. I didn't take your css code because I thought it was probably something in there messing with everything.

I just have the hide your profile code + your image. I would suggest doing your color coding , css LAST.

About me:
CODE
<style type="text/css"> .Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;} </style> <style type="text/css">.contactTable {display:none!important; border:0px !important;}</style><style type="text/css"> .hidethem {visibility:hidden; display:none;} </style>


Who'd I like to mee:
CODE
<DIV class="Main"> <table style="width:800px; height:600px; cellpadding:0px; cellspacing:0px; border:0px solid; background-color:ffffff;}"> <tr> <td valign="top"> <div class="lyrics" style="position: absolute; left:10px; top:150px; width:802px; height:568px; overflow: hidden;"> <center><img src="http://img139.imageshack.us/img139/5509/layout013nl.png"><br><img src="http://img139.imageshack.us/img139/6803/layout028zg.png"><br><img src="http://img503.imageshack.us/img503/5345/layout032br.png"><br><img src="http://img139.imageshack.us/img139/9895/layout047vq.png"></div> <td> </tr> </table> </DIV>



edit://divs go in who'd I like to meet.
 
Relentless
post Feb 3 2006, 10:01 PM
Post #15


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
O m g. Thank you so much Toyo! Not to trouble you some more but I got another question. =X

You know my code for the titlebar (<p class="titlebar">title</p>). Do I have to add "width:#px;" like for xanga. Or would myspace just make it the right size. I want to have it on each of my DIV's but the Div's are in different width sizes. So would myspace automatically make it the right size to fit in the DIV or am I suppose to make 1 class for each DIV and make the width numbers? Thanks so much, I appreciate the help. (=

CODE
.titlebar {
color: FFFFFF;
font: 8px arial;
font-weight: bold;
letter-spacing: 0px;
padding: 0px;
background-color:;
background-image: url('http://img139.imageshack.us/img139/194/title9wo.png');
background-repeat:repeat;
text-align:center;}


EDIT--

Nvm. I think Myspace makes the right size for the DIV on the titlebar. THANK YOU SO MUCH!
 
Chaos Bliss
post Feb 3 2006, 10:10 PM
Post #16


Senior Member
*****

Group: Member
Posts: 359
Joined: Feb 2005
Member No: 101,275
Not that you asked me, But they go out to whatever size the div width is ^_^, meaning you don't need to edit it.
 
Relentless
post Feb 3 2006, 10:32 PM
Post #17


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
Thanks CHAOS!
 
Relentless
post Feb 3 2006, 10:36 PM
Post #18


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
O M G. what AM I DOING WRONG !?!? It was just perfect, blank and the image. Then I had to go back and change things around because I couldn't see the Who I like to meet Link to edit. But now, I can see my profile on the side & my comments!!!
 
talcumpowder
post Feb 3 2006, 10:38 PM
Post #19


You'll find me in your dreams.
*******

Group: Official Member
Posts: 8,536
Joined: Mar 2005
Member No: 114,010
Change it back and use this. At least I think that's what you're talking about.
 
Relentless
post Feb 3 2006, 10:45 PM
Post #20


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
I'm already using that. I meant to go to Who I like to meet edit button. The Manual Edit only goes to "About me". I already changed it and got it to Liketomeet instead of 'aboutme'. How do I get rid of my profile on the side & comments. I`m using the hide comments, contact table, and all that hiding profile stuff but it's not working.
 
freeflow
post Feb 3 2006, 10:49 PM
Post #21


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
Before they started showing again did you add or change any codes?
 
Relentless
post Feb 3 2006, 10:53 PM
Post #22


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
Well, I think I changed something on the code to move around and stuff. This is odd, I took out the main image and I submitted it. Then, when I see my profile I see the profile on the side and the hide profile script.. which makes everything white down in the middle & the comments. Then I get to see half of my image. I think my Internet Explorer is screwing with me. =/ Been doing this for like hours and it's making me mad!

This is in my ABout me:


I'd like to meet:


Now if you go to my myspace: www.myspace.com/dizhomeboyy

You see comments/profile underneath the white big blank spot.
 
freeflow
post Feb 3 2006, 11:18 PM
Post #23


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
<div class="comments"><table><tr><td><table><tr><td> has to go at the end under all your images & divs.
 
Relentless
post Feb 3 2006, 11:41 PM
Post #24


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
Okay, I did. But the big blank white spot is gone. o.O I think I should just like ERASE EVERYTHING in my about me and all the other editable stuff. Which, might be easier. (x
 
freeflow
post Feb 3 2006, 11:51 PM
Post #25


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
Its up to you. Starting fresh is sometimes good.
 
Relentless
post Feb 4 2006, 12:21 AM
Post #26


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
O m g. Yay! I finally got it up. Now, the positioning part. How do you position it because since you have to edit then position then submit. Then you take a look at it if it's align. But that will take forever because I have 4 DIV"s to add on. Is there any other way to make it go faster?
 
freeflow
post Feb 4 2006, 12:22 AM
Post #27


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
Well some people use dreamweaver. To me it doesn't help as much b ecause sometimes your divs STILL become misaligned.

Have you been editing in safe mode?
 
Relentless
post Feb 4 2006, 12:27 AM
Post #28


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
No, I havent been editing in safe mode. =X Would that be a bad thing if I'm not? Also, how do people get to position on the right spot in IE & FF.
 
freeflow
post Feb 4 2006, 12:36 AM
Post #29


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
EDIT IN SAFEMODE NOW . _smile.gif
Its much easier you may not even have to use the manual submit or manual edit button if you do. If you don't it may be harder. But safemode or no safemode makes no difference.

Um the whole FF & IE thing just happens to me. Just try aligning it out and who knows it might just be aligned in both.
 
Relentless
post Feb 4 2006, 12:41 AM
Post #30


sang loves hayden.
*******

Group: Staff Alumni
Posts: 3,373
Joined: Feb 2004
Member No: 5,687
Thanks toyo. Gosh, you were such a great help to me on this dreadful myspace day. (x Oh yeah one thing, How do I make my div have a scrollbar?

My div is this:
<div class="lyrics" style="position: absolute; left:47px; top:133px; width:177px; height:348px; overflow: hidden;"></div>

EDIT --

Nevermind. I got it. (= Thank you so much, I swear. Made my day, been working on this thing for like a couple days and so frusterating compared to xanga. =/ Oh yeah Toyo, when I'm done can I PM you so that you can check out my myspace to see if it's align. It's because my internet is kind of screwed up and stuff and sometimes doesn't align right. Happens a lot in xanga. =X
 
freeflow
post Feb 4 2006, 12:24 PM
Post #31


t-t-t-toyaaa
********

Group: Official Member
Posts: 19,821
Joined: Apr 2004
Member No: 11,270
^ Ofcourse, My names toya by the way.
I guess you don't really need this anymore so I'll close it and if you need it again pm me.
 
« Next Oldest · Myspace Resolved Topics · Next Newest »
 

2 Pages V   1 2 >
Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic