Notice: Please do not try this, unless you feel comfortable tweaking CSS. It works very well, but you must follow each step, carefully. Advice: if you like and want this effect - - try it on a test site, then your Network.

TIP:
Ernie of Team Ning has shared the best 2 column width CSS I've seen, yet. This 2 column width text box only fills the area of the page, that you specify. The advantages of this particular method are:
  • Retains the normal module formats, below the 2 column width box.
  • Allows you to add via CSS, and a small block of script in Analytics Box.

You can see the perfect example here:
http://dreamers.marthastewart.com/
I will insert screen shot below.

2 column width


Follow Ernie's instructions (link below) to Add your Text Boxes.

Update - - as of July 31, 2010 utilize Ernie's instructions to understand how and where to add your text boxes. Please come back here and use ALL of the code below for: Left/Right Text Boxes, Advanced CSS, and Analytics Box.
http://developer.ning.com/notes/Creating_a_Two-Column_Wide_Module_w...

I use the following HTML in the text boxes, instead of the HTML in example, above. Basically, I found that adding DIV height, produced more reliable results.

PLEASE USE ALL CODE BELOW. SOME OF THE CODE IS MISSING FROM ERNIE'S TUTORIAL.

Left Text Box Content

<div id="space" style="height:364px!important;"></div>

Center Text Box Content
<div id="spotlight" class="space" style="height:364px!important;">your image goes here.</div>

Manage/Appearance/Advanced CSS Code
.space {height:364px;} /*Height of the Hero Area */
.module_text .xg_module_body {overflow:visible;}
#spotlight {margin-left:-245px;width:741px;}
#spotlight img, #spotlight embed, #spotlight object {padding:0;margin:0;max-width:741px;}
<!-- Analytics Box Code-->
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xg_layout_column_2").attr({_maxembedwidth: "741"});
}
</script>


Summary:

  • Follow Ernie's Example to add your 2 text boxes, and understand a little more about what you are trying to accomplish.
  • Come back here, and use the HTML above, for your text boxes. Adjust the DIV height to fit your image height. And BE SURE TO ADD THE ANALYTICS CODE ABOVE. As of July 31, 2010, it appears that the Analytics Code is no longer visible in Ernie's Tutorial.

Views: 1345

Replies to This Discussion

hi Jen,

here is the text file for you to look at for me,

thanks so much for all you help, I know your very busy so please take your time getting back to me,

Mike.
Attachments:
Just replace the CSS you placed in the Analytics box with the script above.
Sorry Mike, I had no idea that some of Ernie's code was missing.

Nice screen cast BTW! I would love to see the screen cast updated with the Analytics box code. hint, hint, LOL!

Best,
Jen
No wonder it wasn't working for you! Some of Ernie's code was missing - - the Analytics Box code. At least it is on my screen. I updated the tip above. Basically, grab the Analytics Box code above.
Best,
Jen
hi Jen,

I dont like to be a pain, but i tried the above codes and i still could not get it to work,

the image is still in the center and i been trying for hours,

i think it could be the way the image is being placed, is there a certain way i have to insert the image?

thanks for everything,

MIke.
It worked fine for me. Here's the one difference between my code and yours. Remove the paragraph tag around your image.
ok thanks im going to to try that now and see what happens
hey jen, i removed the tags, but nothing, here is what i have,

is this right?
Mike,
I did not find this CSS in your theme CSS.
/** Hero Box **/
.space {height:120px;} /*Height of the Hero Area */
.module_text .xg_module_body {overflow:visible;}
#spotlight {margin-left:-245px;width:741px;}
#spotlight img, #spotlight embed, #spotlight object {padding:0;margin:0;max-width:741px;}

However, and very IMPORTANT, even when I added the CSS via Firebug, it would not work. It only worked when I removed all of your Advanced CSS. So, I'm 99% sure you have an error in your CSS like a missing end bracket. }

Best,
Jen
P.S. Right this second you changed the code in center text box, and nothing will work regardless. Your code was fine in both text boxes and the Custom Code box. It's the CSS you need to check now.
hmm, thanks jen im going to look into this, your so very smart and cool, thanks! =]
here is my CSS but i didnt see and missing { } so maybe you can find something i cant,
Attachments:
I hope you find the error, and finally get this the way you want it. I'm working with a coding issue tonight, too. I know the frustration.
;-)

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips