help in desigining the layout
Last Post 06/07/2009 3:12 AM by Lee Sykes. 3 Replies.
Author Messages
nagachaitu.net
Nuke Active Member
Nuke Active Member
Posts:22


--
05/28/2009 11:46 PM
    Hi,

    If you observe carefully the leftpanel of the image,half of the image is in some other color,and the lines that are prolonged

    for the entire panel,below is the html code i used.

    <div>

    <table width="100%" cellpadding="0" cellspacing="0" border="0">

    <tr>

    <td rowspan="2" id="leftpane" class="LeftPane" runat="server" visible="false" style="background:url(images/line1.GIF);background-repeat:repeat;">

    <div class="classtotal">

    <div class="leftpanelproperties">

    div>

    <div style="position: absolute; top:183px; left: 1px; z-index: 2; width: 100%;">div>

    div>

    td>

    <td rowspan="2" style="width:555px;border-right:solid 2px #ABB8BE;" id="contentpane" class="ContentPane" runat="server" visible="false">

    td>

    <td style="position:fixed;width:100px;height:25px; background-color:#B8D4DF;border-right:solid 2px white;" id="RightSubContentPaneOne" class="ContentPane" runat="server" visible="false">

    td>

    <td style="position:fixed;width:100px;height:25px; background-color:#B8D4DF;border-right:solid 2px #CFCFCF;" id="RightsubContentPanetwo" class="ContentPane" runat="server" visible="false">

    td>

    <td colspan="1" rowspan="2" id="rightpane" class="RightPane" runat="server" visible="false">

    <div class="rightpanelproperties">div>

    <div style="position: absolute; top:182px; right: 0px; z-index: 2; width: 100%;">div>

    td>

    tr>

    <tr>

    <td colspan="2" class="ContentPane" runat="server" visible="false" id="RightSubBottomContentPane" style="height: 28px;border-right:solid 2px #CFCFCF;">

    td>

    tr>

    <tr>

    <td colspan="5" id="bottompane" class="BottomPane" runat="server" visible="false" style="height:20px;bottom:0px;position:absolute;">

    td>

    tr>

    table>

    div>

    and the related css is as follows:

    .leftpanelproperties

    {

    position:absolute;

    top:160px;

    left:0px;

    margin:0px 0px 0px 0px;

    width:6.5%;

    height:57%;

    background-color:#8E9FA9;

    z-index: 1;

    }

    .rightpanelproperties

    {

    position:absolute;

    top:160px;

    right:0px;

    width:6.5%;

    height:57%;

    background-color:#8E9FA9;

    z-index: 1;

    }

    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    06/02/2009 10:46 AM
    Hello,

    It's hard to read through code when the forum removes tags. Could you attach all of your skin files as a zip file and I will then take a look. It's much easier to troubleshoot a skin when you can install it and look at it live.

    For your reference, I recommend you take a look at:
    Troubleshooting DotNetNuke Skins

    Thanks,
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    nagachaitu.net
    Nuke Active Member
    Nuke Active Member
    Posts:22


    --
    06/02/2009 11:57 PM
    Hi lee,

    I attached the skin zip,please go through it and help in solving that issue.
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    06/07/2009 3:12 AM
    Hello,

    I've spent quite a bt of time looking at the skin, because when I first loaded it, it threw errors:

    "The controls collection cannot be modified because the control contains code blocks (ie. ,< % ... % > ) - ->System.Web.HttpException.

    This is caused from placing the images directly within the table rows, when DNN converts it from a html file to a skin.ascx it places the < % = skinpath % > code at the front of the image URL which causes problems when it's placed inside tables.

    It is fine to place these inside div tags.

    I would suggest that instead of placing the images directly in the skin, you create a CSS class for the table row, and then in your CSS code set that class to have a background image. This should make it much easier to position the images and get them working as desired.

    Also, on another note, when creating a skin, you do not want to place in it the:

    html, body, or head tags

    These are not needed for a DNN skin as DotNetNuke already creates those outside the skin. - Adding a metatag to call in the skin.css in the .html file can cause problems, as DotNetNuke already does this automatically.


    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile


    ---