Confused, Xanga related Options

[PimpMyXan_ga]

Okay, so I made this layout on Xanga. View it here for referance purposes

The problem is when I resize my browser the div's don't stay in place with the part of the image where it's supposed to be.

Can anyone help me with this problem? I know a lot of people have the same problem.

[talcumpowder]

There's very little you can do about the resizing issue.
-> Moved to Xanga Help.

[PimpMyXan_ga]

I'm sure there's something. I've seen others do it.

[talcumpowder]

Meh. Static positioning is about the best you can do, unless you have an example? Besides, it's better to be browser-compatible than worry about resizing issues.

[PimpMyXan_ga]

I figured it out!
AND It shouldn't interrupt browser compatibility issues nyah.

I'm going to post what I did for future reference if that's okay with you guys because I know many people have the same problems.

Okay, here is the code I was working with (should be similar to yours if you are having this problem):

<!-- begin code provided by createblog.com --><br /><br /><br /><!-- begin code --><br /><style type="text/css"><br />/*Spiderman*/<br />/*by TheDerekEffect1 or PimpMyXan_ga*/<br />body {<br />background-image:url();<br />background-repeat: repeat-y-x;<br />background-color: #000000;<br />scrollbar-face-color: #A10200;<br />scrollbar-shadow-color: #000000;<br />scrollbar-highlight-color: #000000;<br />scrollbar-3dlight-color: #000000;<br />scrollbar-darkshadow-color: #000000;<br />scrollbar-track-color: #000000;<br />scrollbar-arrow-color: #000000;<br />} <br /><br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; <br />}<br /><br />table.blogbody {<br />width: 340px;<br />font-family: Arial;<br />font-weight: none;<br />font-size: 12pt;<br />color: #ffffff;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />div.smalltext{<br />width: 300px;<br />padding: 3px;<br />text-align: left;<br />}<br />.caption, .blogheader {<br />width: 320px;<br />padding: 3px;<br />font-family: Arial;<br />font-size: 16pt;<br />text-align: center;<br />color: #A10200;<br />background-color: #;<br />text-transform: lowercaps;<br />margin-top: 10px;<br />}<br /><br />P, B, I, TD, TH <br />{font-family: FONT; color: #ffffff; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#A10200; text-decoration:none; font-size:8pt;}<br />a:hover<br />{text-decoration: underline; color:#ffffff; font-size: 8pt; );}<br />b, strong, i, u, {<br />/* edit colors when bold italic underline */<br />font-family: arial;<br />font-size: 8pt;<br />color: #A10200;<br />font-weight: bold; <br />text-transform: lowercaps;<br /></style><br /><br /><MAP NAME='imgmap'><br /><AREA SHAPE='rect' COORDS='381,351,475,362' HREF='http://www.xanga.com' ALT='Xanga'><br /><AREA SHAPE='rect' COORDS='380,369,469,379' HREF='http://www.xanga.com/signin.aspx' ALT='Sign In'><br /><AREA SHAPE='rect' COORDS='380,387,494,397' HREF='http://www.xanga.com/logout.aspx' ALT='Log Out'><br /><AREA SHAPE='rect' COORDS='377,402,527,412' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGAUSER' ALT='Subscribe'><br /><AREA SHAPE='rect' COORDS='583,350,745,359' HREF='http://www.xanga.com/claf' ALT='Look and Feel'><br /><AREA SHAPE='rect' COORDS='583,366,743,375' HREF='http://www.xanga.com/guestbook.aspx?user=YOURXANGAUSER' ALT='Guestbook'><br /><AREA SHAPE='rect' COORDS='625,382,741,393' HREF='http://www.xanga.com/private' ALT='Private'><br /><AREA SHAPE='rect' COORDS='548,399,744,409' HREF='http://www.xanga.com/Private/subs.aspx' ALT='Subscriptions'><br /></MAP><br /><br /><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'> <br /><br /><div style="overflow: auto; width: 302px; height: 305px; margin-top: -386px; margin-left: 402px;"> <b><FONT SIZE="3">About Me</font></b><br><br><FONT COLOR="#FFFFFF" size="1">Name: Peter Parker<br>Age: 20<br>Birthday: February 10, 1985<br>Hobbies: Photography<Br>Expertise: Science<Br><br> <br /><b><FONT SIZE="3">Favorite Links:</font></b><br><br> <a href="http://www.createblog.com">Createblog</a><br /><br> <a href="http://www.blogring">Blogring</a><Br><br /><a href="http://www.xanga.com/pimpmyxan_ga">Pimp My Xanga</a><br><br> <br /><b><FONT SIZE="3">Subscriptions:</font></b><br><br> <a href="http://www.xanga.com/USERNAME">Batman</a> <br><br><br /><b><FONT SIZE="3">CREDITS:</font></b><br><i>Please do not remove</i><br><br> <a href="http://www.xanga.com/PimpMyXan_ga">PimpMyXan_ga</a><br><br> </div><br /><br /><div style="<br />overflow: auto;<br />width: 386px;<br />height: 250px;<br />margin-top: -248px;<br />margin-left: -342px;"> <br /><br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><!-- end code  --><br /><br /><br /><!-- end code provided by createblog.com -->

The part that says "img src="whatever.jpg" is the part we have to change. This is the part where you put your background image.

Instead of putting a simple code for an image we're going to do this:

<!-- begin code provided by createblog.com --><br /><br /><br /><div style="height: #px"></div> <div align="left"> <div style="position:static; margin-left:-10px; margin-right:0px; margin-top:-192px;"><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'></div><br /><br /><br /><!-- end code provided by createblog.com -->

See what I did was put my background image in it's own div that hides behind the other two. And I gave it the div align=left code. Now, nothing moves!

You CAN do this simply by adding the div align="left" code before your normal div's. But what that does is keeps your div's in place as your background will move.

If you really need your image centered add this code at the very top of your coding:

<!-- begin code provided by createblog.com --><br /><br /><br /><center><br /><table><br /><tr><br /><td><br /><br /><br /><!-- end code provided by createblog.com -->

So, your new code should look something like this:

<!-- begin code provided by createblog.com --><br /><br /><br /><!-- begin code provided by createblog.com--><br /><br /><center><br /><table><br /><tr><br /><td><br /><style type="text/css"><br />/*Spiderman*/<br />/*by TheDerekEffect1 or PimpMyXan_ga*/<br />body {<br />background-image:url();<br />background-repeat: repeat-y-x;<br />background-color: #000000;<br />scrollbar-face-color: #A10200;<br />scrollbar-shadow-color: #000000;<br />scrollbar-highlight-color: #000000;<br />scrollbar-3dlight-color: #000000;<br />scrollbar-darkshadow-color: #000000;<br />scrollbar-track-color: #000000;<br />scrollbar-arrow-color: #000000;<br />}<br /><br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; <br />}<br /><br />table.blogbody {<br />width: 300px;<br />font-family: Arial;<br />font-weight: none;<br />font-size: 12pt;<br />color: #ffffff;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />div.smalltext{<br />width: 300px;<br />padding: 3px;<br />text-align: left;<br />}<br />.caption, .blogheader {<br />width: 320px;<br />padding: 3px;<br />font-family: Arial;<br />font-size: 16pt;<br />text-align: center;<br />color: #A10200;<br />background-color: #;<br />text-transform: lowercaps;<br />margin-top: 10px;<br />}<br /><br />P, B, I, TD, TH <br />{font-family: FONT; color: #ffffff; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#A10200; text-decoration:none; font-size:8pt;}<br />a:hover<br />{text-decoration: underline; color:#ffffff; font-size: 8pt; );}<br />b, strong, i, u, {<br />/* edit colors when bold italic underline */<br />font-family: arial;<br />font-size: 8pt;<br />color: #A10200;<br />font-weight: bold; <br />text-transform: lowercaps;<br /></style><br /><br /><MAP NAME='imgmap'><br /><AREA SHAPE='rect' COORDS='381,351,475,362' HREF='http://www.xanga.com' ALT='Xanga'><br /><AREA SHAPE='rect' COORDS='380,369,469,379' HREF='http://www.xanga.com/signin.aspx' ALT='Sign In'><br /><AREA SHAPE='rect' COORDS='380,387,494,397' HREF='http://www.xanga.com/logout.aspx' ALT='Log Out'><br /><AREA SHAPE='rect' COORDS='377,402,527,412' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGAUSER' ALT='Subscribe'><br /><AREA SHAPE='rect' COORDS='583,350,745,359' HREF='http://www.xanga.com/claf' ALT='Look and Feel'><br /><AREA SHAPE='rect' COORDS='583,366,743,375' HREF='http://www.xanga.com/guestbook.aspx?user=YOURXANGAUSER' ALT='Guestbook'><br /><AREA SHAPE='rect' COORDS='625,382,741,393' HREF='http://www.xanga.com/private' ALT='Private'><br /><AREA SHAPE='rect' COORDS='548,399,744,409' HREF='http://www.xanga.com/Private/subs.aspx' ALT='Subscriptions'><br /></MAP> <br /><br /><div style="height: 177px"></div><div align="left"> <div style="position:static; margin-left:-10px; margin-right:0px; margin-top:-192px;"><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'></div><br /><br /><div style="overflow: auto; width: 302px; height: 305px; margin-top: -386px; margin-left: 415px;"> <b><FONT SIZE="3">About Me</font></b><br><br><FONT COLOR="#FFFFFF" size="1">Name: Peter Parker<br>Age: 20<br>Birthday: February 10, 1985<br>Hobbies: Photography<Br>Expertise: Science<Br><br> <br /><b><FONT SIZE="3">Favorite Links:</font></b><br><br> <a href="http://www.createblog.com">Createblog</a><br /><br> <a href="http://www.blogring">Blogring</a><Br><br /><a href="http://www.xanga.com/pimpmyxan_ga">Pimp My Xanga</a><br><br> <br /><b><FONT SIZE="3">Subscriptions:</font></b><br><br> <a href="http://www.xanga.com/USERNAME">Batman</a> <br><br><br /><b><FONT SIZE="3">CREDITS:</font></b><br><i>Please do not remove</i><br><br> <a href="http://www.xanga.com/PimpMyXan_ga">PimpMyXan_ga</a><br><br> </div><br /><div style="overflow: auto; width: 386px; height: 250px; margin-top: -248px; margin-left: 1px;"><br /><br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><!-- end code provided by createblog.com --><br /><br /><br /><!-- end code provided by createblog.com -->

[ClaudelGFX]

Im not sure but i think i saw a similar layout on a XP Style Theme Suite,and btw the menu buttons are too blured,or you didnt arrange your layer style too good.can't seem to read them too well.

[Gypsy Eyes]

Meh. Static positioning is about the best you can do, unless you have an example? Besides, it's better to be browser-compatible than worry about resizing issues.

i agree, it's not something that can be fixed easily.

[PimpMyXan_ga]

Im not sure but i think i saw a similar layout on a XP Style Theme Suite,and btw the menu buttons are too blured,or you didnt arrange your layer style too good.can't seem to read them too well.

1) Show the layout to me and if someone had the same exact layout as mine, I will litterally quit Xanga all together. Considering, it took me like 5 hours to make that.

2) I'm trashing the layout all together. Too many problems with it. For one, you're right. The buttons are too blurry. Two, I have a much better layout in mind.

"i agree, it's not something that can be fixed easily."

But it can be fixed. As I stated above.

[talcumpowder]

I never said it would interupt browser issues. I said it was better to worry about that than resizing issues, because few resize their browser window while viewing pages.
What if I want it pushed to right? What if I want it at the bottom right-hand corner of the screen?
And.... Does it not work if you combine the align="left" into the rest of the code or something?

CODE

<div style="position:static; margin-left:-10px; margin-right:0px; margin-top:-192px;" align="left"><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'></div>

And what exactly does this do?

CODE

<div style="height: #px"></div>

And don't call me Nyah. Especially without capitalizing it.

[PimpMyXan_ga]

I never said it would interupt browser issues. I said it was better to worry about that than resizing issues, because few resize their browser window while viewing pages.
What if I want it pushed to right? What if I want it at the bottom right-hand corner of the screen?
And.... Does it not work if you combine the align="left" into the rest of the code or something?

CODE

<div style="position:static; margin-left:-10px; margin-right:0px; margin-top:-192px;" align="left"><IMG SRC='http://i23.photobucket.com/albums/b374/TheDerekEffect1/spideyblog2.jpg' border=0 width=750 height=900 USEMAP='#imgmap'></div>

And what exactly does this do?

CODE

<div style="height: #px"></div>

And don't call me Nyah. Especially without capitalizing it.

1) Align your table at the beginning to the right. This is all stuff you can figure out on your own if you have any HTML knowledge what-so-ever.
2) It puts your background in a div. I explained that already. I didn't even think about this but you could just change the div coordinates like the rest of your code without putting the table in there.
3) Not everyone keeps their browser maximized all the time. That's what I was worried about.
4) "Does it not work if you combine the align="left" into the rest of the code or something?" - As explained above (You really didn't read the side comments did you?), what happens is that the background is centered while the div's stay in place. Therefor when you resize the browser the background moves and the div's still dont stay aligned with the part of the background you want them on.
5) If you don't want to be called "Nyah", then don't make your screename "nyah-nek0". Common sense.

PS. My solution to the problem isnt intended for people who have everything aligned to the right. when aligned to the right it usually stays that way. its intended for people who have the problem that when resizing the browser (when its not maximized) the divs dont tend to stay aligned with the part of the background picture they want it on. either way by putting your background image into it's own div and putting an align=left code in it you can place anything wherever you want it on the page and nothing will move out of place.

It's just a helpful solution to a common problem. It's not meant to solve every problem you have with div's or backgrounds. If you STILL have a problem after doing this you may have to figure it out on your own but that's what i did to solve MY problem that many other people seem to have. I looked at other peoples coding in the skin database and they could benefit from it.

[talcumpowder]

..... Aligning the table to the right. Meh. Figures. So.... What about the bottom right hand corner?
How would it put your background in a div when it's empty? o-0 Are you talking about the actual background on the page or the main image?

4) "Does it not work if you combine the align="left" into the rest of the code or something?" - As explained above (You really didn't read the side comments did you?), what happens is that the background is centered while the div's stay in place. Therefor when you resize the browser the background moves and the div's still dont stay aligned with the part of the background you want them on.

Meh... I did. I just don't understand why you can't just add in div align="left" into all your divs. All I wanted was a yes or no. Meh.
And it's Nyah-chan. Not just Nyah. You don't know me well enough to leave the honorific off. =P If you must, then it's Reili. Gosh, why am I explainging this when it's in my sig?

[ClaudelGFX]

1) Show the layout to me and if someone had the same exact layout as mine, I will litterally quit Xanga all together. Considering, it took me like 5 hours to make that.

LoL! Dont get pissed now,ive said "WinXP Theme Suite" , not Xanga/MySpace or whateva' layout.
Relax.:) its cool anyway anyhow,you just need to move from you chair 2-3 steps back from your computer and take a good look what else you need to re-touch :P

[hi-C]

Well, since you've figured out how to fix it yourself, I'm just gonna close it now. If another mod sees otherwise, they can re-open it, or if you (the topic starter) want it re-opened, PM me.