layour help!! Pretty please?, wont fix...arg.. Options

[ebonylaurels]

Ok I'm doing this for a freind because she's rather clueless. There is this layout she wants off of here except the blog wont align where it's suposed too. not sure why but it won't no matter what I've tried it just wont. Here's the code.

CODE

<!-- start code provided by createblog.com -->
<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='258,139,328,161' HREF='http://www.xanga.com' ALT='Xanga'>
<AREA SHAPE='rect' COORDS='362,140,422,159' HREF='http://www.xanga.com/private.aspx' ALT='Yours'>
<AREA SHAPE='rect' COORDS='457,140,537,162' HREF='http://www.xanga.com/private/subscribeto.aspx?user=YOURUSERNAME' ALT='Subscribe'>
<AREA SHAPE='rect' COORDS='287,174,359,195' HREF='http://www.xanga.com/guestbook.aspx?user=YOURUSERNAME' ALT='Guestbook'>
<AREA SHAPE='rect' COORDS='391,174,433,193' HREF='http://www.xanga.com/claf' ALT='Look & Feel'>
<AREA SHAPE='rect' COORDS='465,175,509,199' HREF='http://www.xanga.com/logout.aspx' ALT='Logout'>
</MAP>

<IMG SRC='http://images.cbimg6.com/xanga/32/7964.jpg' border=0 width=546 height=600 USEMAP='#imgmap'>

<div style="overflow: auto;
width: 225px;
height: 332px;
margin-top: -380px;
margin-left: 240px;">

<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:224px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<style type="text/css">
body {
background-image:url();
background-repeat: repeat-y-x;
background-color: #452106;}
div {
filter:chroma(color=#ffffff); /* here you are defining which color you want to be transparent in your scrollbars */

scrollbar-arrow-color: #452106;
scrollbar-face-color: #ffffff; /* transparent */
scrollbar-3dlight-color: #ffffff; /* transparent */
scrollbar-darkshadow-color: #ffffff; /* transparent */
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff; /* transparent */
cursor: crosshair;}
#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:200;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #452106;
text-align: justify;
padding: 0px;
margin-top: 2px;
}
hr{display:none;}
}
.caption, .blogheader {
width: 200px;
padding: 3px;
font-family: terminal;
font-size: 8pt;
text-align: center;
color: #452106;
background-color: #bf9c41;
text-transform: uppercase;
margin-top: 10px;
border: 1px solid #452106;}

P, B, I, TD, TH
{font-family: tahoma; color: #452106; font-size: 8pt; }

A:link, A:visited, A:active
{color: #452106; text-decoration:none; font-size:8pt;}

a:hover
{text-decoration: none; color: #452106; background-color: #bf9c41; font-size: 8pt; cursor: crosshair; );}
b, strong, i, u, {

/* edit colors when bold italic underline */
font-family: small fonts;
font-size: 6pt;
color: #452106;
font-weight: none;
text-transform: uppercase;
</style>
<!-- end code provided by createblog.com -->

[talcumpowder]

Is the alignment set to center and the width set to 100% (percent, not pixels)?

[ebonylaurels]

Yes to both. I tried changing the algnment and it got worse.

[*digital.fragrance*]

Put all of the image information into a div layer, and use the margins to align it.

[ebonylaurels]

umm...yeah...I don't know how to do that...

[talcumpowder]

It works fine in IE, so I get the impression that you use Firefox. True or false?

[ http://www.xanga.com/rhythmsicle ]

[ebonylaurels]

I use fire fox, but my friend who wants it uses IE and it isn't right on her's either.

[talcumpowder]

Resolution?

Because it's 1024 by 768. I didn't make any changes to the code, bisides a little cleaning.

[ebonylaurels]

it's still out of line when I look at it on that site. I don't know what her resolution is.

[*digital.fragrance*]

Like this:

CODE

<div style="overflow: auto;
margin-top: ##px;
margin-left: ##px;">

IMAGE STUFF HERE... URL, MAPPING...

</div>

[talcumpowder]

Again, it doesn't work in Firefox and I'm using 1024 by 768 resolution.


All I did was some minor cleaning to the code (merging the stylesheets and correcting some missing stuff) and add a </div tag into webstats.

[ebonylaurels]

ok I did the div thing and the entire layout cam apart litterally it's everywhere now...


It doesn't help me if it only works in IE or if you tell me the resolution. It's stupid to make a layout that is only goin to work for you on that specific computer.

I didn't make the layout I dont care if it's cleaned up or not. It's a layout off of here.

[*digital.fragrance*]

You have to fill in the ## with numbers.

Trust me, it will work for both - you just have to play with the number values.

[ebonylaurels]

I replaced them with the original numbers and that was WAY off. I've got it figured out now though thanks.

[*digital.fragrance*]

Would you like me to keep this topic open?

[talcumpowder]

Er, but I tested it on two computers. One is approximately 5yrs old and the one I normally use is new I didn't make the layout either..

And really, you could've just changed the numbers in the div.

CODE

<div style="overflow: auto; width: 225px; height: 332px; margin-top: -380px; margin-left: 240px;">

[ebonylaurels]

yes, because now that I'm moving the blog it's going under the picture instead of ontop of it.

[*digital.fragrance*]

^ try putting all of the <style> stuff ABOVE everything else.

make the image div layer and the other div layer the very last part of your code

[talcumpowder]

Put a </div> in webstats.

Actually, you might have to div the image too.

CODE

<div id="img">
<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='258,139,328,161' HREF='http://www.xanga.com' ALT='Xanga'>
<AREA SHAPE='rect' COORDS='362,140,422,159' HREF='http://www.xanga.com/private.aspx' ALT='Yours'>
<AREA SHAPE='rect' COORDS='457,140,537,162' HREF='http://www.xanga.com/private/subscribeto.aspx?user=YOURUSERNAME' ALT='Subscribe'>
<AREA SHAPE='rect' COORDS='287,174,359,195' HREF='http://www.xanga.com/guestbook.aspx?user=YOURUSERNAME' ALT='Guestbook'>
<AREA SHAPE='rect' COORDS='391,174,433,193' HREF='http://www.xanga.com/claf' ALT='Look & Feel'>
<AREA SHAPE='rect' COORDS='465,175,509,199' HREF='http://www.xanga.com/logout.aspx' ALT='Logout'>
</MAP>

<IMG SRC='http://images.cbimg6.com/xanga/32/7964.jpg' border=0 width=546 height=600 USEMAP='#imgmap'>
</div>

But you wouldn't really have to move it anywhere so margins wouldn't be nessecary.

[ebonylaurels]

It didn't change at all.

OH MY. Yeah that didn't work either. Go look: Screwed up

[talcumpowder]

.... I think you misunderstood what I said. Looks, use this as base:

CODE

<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:224px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
body {
background-image:url();
background-repeat: repeat-y-x;
background-color: #452106;}
div {
filter:chroma(color=#ffffff); /* here you are defining which color you want to be transparent in your scrollbars */

scrollbar-arrow-color: #452106;
scrollbar-face-color: #ffffff; /* transparent */
scrollbar-3dlight-color: #ffffff; /* transparent */
scrollbar-darkshadow-color: #ffffff; /* transparent */
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff; /* transparent */
cursor: crosshair;}
#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:200;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #452106;
text-align: justify;
padding: 0px;
margin-top: 2px;
}
hr{display:none;}
}
.caption, .blogheader {
width: 200px;
padding: 3px;
font-family: terminal;
font-size: 8pt;
text-align: center;
color: #452106;
background-color: #bf9c41;
text-transform: uppercase;
margin-top: 10px;
border: 1px solid #452106;}

P, B, I, TD, TH
{font-family: tahoma; color: #452106; font-size: 8pt; }

A:link, A:visited, A:active
{color: #452106; text-decoration:none; font-size:8pt;}

a:hover
{text-decoration: none; color: #452106; background-color: #bf9c41; font-size: 8pt; cursor: crosshair; );}
b, strong, i, u, {

/* edit colors when bold italic underline */
font-family: small fonts;
font-size: 6pt;
color: #452106;
font-weight: none;
text-transform: uppercase;}
</style>

<div id="img">
<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='258,139,328,161' HREF='http://www.xanga.com' ALT='Xanga'>
<AREA SHAPE='rect' COORDS='362,140,422,159' HREF='http://www.xanga.com/private.aspx' ALT='Yours'>
<AREA SHAPE='rect' COORDS='457,140,537,162' HREF='http://www.xanga.com/private/subscribeto.aspx?user=YOURUSERNAME' ALT='Subscribe'>
<AREA SHAPE='rect' COORDS='287,174,359,195' HREF='http://www.xanga.com/guestbook.aspx?user=YOURUSERNAME' ALT='Guestbook'>
<AREA SHAPE='rect' COORDS='391,174,433,193' HREF='http://www.xanga.com/claf' ALT='Look & Feel'>
<AREA SHAPE='rect' COORDS='465,175,509,199' HREF='http://www.xanga.com/logout.aspx' ALT='Logout'>
</MAP>
<IMG SRC='http://images.cbimg6.com/xanga/32/7964.jpg' border=0 width=546 height=600 USEMAP='#imgmap'>
</div>

<!-- this is what you're editing -->
<div style="overflow: auto; width: 225px; height: 332px; margin-top: -380px; margin-left: 240px;">

Put this in webstats:

CODE

</div>

[ebonylaurels]

ok did that. now the entries are ontop of each other and you can't read but part of the first one because its the only one on the light brown part and I can't move the dates they're staying off to the left and below everything else. ARG!!

[*digital.fragrance*]

can you post your current coding?

[ebonylaurels]

CODE

<!-- start code provided by createblog.com -->
<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:224px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<style type="text/css">
body {
background-image:url();
background-repeat: repeat-y-x;
background-color: #452106;}
div {
filter:chroma(color=#ffffff); /* here you are defining which color you want to be transparent in your scrollbars */

scrollbar-arrow-color: #452106;
scrollbar-face-color: #ffffff; /* transparent */
scrollbar-3dlight-color: #ffffff; /* transparent */
scrollbar-darkshadow-color: #ffffff; /* transparent */
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff; /* transparent */
cursor: crosshair;}
#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:200;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #452106;
text-align: justify;
padding: 3px;
margin-top: -500px;
margin-left: 275px
}
hr{display:none;}
}
.caption, .blogheader {
width: 200px;
padding: 3px;
font-family: terminal;
font-size: 8pt;
text-align: center;
color: #452106;
background-color: #bf9c41;
text-transform: uppercase;
margin-top: -200px;
margin-left: 275px;
border: 1px solid #452106;}

P, B, I, TD, TH
{font-family: tahoma; color: #452106; font-size: 8pt; }

A:link, A:visited, A:active
{color: #452106; text-decoration:none; font-size:8pt;}

a:hover
{text-decoration: none; color: #452106; background-color: #bf9c41; font-size: 8pt; cursor: crosshair; );}
b, strong, i, u, {

/* edit colors when bold italic underline */
font-family: small fonts;
font-size: 6pt;
color: #452106;
font-weight: none;
text-transform: uppercase;
</style>

<div style="overflow: auto;
width: 575px;
height: 332px;
margin-top: 75px;
margin-left: 100px;">

<div id="img">
<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='258,139,328,161' HREF='http://www.xanga.com' ALT='Xanga'>
<AREA SHAPE='rect' COORDS='362,140,422,159' HREF='http://www.xanga.com/private.aspx' ALT='Yours'>
<AREA SHAPE='rect' COORDS='457,140,537,162' HREF='http://www.xanga.com/private/subscribeto.aspx?user=YOURUSERNAME' ALT='Subscribe'>
<AREA SHAPE='rect' COORDS='287,174,359,195' HREF='http://www.xanga.com/guestbook.aspx?user=YOURUSERNAME' ALT='Guestbook'>
<AREA SHAPE='rect' COORDS='391,174,433,193' HREF='http://www.xanga.com/claf' ALT='Look & Feel'>
<AREA SHAPE='rect' COORDS='465,175,509,199' HREF='http://www.xanga.com/logout.aspx' ALT='Logout'>
</MAP>

<IMG SRC='http://images.cbimg6.com/xanga/32/7964.jpg' border=0 width=546 height=600 USEMAP='#imgmap'>
<!-- end code provided by createblog.com -->

and then the </div> in the webstats.

[*digital.fragrance*]

I think this part is doing it:

table.blogbody {
width:200;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #452106;
text-align: justify;
padding: 3px;
margin-top: -500px;
margin-left: 275px;

1. Get rid of that bolded text.

2. Place a </div> at the end of your code.


3. Place a div layer similiar to this one (that is above your image info) at the very end of your code. (After the </div>). And edit the numbers as necessary - this one controls where your blog is placed.

<div style="overflow: auto;
width: 575px;
height: 332px;
margin-top: 75px;
margin-left: 100px;">

4. You can get rid of the </div> in you webstats now.

All in all it should look like this:

CODE

<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:224px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<style type="text/css">
body {
background-image:url();
background-repeat: repeat-y-x;
background-color: #452106;}
div {
filter:chroma(color=#ffffff); /* here you are defining which color you want to be transparent in your scrollbars */

scrollbar-arrow-color: #452106;
scrollbar-face-color: #ffffff; /* transparent */
scrollbar-3dlight-color: #ffffff; /* transparent */
scrollbar-darkshadow-color: #ffffff; /* transparent */
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff; /* transparent */
cursor: crosshair;}
#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:200;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #452106;
text-align: justify;
padding: 3px;
}
hr{display:none;}
}
.caption, .blogheader {
width: 200px;
padding: 3px;
font-family: terminal;
font-size: 8pt;
text-align: center;
color: #452106;
background-color: #bf9c41;
text-transform: uppercase;
margin-top: -200px;
margin-left: 275px;
border: 1px solid #452106;}

P, B, I, TD, TH
{font-family: tahoma; color: #452106; font-size: 8pt; }

A:link, A:visited, A:active
{color: #452106; text-decoration:none; font-size:8pt;}

a:hover
{text-decoration: none; color: #452106; background-color: #bf9c41; font-size: 8pt; cursor: crosshair; );}
b, strong, i, u, {

/* edit colors when bold italic underline */
font-family: small fonts;
font-size: 6pt;
color: #452106;
font-weight: none;
text-transform: uppercase;
</style>

<div style="overflow: auto;
width: 575px;
height: 332px;
margin-top: 75px;
margin-left: 100px;">


<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='258,139,328,161' HREF='http://www.xanga.com' ALT='Xanga'>
<AREA SHAPE='rect' COORDS='362,140,422,159' HREF='http://www.xanga.com/private.aspx' ALT='Yours'>
<AREA SHAPE='rect' COORDS='457,140,537,162' HREF='http://www.xanga.com/private/subscribeto.aspx?user=YOURUSERNAME' ALT='Subscribe'>
<AREA SHAPE='rect' COORDS='287,174,359,195' HREF='http://www.xanga.com/guestbook.aspx?user=YOURUSERNAME' ALT='Guestbook'>
<AREA SHAPE='rect' COORDS='391,174,433,193' HREF='http://www.xanga.com/claf' ALT='Look & Feel'>
<AREA SHAPE='rect' COORDS='465,175,509,199' HREF='http://www.xanga.com/logout.aspx' ALT='Logout'>
</MAP>

<IMG SRC='http://images.cbimg6.com/xanga/32/7964.jpg' border=0 width=546 height=600 USEMAP='#imgmap'></div>

<div style="overflow: auto;
margin-top: ##px;
margin-left: ##px;">