Custom Dotnetnuke (DNN) Skin Design

Centering content in modules

Location: DotNetNuke
 

Recently I had an enquiry into one of my container packs not centering content properly.

The Glossy Titles Version 4 containers are almost completely css based with only one table being used for the content pane. It turns out that the table was not 100% wide, and therefore when the content was aligned to the center using the settings in the module options, which adds a css class style of text-align:center, there was no effect because the containing element (the table cell) was collapsed. So having fixed the issue of the table not being 100% wide, I tested the containers on other browsers, to discover that the alignment doesn't work for firefox, opera, navigator, or safari.

The reason for this is that these browsers don't use the text-align css styles to align box elements like divs, tables and forms. To achieve centering for these items, which will work for many of the standard modules (I've tested it on the login, feedback and others), you will need to target the box elements using css, and give them a margin setting of "0 auto", this will align them to the center of the container.

.DNNAligncenter table{
margin:0 auto;
}

 

If you are using Glossy Titles v4.0 the files on snowcovered has been updated with the new .zip for you to download.

Your name:
Title:
Comment:
Add Comment    Cancel  

Rhoek.com's design blog focuses on web design and dotnetnuke skin design.

We've been designing and developing websites and custom/template dotnetnuke skins since 2003 and have experience in X/HTML, CSS, javascript, DNN skinning, XML, XSLT, accessibility, usability, email design and building, and Search Engine Optimisation.

Login
08 September 2008