Skinning Toolkit DotNetNuke Skin CSS Positioning

Today I am going to talk you through some of the steps implemented for positioning the skin content for the DotNetNuke Skinning Toolkit website.

The skin itself uses a mixture of floats and absolute positioning.

I will go through each of the elements that are on the page from top to bottom...

1) Logo: no positioning required as it is the first item on the page. - Just specified a width and padding.

2) Login Links uses:
{
position: absolute;
top: 3px;
right: 5px;
}

This allows the login links to be placed at the end of the source code but positioned at the top of the screen. If you resize the window, you will see that the login links always move position to the size of the window.

3) Horizontal Banner (468x60 at the top) uses:
{
position: absolute;
top: 30px;
left: 300px;
text-align: center;
width: 485px;
}
Again this uses absolute positioning. This allows the Horizontal Banner to be placed at the end of the source code but positioned at the top of the screen.

In this case though, note that when you re-size the window, the banner remains fixed in position so that it does not overlap the logo. - The banner is fixed in position by specifying the left position rather than the right position that we used for the login links.

4) Main Content (menu and text content) uses:

#mainbody
{
float: left;
width: 775px;
}
#content
{
float: right;
width: 600px;
padding: 0 5px 0 0;
}
#sidebar
{
float: left;
width: 157px;
}

Here we have used the float method to place the main content on the right and the menu on the left. We have specified the width in pixels rather than percentages. For this skin, the menu and content are fixed in position so that they fit into a 800x600 resolution screen. - If you view the 800x600 resolution you will see that you can view all of the main content, but to view the skyscraper ad on the right hand side you have to scroll across.

I thought this was the most convenient solution as I needed to incorporate images into the main content that were 590pixels wide. Most users for this website will not be using a 800x600 monitor as most visitors will be DotNetNuke designers / developers who generally use modern equipment, so I was not concerned that the skyscraper ad disappears for 800x600 users as the number of these users will be minimal.

Following the main content layout we then set the positioning for the skyscraper ad on the right hand side.

5) Skyscraper (600x120) right hand side uses:

#sidebar-2
{
position: absolute;
top: 100px;
left: 850px;
width: 125px;
}

Again we use absolute positioning here, for the same reasons as mentioned above. Here you will see that we have set the positioning from the left, meaning that when the window is made smaller to a 800x600 resolution, the skyscraper ad will disappear.

6) Underneath the main content and menu we then have the footer sections:

#footercontent
{
clear: both;
padding: 10px 10px 0 10px;
}
#footer
{
padding-top: 30px;
color: #1D6729;
}

Footer Content: allows us to add a module underneath the menu and content area which spans the full width (I do not use this content area currently, it was added for future possibilities. - You will see we clear the floats from the main content section)

Footer: Is the section that holds the copyright, terms etc. - This follows directly underneath the Footer Content and therefore does not need any positioning information.

- So that is the overview of how the content in the DotNetNuke Skinning Toolkit skin is positioned.


* * * * * * * * * *
DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 127 Videos & 5 MP3 Interviews

dotnetnuke