Help with layout plz!, Dont want scrollbar! Options

[saigonese]

I made this layout which has the border included in the pic, so if I only uploaded the whole picture then the blog will need a scrollbar... But I dont want the scrollbar, so I thik I need to cut the whole picture into 3 parts, but I dont know where to cut and how to code! Help me plz, this is the whole thing (or just come to my xangaand take a look):

<!-- begin code provided by createblog.com -->
<!-- begin code provided by createblog.com -->
<style type='text/css'>

/* Skin3 by SaIgOnEsE */
/* www.xanga.com/saigonese */
/* please do not remove the credit */

</style>

<MAP NAME='Skin3'>
<AREA SHAPE=rect COORDS='503,9,590,20' HREF='http://www.xanga.com/saigonese' ALT='skin by SaIgOnEsE'>
<AREA SHAPE=rect COORDS='8,152,112,172' HREF='http://www.xanga.com/profile.aspx?user=saigonese' ALT='Profile'>
<AREA SHAPE=rect COORDS='125,152,236,174' HREF='http://xanga.com/private/home.aspx' ALT='Private'>
<AREA SHAPE=rect COORDS='246,152,356,172' HREF='http://www.xanga.com/claf' ALT='Claf'>
<AREA SHAPE=rect COORDS='365,152,472,172' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=saigonese' ALT='Subscribe'>
<AREA SHAPE=rect COORDS='485,153,595,171' HREF='http://www.xanga.com/Private/subs.aspx' ALT='Read Subscriptions'>
</MAP>
<IMG SRC='http://img370.imageshack.us/img370/9429/skin3copy7gf.jpg' width=600 height=557 BORDER='0' USEMAP='#Skin3'>

<div style="overflow: auto; width: 587px; height: 368px; margin-top: -377px; margin-left: -5px;">

<script language=javascript>
document.title=("Skin3")</script>

<style type='text/css'>

table.header, table.left, td.mainleft, table.navigation, table.search, #SearchBar1_pnlYouAreHere, table.footer TD {display: none;}

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

HR {color: #DCDCDC;}

table.announcements, table.announcements TH, .button, .textfield, .pulldown
{border: 1px solid #DCDCDC; }

body
div {filter:chroma(color=#589FE7); /* here you are defining which color you want to be transparent in your scrollbars */

scrollbar-arrow-color: #ffffff;
scrollbar-face-color: #589FE7; /* transparent */
scrollbar-3dlight-color: #589FE7; /* transparent */
scrollbar-darkshadow-color: #589FE7; /* transparent */
scrollbar-highlight-color: #fffFFF;
scrollbar-shadow-color: #fffFFF;
scrollbar-track-color: #589FE7; /* transparent */
}


.blogbody
{
background: none;
border-bottom: solid 1px #ffffff;
border-top: solid 0px #ffffff;
border-right: solid 0px #ffffff;
border-left: solid 0px #ffffff;}

input, option, select
{font-family: arial;
font-size:9pt;
color: #ffffff;
border: 1px dotted solid #DCDCDC;
background:#000000}

body, td, p
{color:#ffffff;
font-size: 8pt;
font-family: arial;
text-transform: none;
text-align:justify;}

a:link {color:#A3A3A3;font-size: 7pt}

a:visited {color:#A3A3A3;font-size: 7pt}

.title { color: #A3A3A3;font-size: 7pt}

a:hover {color:#707070;font-size: 7pt;}

div.blogheader, .caption
{letter-spacing: 0px;
text-transform: uppercase;
font-size:10px;
color: #ffffff;
line-height: 30px;
text-align: center;
font-style: bold;
margin-bottom:0px;
width: 100%;}

div.smalltext
{text-align: right;
background-color: transparent;
line-height: 50px;
width: 100%;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size: 7pt}


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

[OhXiet_ItzDonnA]

I had the same problem and I figured it out so I did something like this...

CODE

<img src="URL OF IMAGE><IMG SRC="URL OF IMAGE"><IMG SRC="URL OF IMAGE" BORDER='0' USEMAP='#Skin3'>

but if ur images are next to eachother, try adding <br> like this

CODE

<img src="URL OF IMAGE><br><IMG SRC="URL OF IMAGE"><br><IMG SRC="URL OF IMAGE" BORDER='0' USEMAP='#Skin3'>

So try those^^ after you cut the pictures.

Oh and make sure that the one that have the image maps. It should have something like this

<IMG SRC="URL OF IMAGE" BORDER='0' USEMAP='#Skin3'>

Hope I didnt confuse ya

[saigonese]

I had the same problem and I figured it out so I did something like this...

CODE

<img src="URL OF IMAGE><IMG SRC="URL OF IMAGE"><IMG SRC="URL OF IMAGE" BORDER='0' USEMAP='#Skin3'>

but if ur images are next to eachother, try adding <br> like this

CODE

<img src="URL OF IMAGE><br><IMG SRC="URL OF IMAGE"><br><IMG SRC="URL OF IMAGE" BORDER='0' USEMAP='#Skin3'>

So try those^^ after  you cut the pictures

So I basically need to cut the whole pic into 3 parts: Header, Blog, and Bottom... but then the bottom needs to be last and the Header first, leanving the Blog in the middle, right? Tried that, didnt work tho... I'll try this now and see...

[OhXiet_ItzDonnA]

yeah and if the blog part has the image maps, make sure it has this part

USEMAP='#Skin3'

or the name of ur image mappings so it can work

[saigonese]

I cut the image into 3 parts, came up with something like this:

<IMG SRC='http://img376.imageshack.us/img376/9135/skin3copyheader1fo.jpg' width=600 height=185 USEMAP='#Skin3'><br>
<IMG SRC='http://img368.imageshack.us/img368/1286/skin3copyblog5kp.jpg'><br>
<div style="overflow: none; width: 587px; height: 368px; margin-top: -377px; margin-left: -5px;">
<IMG SRC='http://img376.imageshack.us/img376/901/skin3copybottom8yn.jpg'>

Didnt work tho... the Bottom one appears right after the Header, while the Blog didnot expand as the whole entry goes, and the Header + Bottom have a blue border surrounded...

Cab someone help me plzzz!!!!

[saigonese]

I know, I know, I am breaking the rules by double posting, but I really need help on this... Plz can some one help me !!!

[talcumpowder]

Bottom one in webstats, blog set in CLAF. As your background image.

[saigonese]

Okie so I did that, set the Blog to be the background with the order: Centered, Don't Repeat, and Scroll with Page. The Bottom's now in Webstats. But then the Blog part doesnt expand as the whole entry goes (so when the entries are longer than the actual length of the Blog, the background color would show instead of the Blog image).

Um and the blue border around the Header is still there, surrounding the whole image..This is the whole thing (except the Blog and Bottom):

<!-- begin code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><style type='text/css'><br /><br />/* Skin3 by SaIgOnEsE */<br />/* www.xanga.com/saigonese */<br />/* please do not remove the credit */<br /><br /></style><br /><br /><MAP NAME='Skin3'><br /><AREA SHAPE=rect COORDS='503,9,590,20' HREF='http://www.xanga.com/saigonese' ALT='skin by SaIgOnEsE'><br /><AREA SHAPE=rect COORDS='8,152,112,172' HREF='http://www.xanga.com/profile.aspx?user=saigonese' ALT='Profile'><br /><AREA SHAPE=rect COORDS='125,152,236,174' HREF='http://xanga.com/private/home.aspx' ALT='Private'><br /><AREA SHAPE=rect COORDS='246,152,356,172' HREF='http://www.xanga.com/claf' ALT='Claf'><br /><AREA SHAPE=rect COORDS='365,152,472,172' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=saigonese' ALT='Subscribe'><br /><AREA SHAPE=rect COORDS='485,153,595,171' HREF='http://www.xanga.com/Private/subs.aspx' ALT='Read Subscriptions'><br /></MAP><br /><IMG SRC='http://img376.imageshack.us/img376/9135/skin3copyheader1fo.jpg' width=600 height=185 USEMAP='#Skin3'><br /><br /><div style="overflow: none; width: 587px; height: 368px; "> <br /><br /><script language=javascript><br />document.title=("Skin3")</script><br /><br /><style type='text/css'><br /><br />table.header, table.left, td.mainleft, table.navigation, table.search, #SearchBar1_pnlYouAreHere, table.footer TD {display: none;}<br /><br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops { width: auto !important; }<br /><br />HR {color: #DCDCDC;}<br /><br />table.announcements, table.announcements TH, .button, .textfield, .pulldown<br />{border: 1px solid #DCDCDC; }<br /><br />body <br />div {filter:chroma(color=#589FE7); /* here you are defining which color you want to be transparent in your scrollbars */<br /><br />scrollbar-arrow-color: #ffffff;<br />scrollbar-face-color: #589FE7; /* transparent */<br />scrollbar-3dlight-color: #589FE7; /* transparent */<br />scrollbar-darkshadow-color: #589FE7; /* transparent */<br />scrollbar-highlight-color: #fffFFF;<br />scrollbar-shadow-color: #fffFFF;<br />scrollbar-track-color: #589FE7; /* transparent */<br />}<br /><br /><br />.blogbody<br />{<br />background: none;<br />border-bottom: solid 1px #ffffff;<br />border-top: solid 0px #ffffff;<br />border-right: solid 0px #ffffff;<br />border-left: solid 0px #ffffff;}<br /><br />input, option, select <br />{font-family: arial;<br />font-size:9pt;<br />color: #ffffff;<br />border: 1px dotted solid #DCDCDC;<br />background:#000000}<br /><br />body, td, p <br />{color:#ffffff;<br />font-size: 8pt;<br />font-family: arial;<br />text-transform: none;<br />text-align:justify;}<br /><br />a:link {color:#A3A3A3;font-size: 7pt}<br /><br />a:visited {color:#A3A3A3;font-size: 7pt}<br /><br />.title { color: #A3A3A3;font-size: 7pt}<br /><br />a:hover {color:#707070;font-size: 7pt;}<br /><br />div.blogheader, .caption <br />{letter-spacing: 0px;<br />text-transform: uppercase;<br />font-size:10px;<br />color: #ffffff;<br />line-height: 30px;<br />text-align: center;<br />font-style: bold;<br />margin-bottom:0px;<br />width: 100%;}<br /><br />div.smalltext<br />{text-align: right;<br />background-color: transparent;<br />line-height: 50px;<br />width: 100%; <br />font-style:normal;<br />font-variant:normal;<br />font-weight:normal;<br />font-size: 7pt}<br /><br /><br /></style><br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com -->

But at least everything is in order now, just these two problems occur...
Helps are much appreciated

[talcumpowder]

Um.... Because you have to repeat it for it to legthen with the blog table.
Like... This layout.
[ http://www.xanga.com/home.aspx?user=n3ver_m0re ]
Do you see what I mean kinda?

[saigonese]

Um if u look closely at the top, at the back of the Ad is another piece of the background running through (and lies under the Header - main image)... See, in my case, if I have my Blog runs throught the Header, It'd look really weird since all 3 pieces are supposed to form one big image... I think I need a code that would set the Blog to be the background, but un expandable background which lengthens itself as the entries go (or sumthing like that)...

[talcumpowder]

I just do that because I'm lazy.
You're actually supposed to use it as the background for your div layer, which is supposed to be containing your blog. You can also position the image higher.

[saigonese]

I just do that because I'm lazy.
You're actually supposed to use it as the background for your div layer, which is supposed to be containing your blog. You can also position the image higher.

so um... how am I supposed to do that?... Can u help me with the code plz, I am really dumb when it comes to coding...

[talcumpowder]

.... ID your div and put the first one in your stylesheet or just add the second one into the div that's moving your blog. After the margins.

CODE

#IDHERE{background: #HEXCODE url("URLHERE") center center repeat fixed;}

background: #HEXCODE url("URLHERE") center center repeat fixed;