Hello,

The The DNN creative skin has been optimised for a screen resolution of 1024x768 because from the stats on the website the majority of the visitors to DNN creative have a screen resolution of 1024 or larger.

If you have a screen resolution of 800x600 and view the DNN creative skin, you will see that the content panes display correctly and shrink to the 800 x 600 view, however you will notice that the menu is slightly wider than 800 pixels and the news item can only be viewed by scrolling horizontally across.

You'll also notice that the top horizontal banner is wider than the 800 pixels view and to view all of the banner you need to scroll across.

It's the horizontal banner and the menu that are causing the white space when you scroll across to the right. If you remove the horizontal banner and reduce the number of items in the menu the skin will display okay at 800 x 600.

Because there are so few people that have a screen resolution of 800 x 600 who are actually viewing the DNN creative website, I thought that making sure the content area displayed okay without scrolling horizontally would be okay for that small number of users.

If you design your skin as outlined in the tutorial your skins should display okay at 800 x 600 as long as you do not add elements such as a horizontal banner that force the skin to be wider than 800 pixels.

Thanks,

I just watched this tutorial last nite and it answered all my questions i had how to build a site and css.


Using absolute positioning is the way to go.

Thank you lee.  That tutorial taught me what no book would do. I read a few they all use tables and build the DNN skin all over again when the idea of skinning a site is to make a new skin because the old doesnt work with one wants to do.

great, the pure CSS SEO layouts are really powerful for improving Google results - I haven't come across other people using the techniques I have worked out in that tutorial, so have fun building and getting good SEO results! ;-)

Lee,

I have been working with the tutorial so that I can have a baseline to start with when building my skins. However I noticed something interesting in the mainbody, content, and side bar area.

I went ahead and left the orange border so that I could see what was going on as I build my stuff and I noticed that the mainbody doesn't wrap around sidebar-2 like it does the sidebar and content.  (See attached)

Is this by design on how DIV tags and CSS work together in order to get a three column approach?

Also on a side note because I am still somewhat new to making skins. What is the best approach to make the skin fixed width using this method?

Thanks,

Doug B

Hello,

Good questions, if you look at the CSS code you will see that the method we use for creating the three pane layout is to float the main body div to the left and Sidebar two is floating to the right.

This is how we have managed to reorder the source code so that the content pane appears at the beginning of the source code for SEO.

To transform the skin into a fixed width there are several methods, you will probably be able to add a div around the full skin and then specify that to a fixed width using code such as from Andreas 01

#wrap {
background:#ffffff;
color:#404040;
margin:0 auto;
width:760px;
}


look at -  margin:0 auto;

the auto setting on the left and right margins centers the skin and the

width:760px;

fixes the overall Width of the skin.

It will be worth having a look at the source code of the Andreas 01 to see how this is achieved.

Hope this helps, thanks,

Thanks for the answer, however it raises another question...

You stated the #wrap doesn't work in all browsers so would this be a reliable way to control the size of your skin for fixed width.

Also on a side note when trying to place a background images within the skin using the CSS it would never display. I figured it was path related but everything is in check out.

I have a Image folder in my skin directory that has contains the image and I am calling it via background-image: url(image/image_name.gif);. This is how I have seen other skins preform the same thing. When researching this I noticed someone else had a same problem on the forums but you had suggested checking the path. However its not the path in my case there seems to be something else causing it.

Doug

Hello,

Where did I say #wrap was not reliable? Was it in the video? I'm not sure what I was referring to.

I have used that method in various skins and it works ok in the various browsers. I don't have a link I can publish in the forum, but if you email me I can send you a link to a site I am currently buiding for a client where you can copy the CSS code from.

Regarding background images, make sure nothing else is covering up the background image. - The dark blue behind the skin is a background image gradient, so you should be able to copy the method from there.

Remember, if you are using the web developer toolbar, it removes background images when you go to css menu / edit.

Thanks,

Sorry I miss spoke. Within the #wrap you stated the min-width was not compatible with all browsers.

I will shoot you an email shortly regarding checking out what your working on.

Concerning the background image it must be the developer toolbar because I was using it to edit the CSS before editing the main file. I though I was going crazy there for a second...

Doug

Thanks for the email, I've sent a link.

min-width is not available to all browsers, but for fixed width skins, you just specify width in the#wrap - so it fixes the width.

the andreas01 skin CSS code as mentioned above should provide an example, thanks,

Well after toying with it some more it was defiantly the Web Developer toolbar causing the issue.

Thanks for sending the link it is a very nice skin your working on. Of course everything leads to another question, guess that's how we learn.

I noticed once I change my skin to a fixed width that the page aligns left. Loosing the center alignment, I have noticed this problem on a lot of sites in my journeys online. I was examining your code to see how you were resolving this, however I didn't notice anything that stood out.

Is there something in particular I should be looking for on how to resolve this, because if memory serves me correctly this is a default behavior in IE  but not FireFox. None the less it is preforming this result in both browsers.

Doug

hello,

If you look at the code I posted above, this is what you need:

#wrap {
background:#ffffff;
color:#404040;
margin:0 auto;
width:760px;
}


look at -  margin:0 auto;

the auto setting on the left and right margins centers the skin (should be ok in all browsers) and the

width:760px;

fixes the overall Width of the skin.

Thanks,

Hmmm,

Little things that make a huge difference, any way this is rendering fine in FireFox. Internet Explorer is another issue all together , it seems to want to stay left justified in IE. IS this on of those hacks I have read some much about regarding how IE interprets things?

Doug

Hello,

I am not using any hacks to get this working, which version of IE are you checking in?

Do you see the same problem in the skin I gave an example of?

You are right that the little things do make a huge difference and there will probably be something small in the code causing the problem. I would have a good look at the Andreas 01 skin code as examples as well.

Thanks,

Lee,

I will look deeper into Andreas to see if i can come up with something. Concerning behavior it does this on IE7 and 8, I currently don't have an IE6 box to test this on to see if it does the same thing.

Also your example renders fine on both platforms.

FYI here is my code:

CSS


body, tr, td, table
{
    /* Set default font size for skin (Title etc. will use a percentage to specify their values) */
    margin: 0 auto; /* Control Panel will center on the page - FireFox */
    padding: 0;
    line-height: 1.1;
    color: #666;
    background-color: #333333
  
}


#wrap
{
    width: 975px; /* Sets the maximum width of the skin to 975px */
    background-color: #fff;
    margin: 0 auto; /* All content below the Control Panel will center on the page - FireFox */
    border: 3px solid #000000;
}

.ControlPanel
{
    width: 975px;
}


#contentholder
{
    background-image: url(images\eufaula bricks.gif);
    background-image: repeat-x;
    background-position: center;
    padding: 10px, 5px, 10px,10px;
}

#mainbody
{
    float: left;
    width: 76.7%;
    border: 1px solid orange
}

#content
{
    float: right;
    width: 74.3%;
    border: 1px solid orange;
   
}

#dnn_contentpane
{
    padding: 10px;
    background-color: #ccc;
}

#sidebar
{
    float: left;
    width: 24%;
    border: 1px solid orange;
}

#dnn_leftpane
{
    padding: 10px;
    background-color: #ccc;
}

#sidebar-2
{
    float: right;
    width: 22%;
    border: 1px solid orange;
}

#dnn_rightpane
{
    padding: 10px;
    background-color: #ccc;
}

#footercontent
{
    clear:both;
    padding: 10px 0 0 0;
}

Hello,

From first glance the CSS code looks ok, if you want to attach all of your skin files in a zip file to your forum post I can take a closer look, thanks,

Thank you..

I have the skin attached

Lee,

Just checking to see if you had time to look this over..

Thanks

Hello,

Apologies for the delay, I have been trying to get the videos recorded for the next issue over the past few days.

This took a bit of finding, but I have fixed it and the skin is attached.

You had a few errors in the CSS code, which I fixed and have added comments to. But, your main error was your doctype xml file was incorrectly named to match your skin, so IE was not using the transitional doc type and was therefore displaying everything incorrectly.

Lee,

Thank you for taking the time to look at this for me. I finially got back around to this project as was able to check things out.

I see some of my mistakes were self induced and thanks for fixing them. However I am still having an issue with that darn background image. The background image should fill the white area in the content pane except for the Control Panel area. This is not the case currently, but everything looks as if it should be working.

Here is the URL of the testing box if you wish to see the results.

Thanks,
Doug

Hello,

I had another look at the code that I uploaded and made the following change:

background-image: url(Images/Eufaula_Bricks.gif);

I removed the space in the image name and replaced with an _

I also formatted the text in the CSS to match the capitalization of the gif file name

Thanks,

Lee,

I give people great respect when it comes to skinning a website, because this is very convoluted to say the least.

It appears that the background doesn't render in IE8 but it will in IE7, however it will not repeat. Firefox without the web developer toolbar will not render the background as well. Is this because I havent added the added code for IE workarounds yet?

I feel like I'm going crazy because this should be cut and dry but its more like torn and wet...

If you are looking for a good CSS, fixed-width, layout baseline to start with, I suggest this website:

http://www.adammer.com/dnn/skins/

There is a cost involved, but I believe it's well worth it. Adammer skins were developed not only to consider cross-browser compatibility, but also were developed to consider handicap accessibility.

can you attach your new skin code and I will have a look.

When using the web developer toolbar it does not display background images, you have to edit the skin.css direct and refresh the page to check any changes.

Lee,

I guess what you uploaded didnt take because it was the same stuff without the changes. I made the changes you said and the picture will display in all browsers now. Still no repeat x in any of them.

Why was the space in the file name causing a problem and or the case.

Doug

not sure, spacing and case is something I have been aware of since problems with browsers in the late 1990s, I have just carried on the habit of avoiding spacing in file names still from the 90s so I guess it is still something to avoid.

You will notice in urls that spaces are usually replaced with %20% so I would regard it as a best practice to use a hyphen or _ when naming images that you are going to use in a skin.


Attach your skin with all code and images and I will have a look at the repeat-x

Hope this helps, thanks,

Sorry,

The file is attached...

Doug

Hello,

Looking at the skin, do you wish to tile the brick image across the entire content section?

To do that you need to repeat the image vertically, repeat-x repeats the image horizontally, so you also need to repeat it vertically (repeat-y) - to do both just state: repeat.


background-image: url(Images/Eufaula_Bricks.gif);
background-repeat: repeat;

In FF and IE7 this displays in my test across the full content area, I have not checked IE8 but it should be ok if FF and IE7 display.

Lee, Thanks for the help, chalk it up to not paying attention. Got it working and moving forward now.