skin objects and the css block model
Last Post 08/28/2010 11:29 AM by Joseph Craig. 1 Replies.
Author Messages
Bo
Nuke Master
Nuke Master
Posts:215


--
08/25/2010 12:20 PM  
Hello There, My question is in regards to using CSS styles like margin-top and margin-bottom to style the skin objects. In my situation I have a footer with a copyright notice to the far right in the footer area. The way I have structured this is to use div tags that float to the left inside a larger div tag container which gives me full flexibility using such css attributes as margin-top since a div tag is a block level elemnt. My problem is I am able to move the top margin or padding of all my footer content except the copyright info which is generated dynamically via the copyright skin object and populated via admin>sitesettings in dotnetnuke. What I am guessing is the problem is that the dynamically driven copyright info executed at runtime of the dnn application generates a span tag (an inline object) however this span tag is still encapsulated within a div tag that floats to the left which surrounds it. I can float this copyright info, style it in regards to color, font-weight, even adjust the right and left padding or margin of the text but for some reason even though I am adjusting the div tag id that encapsulates this skin object I still have no success adjusting the top margin even using a positive integar to bring the words down a little bit. This is needed because on this same footer my client wants a logo that is larger than the text that proceeds it and the text proceeding it must be flush with the middle of this logo not the top of it so I figured I could use a margin-top or padding-top css property. This worked great with the rest of the footer including the logo which was a hard coded img tag encapsulated in a div tag but this dnn copyright skin object no matter what I do does not want to allow me to invoke the margin-top property of css. I don't know if it is do to the fact that there is a runat="server" attribute in this tag and if that causes the top and bottom part of a block elment box model to go bonkers when a runat property is encapsulated within a div tag or if it is something else but if you have any ideas of what could be causing the full spectrum of block element css properties not to work on a block element of html like the div tag in which a skin object with the special runat="server is part of the objects attribute I would greatly appreciate it. Oh and by the way when asp.net parses this skin object it spits out a span tag but that span tag is still encapsulated with in the block level container which is floated within it's larger container so still seems like the blocked element div would be the element that took precedense over the inline elment span which by the way I even tried to turn this into a block level elment within the context of its class name attribute by creating a span.copyright { display:block; } and still no luck. Thanks again in advance, Bo
Joseph Craig
DNN MVP
Posts:11667


--
08/28/2010 11:29 AM  
You are correct. The COPYRIGHT skin object uses a Label control, which renders as a span. The entire copyright object shows up in the page as something like

< span id="dnn_dnnCOPYRIGHT_lblCopyright" class="SkinObject" >Copyright 2007 by blah blah blah< / span >

You can always remove the COPYRIGHT skin object from the skin and insert your own copyright notice. For one site, I placed a Text/HTML module in the footer and used this as a copyright notice:

© Copyright 2007-[Date:Now|yyyy] blah blah blah

With token replacement used in the module, this results in the date being shown as 2007-2010. After the first of the year, this will be 2007-2011 without having to do anything.

Joe Craig, Patapsco Research Group
Complete DNN Support


---