can custom modules b used, with image mapping layouts? Options

[monkeygerl]

can it?.. cause i tried.. but it shows the image i made, an then on the bottom it has my modules

[avalon*]

yes but you'll need div layers =) to learn about div layers and how to use them, go to tutorials>>div layers. the first couple topics are the ones you'll need =P

[LatinaLady]

you can use it but you have to left the modules be visible asin not to remove them and then add the extra modules. show an image of what your trying to do

[monkeygerl]

this is my image :


i want to get the modules in that column on the left.. is it possible?
if so, can u give me a code for it?

[C.Lime.Jello.]

YES!
But ya hafta use div layers.
Go to the 'Tutorials' section. I think it's the first three or something.

[avalon*]

like i said. haha

but you'll need two separate div layers, one for the blog area, and one for the modules.

[monkeygerl]

oh ok thanks!!.. i dont know how to use it yet but i`ll give it a try! =]

[sweetxsimplicity]

Keep adjusting everthing in capitals until it fits.

CODE

<!-- begin code provided by createblog.com -->
<div style="margin-top: TOPpx; margin-left:
LEFTpx; width: WIDTHpx;overflow: auto; height:HEIGHTpx; background-color: transparent">
<!-- end code provided by createblog.com -->

[monkeygerl]

okay.. this isnt working.. someone tell me if my code is wrong, please..

CODE

<!-- begin code provided by createblog.com -->
overflow: auto
<!-- end code provided by createblog.com -->

<!-- begin code provided by createblog.com -->
<style type=text/css>
/* remove regular modules */
texttable.left, td.mainleft, table.left, table.navigation, table.search{display:none}
table.blogbody tr td {width:0px; padding: 0px;}

/* edit to your liking */
table.module { border: 1px solid #1EA0F3; width:210px; background-color:transparent; }
table.module th { background-color: transparent;font: bold 10px arial; text-transform: uppercase;color: #FFFFFF; border: none;}
table.module td {color: #000000; text-align: left; border: none; background-image: none; }
</style>

<!-- add this below all the CSS -->
<div id="info" style="position:absolute; width:190; height:200; z-index:0; left:10; top:20">
<table border=0 width="210"><tr><td valign="top" width="210">
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>sum infO</b></th></tr><tr><td valign="top" class="module">
<left><img src="http://p.xanga.com/USERNAME/profile.jpg"></left><p>
<b>tha name is vu.anh.. ima gerl[obviously] .. u shud get meh a present on may.22. i`m currently residing in tha 5o8x an getting an education at Doherty. i`m viet an alitto chinese. i LOVE goin ta Vietnam in tha summer ta visit mah frenz.. i love them ta death, they`re mah closest peepo.. I have tha best time when im wit them- no worries, no bull, only wonderful an hilarious times.. ya`ll can contact meh on a.i.m at xxvuanhxx or aznvgurlie.</b>

</td></tr></table><br>
</div>

<div id="chat" style="position:absolute; width:190; height:150; z-index:0; left:10; top:225">
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Leave a drOp</b></th></tr><tr><td valign="top" class="module">

<!-- Flooble chatterbox for xxvuanhxx start -->
<script language="javascript"> var chatterbox = 'no'; </script>
<script language="javascript" src="http://chatter.flooble.com/chatter.php?js=true&id=xxvuanhxx&sid=1714548">
</script><noscript>
<a href="http://chatter.flooble.com/chatter.php?id=xxvuanhxx&sid=1714548&popup=true&w=480&h=400"
target="flooblechatterbox"
onClick="window.open('about:blank','flooblechatterbox','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,re
izable=no,copyhistory=no,width=480,height=400');return true;">
<img src="http://img.flooble.com/images/chatter/chaticon.gif" border="0"
align="absbottom">Talk</a>
in my <a href="http://chatter.flooble.com/">flooble chatterbox, a free javascript chat tag board / shoutbox / tagboard program for your xanga, diary, blogger or weblog</a> |
<a href="http://perplexus.info/tree.php">puzzles, problems, riddles by category</a>
</noscript>
<script language="javascript"> if (!chatterbox || chatterbox != 'ok') {
document.write('This <a href="http://chatter.flooble.com/">flooble chatterbox</a> is');
document.write(' temporarily unavailable. It will be back up shortly.'); } </script>
<!-- Flooble chatterbox for xxvuanhxx end -->

</td></tr></table><br>
</div>

<div id="prev" style="position:absolute; width:190; height:150; z-index:0; left:10; top:380">
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Previous Layout</b></th></tr><tr><td valign="top" class="module">


<img src="http://img.photobucket.com/albums/v86/xxvuanhxx/prev.jpg">
</div>

<div id="credit" style="position:absolute; width:190; height:100; z-index:0; left:10; top:485">
<!-- Here's your CUSTOM MODULE.. copy and paste as needed -->
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Credits</b></th></tr><tr><td valign="top" class="module">

<b>brushes from miss m`s and vanilla designs</b>

</td></tr></table><br>
</div>
</td><td width="210" valign="top" align="left">
<!-- end code provided by createblog.com -->

[C.Lime.Jello.]

CODE

<!-- begin code provided by createblog.com -->

overflow: auto

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

What the heck is this doing floating around?

[monkeygerl]

CODE 
<!-- begin code provided by createblog.com -->

overflow: auto

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



What the heck is this doing floating around?

i wanted scrollbars for each module.. i have no clue if its rigfht or wrong.. i just went with to tutorial

[avalon*]

no no you need to take that out and add that overflow: auto into each div layer. not into the general code.

[C.Lime.Jello.]

Yeah.... Or you can use this ::

CODE

<!-- begin code provided by createblog.com -->

<style type="text/css">
table.module TD {
/* on your menu module, this edits the body part of it */
 background-image: url(None);
 background-color: #None;
 border: none;
 Overflow: auto;
 }
</style>

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

I think it works... Haven't had a chance to test it yet.

[monkeygerl]

ok.. so i tried a few things.. and none of them work.. heres the code.. if it helps

CODE

<!-- begin code provided by createblog.com -->
<style type=text/css>
/* remove regular modules */
texttable.left, td.mainleft, table.left, table.navigation, table.search{display:none}
table.blogbody tr td {width:0px; padding: 0px;}

/* edit to your liking */
table.module { border: 1px solid #1EA0F3; width:210px; background-color:transparent; }
table.module th { background-color: transparent;font: bold 10px arial; text-transform: uppercase;color: #FFFFFF; border: none;}
table.module td {color: #000000; text-align: left; border: none; background-image: none; }
</style>

<!-- add this below all the CSS -->
<div id="info" style="position:absolute; width:190; height:200; z-index:0; left:10; top:20";overflow:auto>
<table border=0 width="210"><tr><td valign="top" width="210">
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>sum infO</b></th></tr><tr><td valign="top" class="module">
<left><img src="http://p.xanga.com/xxvuanhxx/profile.jpg"></left><p>
<b>tha name is vu.anh.. ima gerl[obviously] .. u shud get meh a present on may.22. i`m currently residing in tha 5o8x an getting an education at Doherty. i`m viet an alitto chinese. i LOVE goin ta Vietnam in tha summer ta visit mah frenz.. i love them ta death, they`re mah closest peepo.. I have tha best time when im wit them- no worries, no bull, only wonderful an hilarious times.. ya`ll can contact meh on a.i.m at xxvuanhxx or aznvgurlie.</b>

</td></tr></table><br>
</div>

<div id="chat" style="position:absolute; width:190; height:150; z-index:0; left:10; top:225";overflow:auto>
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Leave a drOp</b></th></tr><tr><td valign="top" class="module">

<!-- Flooble chatterbox for xxvuanhxx start -->
<script language="javascript"> var chatterbox = 'no'; </script>
<script language="javascript" src="http://chatter.flooble.com/chatter.php?js=true&id=xxvuanhxx&sid=1714548">
</script><noscript>
<a href="http://chatter.flooble.com/chatter.php?id=xxvuanhxx&sid=1714548&popup=true&w=480&h=400"
target="flooblechatterbox"
onClick="window.open('about:blank','flooblechatterbox','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,re
izable=no,copyhistory=no,width=480,height=400');return true;">
<img src="http://img.flooble.com/images/chatter/chaticon.gif" border="0"
align="absbottom">Talk</a>
in my <a href="http://chatter.flooble.com/">flooble chatterbox, a free javascript chat tag board / shoutbox / tagboard program for your xanga, diary, blogger or weblog</a> |
<a href="http://perplexus.info/tree.php">puzzles, problems, riddles by category</a>
</noscript>
<script language="javascript"> if (!chatterbox || chatterbox != 'ok') {
document.write('This <a href="http://chatter.flooble.com/">flooble chatterbox</a> is');
document.write(' temporarily unavailable. It will be back up shortly.'); } </script>
<!-- Flooble chatterbox for xxvuanhxx end -->

</td></tr></table><br>
</div>

<div id="prev" style="position:absolute; width:190; height:150; z-index:0; left:10; top:380";overflow:auto>
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Previous Layout</b></th></tr><tr><td valign="top" class="module">


<img src="http://img.photobucket.com/albums/v86/xxvuanhxx/prev.jpg">
</div>

<div id="credit" style="position:absolute; width:190; height:100; z-index:0; left:10; top:485";overflow:auto>
<!-- Here's your CUSTOM MODULE.. copy and paste as needed -->
<table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b>Credits</b></th></tr><tr><td valign="top" class="module">

<b>brushes from miss m`s and vanilla designs</b>

</td></tr></table><br>
</div>
</td><td width="210" valign="top" align="left">
<!-- end code provided by createblog.com -->

i also tried putting this

CODE

<!-- begin code provided by createblog.com -->

<style type="text/css">
table.module TD {
/* on your menu module, this edits the body part of it */
background-image: url(None);
background-color: #None;
border: none;
Overflow: auto;
}
</style>

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

before that code and without the overflow:auto in each div layer.. still doesnt work..

[avalon*]

on your first code, where it says overflow: auto, you need to add this thing ;
the semi-colon. so it would go:

overflow: auto;>

[monkeygerl]

on your first code, where it says overflow: auto, you need to add this thing ;
the semi-colon. so it would go:

overflow: auto;>

still doesnt work.. =[

another problem, its not on my picture, it shows the image, then it shows the modules below it

[avalon*]

then your div layering is probably wrong. maybe check the tutorial again? if you don't get it, maybe you can pm someone or search google and find tutorials.

[C.Lime.Jello.]

Your modules are all supposed to be lined up, right?
Then you can just use ONE div for all of them

CODE

<!-- begin code provided by createblog.com -->

<style type="text/css">
table.left {
/* this edits the menu module */
 border: 1px dashed #008000;
 width: 160px;
 background-color: #Transparent;
 overflow: auto;
 }
</style>

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

Use that for the modules....
I think it should work.