Issue 23 Contextual Selectors
Last Post 08/22/2007 10:19 AM by Lee Sykes. 1 Replies.
Author Messages
lynn
Nuke Master
Nuke Master
Posts:276


--
08/21/2007 3:01 AM
    Hi Lee

    I have been looking at the coding of the skins in Issue 22.

    With regard to the skin for Andrea01, I was impressed by your efficent coding.

    In the skin.css (I will replace {} with () to enable viewing on the forum)

    /****** Header *****/
    #header (
    margin:5px 0 0;
    padding:0;
    )

    #header img (
    margin:0 0 5px;
    float:left;
    )

    #header p (
    width:400px;
    float:right;
    text-align:right;
    margin: 8px 15px 0 0;
    font-weight:bold;
    line-height:1.3em;
    )


    The xhtml for this section is:  (I will replace <> and [] with () for viewing purposes)

    (div id="header")
       (LOGO)
        (p)(USER)  (LOGIN)(/p)
        (p)(SEARCH)(/p) 
    (/div)


    I have previously achieved this by creating classes within the header div, a logo class and login class, thus creating two extra classes, when the same result could be achieved using contextual selectors as above.

    Whilst the above works well when inserting, a search, login or user skin object within the

    (div id="header")  (p) (dnn:LOGIN runat="server" id="dnnLOGIN"  /) (/p) (/div)

    Trying to use this efficient coding further, I tried to insert a content pane into the  (p) (/p) tags instead of login etc:

    (div id="header")  (p)(div runat="server" id="topInfo" /)(/p) (/div)

    It messed with the position, the right float jumped under the left float. Is there a way use this method for positioning content panes?


    Any suggestions.

    Lynn


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


    --
    08/22/2007 10:19 AM
    Hi Lynn,

    I can't take full credit for the coding, the main work was done by Andreas, I just followed the already created html / css code and adapted it to suit DNN.

    I'm unsure about the content panes question. - Browsers may not like you placing div tags inside p tags, I haven't tried it. - I would run your code through the W3C validator to see if it picks out any errors as a starting point.

    Let us know how you get on,

    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


    ---