Skinning_For_DNN6x
Last Post 02/26/2012 9:01 AM by Joseph Craig. 12 Replies.
Author Messages Not Resolved
Pamela Blake
Nuke Active Member
Nuke Active Member
Posts:27


--
02/22/2012 10:00 PM
    Hi, I am following the Skinning_For_DNN6x tutorials. My content div is sitting above my header div. Do you know why that might be? And what do I do to fix it. I am going to try positioning it accurately in the css. However, you haven't done that in the tutorial. What do you think I may be doing wrong? Kind regards, Pam.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/22/2012 10:43 PM
    Pam,

    Without actually seeing it, it's hard to diagnose.

    First look at the HTML. If it is correct, look to the CSS next. It's more likely that you've missed something in the CSS.

    You should learn to use the "developer tools" that are in IE and Chrome, or that can be added to Firefox using Web Developers' Toolbar so that you can fiddle with CSS styles live to see how changes affect the page.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pamela Blake
    Nuke Active Member
    Nuke Active Member
    Posts:27


    --
    02/23/2012 2:39 PM
    Hi Joe, Thanks. I rebuilt the divs and css without the dnn tokens etc, just as coloured divs in html to see what was happening. I am trying to put 2 divs within the content area, so a contentpane div (on the left) and rightpane (on the right). This has worked. I realised what was happening that was throwing me off beam was that the content div that contains the two pane divs, if it is 100% height disappears behind the two pane divs which are a particular height and when that happens the infobar div and login div (which I have at the bottom of the page, infobar above the login div, rise up under the two pane divs. How do I stop that happening? Any suggestions would be gratefully excepted. The only way I can see to fix it is to make the content div a particular height, but that would not be practical over all the site pages, Pam.
    Pamela Blake
    Nuke Active Member
    Nuke Active Member
    Posts:27


    --
    02/23/2012 3:01 PM
    Hi Joe, this is the html:
      
     <body> 
      
     <div id="logobar">&#160;</div> 
      
     <div id="navbar">&#160;</div> 
      
     <div id="header">&#160;</div> 
      
     <div id="content">&#160; 
     	<div id="contentpane">&#160;</div> 
         <div id="rightpane">&#160;</div> 
      
     </div> 
      
     <div id="infobar">&#160;</div> 
      
     <div id="login">&#160;</div> 
      
     </body> 
    


    This is the css:

    body, #body, html {
    font-family:Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    width:100%;
    height: 100%;
    background-color:#FF9966;
    }

    #logobar{
    width:960px;
    height:100px;
    margin:auto;
    padding-top:20px;
    background-color:none;
    }

    #navbar{
    width:960px;
    height:45px;
    margin:auto;
    background-color:blue;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    }

    #header{
    width:960px;
    height:237px;
    margin:auto;
    background-color:#666;
    }

    #content{
    width:960px;
    min-height:510px;
    margin:auto;
    margin-bottom:10px;
    background-color:green;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    }

    #contentpane{
    width:595px;
    height:300px;
    float:left;
    background-color:#6CC;
    border-bottom-left-radius:10px;
    }

    #rightpane{
    width:355px;
    height:300px;
    float:right;
    background-color:#C69;
    border-bottom-right-radius:10px;
    }

    #infobar{
    width:960px;
    height:135px;
    margin:auto;
    background-color:#fff;
    border-radius:10px;
    margin-bottom:10px;
    }

    #login{
    width:960px;
    height:41px;
    margin:auto;
    background-color:#FC3;
    }

    I really appreciate your help, thank you from Oz! Pam.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/23/2012 3:48 PM
    I'm not sure that I'm seeing the problem.

    I would recommend clearing the floats after the content div.

    (Where, in the merry old land of Oz are you? I have a daughter who lives in Sydney ... and that's a long way away from the east coast of the good old USA ...)

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/23/2012 3:53 PM
    Thinking about this ... clearing the float should do the trick. One way of doing that and also making sure that those divs stay below the content div would be to add a div after content. Style it with clear:both and height:0.

    When you float the two panes, they are out of the normal DOM flow and, unless you do something else, the content div can't get a height because they aren't actually in the div. Thus, the divs below come up and the two panes float over them. (I think that's the right explanation but would love to be corrected if I'm wrong.)

    Note that putting in clearing divs as I have described is a common trick for controlling the behavior of html pages. That is ... I think it is a common trick ...

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pamela Blake
    Nuke Active Member
    Nuke Active Member
    Posts:27


    --
    02/23/2012 11:43 PM
    <div id="logobar">&#160;</div> 
      
     <div id="navbar">&#160;</div> 
      
     <div id="header">&#160;</div> 
      
     <div id="content">&#160; 
         <div id="contentpane">&#160;</div> 
         <div id="rightpane">&#160;</div> 
      
     </div> 
      
     <div id="infobar">&#160;</div> 
      
     <div id="login">&#160;</div>
    
    Pamela Blake
    Nuke Active Member
    Nuke Active Member
    Posts:27


    --
    02/24/2012 12:03 AM
    Hey Joe, I think it's working! On the html anyway. I'll now put the dnn tokens in etc and see how I go. I am on the Sunshine Coast, Queensland, about 1000kms north of Sydney (one of the beautiful cities of the world. No sunshine at the moment, we are in the subtropics and full-on into a subtropical rainy season! We have had to empty the swimming pool 5 times this week already ... Where are you in the US? I have been to California and New Mexico (which was stunning and amazing), we drove up the coast road from Santa Barbara to San Francisco. What a beautiful country you live in. We would love to go back and will one day. I will let you know how I go, 3 steps forward and 2 back all the time but it is fun. Thanks again for your time. Pam
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/24/2012 7:19 AM
    I'm glad things are working out.

    As for me, I live in Ellicott City, MD. That's between Washington, DC and Baltimore so we can claim to live in both areas.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/24/2012 2:08 PM
    You didn't say where in Queensland, and I know it's big ... but there is a DotNetNuke Users Group in Brisbane.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Pamela Blake
    Nuke Active Member
    Nuke Active Member
    Posts:27


    --
    02/24/2012 3:54 PM
    Hi Joe, I didn't know that. How do I get in touch with them? I am only 100kms north of Brisbane. My skin still isn't working, whilst it did work perfectly in the html, I cannot get it to behave in the site. The clearing div isn't clearing the content div, so now am just trying this and that in the css. The rightpane div wont float right and I don't understand that if my html and css is right, how come it just goes haywire when I upload it to the site? I don't get that.
    Pamela Blake
    Nuke Active Member
    Nuke Active Member
    Posts:27


    --
    02/24/2012 4:54 PM
    Hi Joe, Me! again. Well I found the users group, they now have 2 members, since I joined! I have given up and wrapped my divs in a table! That showed them. I know you would be horrified but a girl can only take so much. Stay tuned re my site. I have looked up Elliot city md on google and see that you are near (sort of) some famous battle grounds for the war of independence. I have a tiny bit of ancient briton dna in me (we came to Oz when I was 16yrs old) so have some understanding of trying to get rid of an oppressor, we tried to get rid of the Romans (didn't work!). Have a great day, kind regards, Pam.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    02/26/2012 9:01 AM
    Pam,

    I assume that you found: http://www.dotnetnuke.com/Community...d/172.aspx

    And they have a meeting in a few weeks. I even recognized a few names from the online community ...

    Joe Craig, Patapsco Research Group
    Complete DNN Support


    ---