JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Best 2 Column Width CSS - top left of home page

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.

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;}


<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.

0 members favorited this

Replies to This Discussion

Permalink Reply by HamiD on December 27, 2009 at 3:56pm

<div id="spotlight" class="space">can you show me a example here ?</div>

Permalink Reply by JenSocial on December 28, 2009 at 12:58pm

http://dreamers.marthastewart.com/

Happy Holidays,
Jen

Permalink Reply by Marcelo Ferreira on March 2, 2010 at 5:09pm

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:

Permalink Reply by JenSocial on March 2, 2010 at 5:19pm

Hi Marcelo,
I've not tried using flash with this method, only images. So I really don't know about that.
Sorry,
Jen

Permalink Reply by Carny Town on July 31, 2010 at 12:53pm

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.

Permalink Reply by Carny Town on July 31, 2010 at 1:13pm

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.

Permalink Reply by JenSocial on July 31, 2010 at 2:18pm

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

Permalink Reply by JenSocial on July 31, 2010 at 2:56pm

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

Permalink Reply by Mikes Designs on July 30, 2010 at 3:56am

please help me jen, this doesn't work for me, my image is still in the center and not across both text boxes,..

Permalink Reply by JenSocial on July 30, 2010 at 12:09pm

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

Permalink Reply by Mikes Designs on July 31, 2010 at 1:56am

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.

Permalink Reply by JenSocial on July 31, 2010 at 2:03am

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