/    Sign up×
Community /Pin to ProfileBookmark

DIV Resizing HELP!!!

Okay, I am not a coder at all, as you will see with the following request for help!

Anyways, I have used a div layout to construct my myspace profile and have embedded or whatever a .swf file. The problem I am having is that due to my ignorance I have no idea how to make the site look as intended on different screen sizes, resolutions, browsers and keep from being rearranged when the browser window is restored down.

Okay, so here is my site:
[url]http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=230371305[/url]

And here is how it looks on my screen:
[url]http://img208.imageshack.us/my.php?image=examplezc1.png[/url]

This is how I would like for it to look like no matter what the users screen size, resolution, browser or window size is or at least as close to these goals as possible. I know that it won’t look right on netscape ect. but you know what I mean.

I will post my code below and if you can help please do so by editing my code in your response as again, I don’t understand much about coding. Sorry for the newbieness, hopefully someone can help as I have yet to find find a forum with someone that can, thanks for your time!

<style type=”text/css”>

body table {margin-top:-5000px;}
body td table, body div table {margin-top: 0;}
table, tr, td {background-color:transparent;}
body div table form{display:none;}
.navbar, div table td font {visibility:hidden !important;}

.comt {
background-color: ffffff;
background-repeat: repeat;
background-attachment: scroll;
background-position: top center;
position: absolute !important;
left: 50%;
margin-left: 10px;
top: 200px;
height: 487px;
width:500px;
border: 5px double maroon;
overflow: auto;
z-index: 1;
}

.content {
position:absolute !important;
top:235px;
margin-left:-243px;
}

.video {
position:absolute;
top:91px;
margin-left:-620px;
}

</style>

<div class=content>
<object type=”application/x-shockwave-flash” allowScriptAccess=”never” allowNetworking=”internal” height=”180″ width=”230″ data=”http://www.youtube.com/v/-0vA6FBq3ss&autoplay=1“>
<param name=”allowScriptAccess” value=”never” />
<param name=”allowNetworking” value=”internal” />
<param name=”movie” value=”http://www.youtube.com/v/-0vA6FBq3ss&autoplay=1” />
</object>
</div>

<div class=video>
<object type=”application/x-shockwave-flash” allowScriptAccess=”never” allowNetworking=”internal” height=”690″ width=”720″ data=”http://www.jquinnessential.com/whitesite3.swf“>
<param name=”allowScriptAccess” value=”never” />
<param name=”allowNetworking” value=”internal” />
<param name=”movie” value=”http://www.jquinnessential.com/whitesite3.swf” />
<param name=”wmode” value=”transparent” />
</object>
</div>

</td></tr></table></td></tr></table>
<div class=”comt”><table class=”off”><tr><td><table><tr><td></div>

<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;}

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelSep 03.2007 — I'm sure that nearly everyone has examined your post by now. The lack of follow-up is probably indicative of the level of code deprecation and I know that this is generally what places like 'myspace' make you use. -I can't even begin to get my head around the coding problems I saw here. Looks like a TABLE nested in a TABLE nested in another TABLE nested in a <TD> that itself is nested in a <TD>... Of course this [I]works[/I], -but it is surprising and very [I]10+ years ago[/I].. :o If I were using Win_98 with minimal RAM, the level of 'TABLE nesting' would have crashed the browser with "BSOD" ("Blue Screen Of Death") due to 'stack overflow' or some such anomoly particular to that OS when equiped with minimal RAM. :rolleyes:

See Screenshot: "warnings" are "minor errors" but some "warnings" are what I like to call 'page-busting [I]error-lites[/I]'...

Some of the CSS is 'invalid' and thus, -will only work on IE. Example:

.comt {

background-color: [B]ffffff[/B];[/QUOTE]


The missing "#" before the "background-color" value will make this color [I]not[/I] work on [I]compliant[/I] browsers (Opera, Fx, Mozilla, etc... any browser that is not IE).

Fortunately, these browsers will [I]probably[/I] just default to "white" anyway unless the home-user has their default background-color set to something else in which case, none of this matter... ?

[upl-file uuid=615e5119-b560-4b95-ad2c-7a7d43e4f6de size=23kB]ScreenHunter_2.gif[/upl-file]
Copy linkTweet thisAlerts:
@CentauriSep 04.2007 — I had a look at this previously, and shuddered at the page coding. When you have such limited access to the page code, and are forced to place your contents inside outdated, nested tables and do not have access to the head section to properly place css and apply valid doctypes etc, then trying to do what you want is doomed to failure. It is a credit to your ingenuity that you managed to achieve what you have. I would think that part of your problem is the absolute positioning of your divs, due to this taking the divs out of the document flow. If you can somehow identify and target the table the content is in, and set it's position to relative, then maybe your absolute positioning can be referenecd to this rather than the screen, but within that mess of coding I can't work out what tables are where..... , and without a doctype I'm not sure how successful this would be anyway.

Good luck, you're going to need it.
Copy linkTweet thisAlerts:
@JQuinnauthorSep 04.2007 — Hey guys, thanks for your comments, I was not sure if I was just being completely obscure or if no one knew how to help due to the lack of comments. Now I see that it is because the code I am using is, well in a word, ridiculous lol. I guess you can see that I wasn't joking when I said that I wasn't a coder. Anyways, knowing what I know now, I was hoping that someone could write some quick code to achieve the goal I am trying to achieve. It seems like it wouldn't be much work at all seeing as all I need to do is hide everything on the myspace profile except for the comments section and add the .swf file pictured. Do either of you think you could write some quick code that would achieve the look pictured in the link in my previous post? I would be extremely grateful and awed at your talent! Either way thanks for your comments.
Copy linkTweet thisAlerts:
@CentauriSep 04.2007 — I cannot see how you could acheive that when you don't have access to the whole page code - you need to change and insert info in the page head section, which as far as I am aware, is impossible with a Myspace page. Unless someone else has a method that would work, I'm out of ideas....
Copy linkTweet thisAlerts:
@JQuinnauthorSep 04.2007 — Hey Centauri, yeah hopefully someone will have a method, thanks anyways though. I just figured there was a way to do what I already did but do it in a more modern and cleaner way that would work with other browsers and resolutions. My uneducated and inexperienced brain would think that you would just need to use some simple code to make the default myspace profile disappear like I did and insert one big div with the comment table and .swf in it. I've seen this on other profiles, I will try to find one and post it and maybe you and others can get hints from their code as I wouldn't know what I'm looking at. I did however mess with my code and explained a little bit of what each bit of code does to my profile, whether or not it makes sense or should do what I say it does, it does. Maybe with the explanation it will give someone an idea on how to do this. Remember, all I want is for the flash file and youtube video to be centered next to the comment table.

<style type="text/css">




//This code makes the default profile dissappear//

body table {margin-top:-5000px;}

body td table, body div table {margin-top: 0;}

table, tr, td {background-color:transparent;}

body div table form{display:none;}

.navbar, div table td font {visibility:hidden !important;}




//This code customizes the Comment Box//

.comt {

background-color: ffffff;

background-repeat: repeat;

background-attachment: scroll;

background-position: top center;

position: absolute !important;

left: 50%;

margin-left: 10px;

top: 200px;

height: 487px;

width:500px;

border: 5px double maroon;

overflow: auto;

z-index: 1;

}




//This code affects the position of the YouTube video//

.content {

position:absolute !important;

top:235px;

margin-left:-243px;

}




//This code affects the position of the .swf file//

.video {

position:absolute;

top:91px;

margin-left:-620px;

}




</style>




//This code affects the YouTube video//

<div class=content>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="180" width="230" data="http://www.youtube.com/v/-0vA6FBq3ss&autoplay=1">

<param name="allowScriptAccess" value="never" />

<param name="allowNetworking" value="internal" />

<param name="movie" value="http://www.youtube.com/v/-0vA6FBq3ss&autoplay=1" />

</object>

</div>




//This code affects the .swf file//

<div class=video>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="690" width="720" data="http://www.jquinnessential.com/whitesite3.swf">

<param name="allowScriptAccess" value="never" />

<param name="allowNetworking" value="internal" />

<param name="movie" value="http://www.jquinnessential.com/whitesite3.swf" />

<param name="wmode" value="transparent" />

</object>

</div>




//This code keeps the new Comment Table from disappearing//

</td></tr></table></td></tr></table>

<div class="comt"><table class="off"><tr><td><table><tr><td></div>




//This code keeps the Top 8 from appearing in the new Comment Table//

<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;}
×

Success!

Help @JQuinn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...