Panel
Today I used for first time a panel. I have to "hide and show" some parts of my master-page. Usually developers construct 2 different master pages. I decided to have one and implement the panels. Here's my code:
HTML-page with 2 panels (code segment)
<asp:Panel ID="PanelBreadCrumb" runat="server">
<div id="breadcrumbDiv" class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" > " SiteMapProvider="Breadcrumb">
<CurrentNodeStyle Font-Bold="True" />
</asp:SiteMapPath>
</div>
</asp:Panel>
<asp:Panel ID="PanelRightSide" runat="server">
<td class="rightColumn2" valign="top">
<div style="padding: 10px;">
<ul class="ul_rightCol">
<li class="bullets">
<asp:HyperLink ID="Hyperlink2" runat="server" NavigateUrl="http://www.sample1.html"
Target="_blank" AccessKey="a">Sample1</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypRates" runat="server" NavigateUrl="http://www.sample2.htm"
AccessKey="1" Target="_blank">Sample2</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypChapter" runat="server" NavigateUrl="http://www.sample3.htm"
Target="_blank" AccessKey="2">Sample3</asp:HyperLink>
</li>
<li class="bullets">
<asp:HyperLink ID="hypData" runat="server" NavigateUrl="http://www.sample4.htm"
Target="_blank" AccessKey="3">Sample4</asp:HyperLink>
</li>
</ul>
</div>
</asp>
Code behind in VB.NET on Page Load: (code segment)
Dim PanelBC As Panel
PanelBC = CType(Master.FindControl("PanelBreadCrumb"), Panel)
PanelBC.Visible = False
Dim PanelRS As Panel
PanelRS = CType(Master.FindControl("PanelRightSide"), Panel)
PanelRS.Visible = True
This trick is a quite comfortable to use and reuse one master page for different layout through the same site. I hope to use the trick more and more.
Thursday, March 8, 2012
Tuesday, March 6, 2012
Div Align With CSS
Creating a nice look for section 508-complaint site, I found I need some ideas how to place my div (s) on a page. Researching the topic I found an interesting posting about it:
"When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.
To get started with code samples, to center a div in the middle of a container div you can use the following CSS:
"When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.
To get started with code samples, to center a div in the middle of a container div you can use the following CSS:
.center { margin-left: auto; margin-right: auto; }If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.
.right { float: right; } .left { float: left; }I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don't clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.
.clear { clear: both; }"The advice came from http://juixe.com/techknow/index.php/2007/01/14/div-align-with-css/
Thursday, March 1, 2012
Accesskey and section 508
How different browsers handle the above accessKey letters for button and anchor elements
Browser | Operating System | Key Combination | Button Behavior | Anchor Behavior |
---|---|---|---|---|
Chrome 7.0.517.41 | Linux | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
Chrome 7.0.517.41 | Mac OS X | Control + Option + letter | Clicks the button (3) | Clicks the anchor (3) |
Chrome 7.0.517.41 | Windows | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
Firefox 1.5 | Windows | Alt + letter | Clicks the button (1) | Unknown |
Firefox 2 | Linux | Alt + Shift + letter | Clicks the button (1) | Clicks the anchor |
Firefox 2 | Mac OS X | Control + letter | Clicks the button (1) | Clicks the anchor |
Firefox 2 | Windows | Alt + Shift + letter | Clicks the button (1) | Unknown |
Firefox 3 | Linux | Alt + Shift + letter | Clicks the button (1) | Clicks the anchor |
Firefox 3 | Mac OS X | Control + letter | Clicks the button (1) | Clicks the anchor |
Firefox 3 | Windows | Alt + Shift + letter | Clicks the button (1) | Clicks the anchor |
Internet Explorer 6 | Windows | Alt + letter | Sets focus on the button (2) | Unknown |
Internet Explorer 7 | Windows | Alt + letter | Sets focus on the button (2) | Sets focus on the anchor (2) |
Internet Explorer 8 | Windows | Alt + letter | Clicks the button (3) | Sets focus on the anchor (2) |
Internet Explorer 9 (beta) | Windows | Alt + letter | Clicks the button (3) | Sets focus on the anchor (2) |
Safari 3.1.2 | Mac OS X | Control + Option + letter | Clicks the button (3) | Clicks the anchor (3) |
Safari 3.1.2 | Windows | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
Safari 5.0.2 | Mac OS X | Control + Option + letter | Clicks the button (3) | Clicks the anchor (3) |
Safari 5.0.2 | Windows | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
•Red = Different behavior for buttons and anchors
•Comment 1 = To just set focus on the button/anchor, change your about:config setting for the “accessibility.accesskeycausesactivation” user preference.
•Comment 2 = Press Enter to click the button/anchor
•Comment 3 = There appears to be no built-in mechanism to just set focus on the button/anchor. The component handling the click event would be responsible for setting focus while handling the click.
The data comes from http://formattc.wordpress.com/2010/11/03/browsers-and-the-html-accesskey/ this table was really helpful to build my own system of accesskeys.
Subscribe to:
Posts (Atom)