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.

Tags: 2 column text box, 2 column width, 2 columns wide

Views: 765

Replies to This Discussion

<div id="spotlight" class="space">can you show me a example here ?</div>
I tried this method, inserting flash content. For some reason the image was reduced from width=741 height=200 to width=492 and height=132. Using the Developer tool from google chrome i was able to find these values:

Hi Marcelo,
I've not tried using flash with this method, only images. So I really don't know about that.
Sorry,
Jen
Worked for me. I adjusted the height to 360 (the size of my Animoto video...dropped the embed code (640 pixels wide) in where you had "image here" and used the code for the left text box as instructed (changing that to 360, also). So we know it works with swf embeds. I still have to colorize my backround to match the video, but I will do that a bit later.
OK. Now thats strange. It shows up at the right width and height as requested but when I sign out it reverts to the smaller width and height. I checked the CSS which seems correct and I feel that the html is correct, as well. Everything seems to match and the box is created ok. It is just my problem with the swf content. I will play with it some more...but better not use me as an example, just yet.
Don't worry Tom. That's normal on Ning. Anytime you just made changes, and sign-out, it takes about 20 minutes for the cache to catch up.
Best,
Jen
I take that back! 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
please help me jen, this doesn't work for me, my image is still in the center and not across both text boxes,..

Mike,
Did you put your special DIV in the left and in the right text boxes?
Provide all code you use and where you placed it, including the analytics box code. Be sure to add to a text file and upload here.
I'll take a look late tonight,
Jen
hi jen,

yes i put the div in both of the text boxes, i also put all the codes that was provided into the CSS, and i did the analytics, im going to do a lil screen cast so u can better understand,

Mike.
I can probably help better if you provide all code in a text file. Then, I can test on my test site, and see if I can see what's gone wrong.

It will probably be next week before I can look, since it's so late tonight and really busy this weekend on project deadlines.

Please remind me if I forget this - - about next Wednesday if I haven't looked yet.
Have a nice weekend,
Jen

RSS

Blog Posts

A Picture May Be Worth 1000 Members

Posted by Laura Occhipinti on September 20, 2014 at 7:51pm 1 Comment

Take pictures at EVERY event that you host for your group.  Do not…

Continue

Members

© 2014   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips