Div Align trouble, can't align the div when resized Options

[wiredXecstacy]

Muh Xanga

Okay. So, it started out as a nice layout design and all, nice and simple, and now it's a nightmare. It looks fine when the window is full on a certain resolution, but once it's resized, the div layer with all the entries moves and is completely out of line. Lend me some help?

I'll give you a muffin. =]

[monkigurl77]

Can we see your code?

What kind of muffin?

[wiredXecstacy]

<style type="text/css">
body { background-image: url('http://img.photobucket.com/albums/v136/oddballish/1228.jpg'); background-repeat: no-repeat;

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


<div style="
overflow: auto;
width: 400px;
height: 275px;
margin-top: 175px;
margin-left: 10px;
overflow-x: hidden;
">

<style type="text/css">

.mainleft, table.footer, table.navigation, { display:none; }
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:400px;}


#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

body {
background-color: #fff;

table.blogbody {
width:400px;
font-family: Arial;
font-weight: none;
font-size: 8pt;
font-color: #ffffff;
text-align: justify;
padding: 0px;
margin-top: 2px;

}
div.smalltext{
width: 400px;
padding: 3px;
text-align: justify;
}
.caption, .blogheader {
width: 400px;
padding: 3px;
font-family: Arial;
font-size: 8pt;
text-align: justify;
color: #ffffff;
background-color:;
text-transform: lowercaps;
margin-top: 10px;
border-bottom: #ffffff 0px solid;
}

P, B, I, TD, TH
{font-family: Arial; color: #ffffff; font-size: 8pt; }
A:link, A:visited, A:active
{color:#ffffff; text-transform: lowercaps; font-size:8pt;}
a:hover
{text-decoration: none; color:#ffffff; font-size: 8pt;;}
b, strong, {
/* edit colors when bold italic underline */
font-family: arial;
font-size: 8pt;
color: #FF69B4;
font-weight: bold;
text-transform: lowercaps;
</style>
<!-- end code provided by createblog.com -->

<style type='text/css'>
.mainleft { display:none; }
</style>

<style type="text/css">
table.footer { display:none; }
</style>

<style type="text/css">
hr {display:none;}
</style>

<style type="text/css">
div {
filter:chroma(color=#00FF00);
scrollbar-arrow-color: #000000;
scrollbar-face-color: #00FF00;
scrollbar-3dlight-color: #00FF00;
scrollbar-darkshadow-color: #00FF00;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #00FF00;
}
</style>

Keep in mind that erm..yea. I stink at this HTML/CSS thing on Xanga. Freestyle, I'm fine..sort of. Haha. Decent. >< I dont' like div.

Blueberry? 0=]

[Yunoa]

try adding "position:static;" to your div code (remember to take out the quotation marks first ). um i hope that helps...

[wiredXecstacy]

Replacing "background-attachment: fixed" with "position: static" makes it so that the background image and the div remain in the same position even when the window is resized.

BUT when trying to position the div with "margin-top: XX px", this causes the background image to move too. Trying to align the div within the image is impossible because as I move the div up or down to fit it into the background, the background itself moves too so that in the end the background ends up at the top, covered over by the xanga banner.

Any way to set the background position by px like the div or is left/right/center/top/bottom the only options??

[largosama]

set xanga to left align and position the div from there. keep the image as background, not as a <img src

advice these days