Semantic code and header tags within DotNetNuke skins
Edit the container for h2 tags
We are now going to create a container to use the h2 tag. If you refer back to the diagram in figure 12, this container will be used to hold any other content except the main article on the page. ie. content in the left and right panes.
- Edit line 18 and change:
<td valign="middle" width="100%" nowrap> <dnn:TITLE runat="server" id="dnnTITLE" /></td>
to:
<td valign="middle" width="100%" nowrap><h2><dnn:TITLE runat="server" id="dnnTITLE" /></h2></td>
Here we have placed h2 tags around the title of the container.
You will also notice that we have removed the space before the title, “ ” this causes spacing display problems once we add the h2 tag and is one of the causes for the increased height being displayed around the container title.
Apart from the causing spacing errors, it is also best practice to remove these spaces and specify any spacing directly within the skin.css file.
View the two example images below:
H2 tag added including the (fig. 13)
H2 tag added with the removed (fig. 14)
You will see in figure 14 that the header image area still has a height larger than the original. This is caused by the h2 tag. All header tags automatically by default add margins to the top and bottom of the text. We therefore need to remove all of the margins for the h2 tag.
- Open the skin.css file for the DNN-Blue skin
- Add the following code:
h2
{
margin: 0;
padding-left: 3px;
}
Here you can see we have removed all margins from the h2 tag and we have also added 3px of padding to the left of the h2 tag. This is to replace the “ ” that we removed from the skin.ascx file.
The container with margins removed and padding applied (fig. 15)
We have now completed a container which places h2 tags around the title of the container. |  |
|
|