Shahid Online - Tech Corner

In the same project as before, my search results are being presented in a table.  The issue here, is that I want to have a different background colour for an alternate for the purpose of easy readability. Luckily, XSL saves the day with the position() function.  This is really handy for obtaining your current index when in a loop.  Just as with using any other server side language you want to mod 2 the position to identify the alternate row: <xsl:if test="position() mod 2 ='1'">     <xsl:attribute name="class">rowA</xsl:attribute> </xsl:if> For a quick reminder of the modulus operation ( mod ): when applying the arithmetic on an even number it, correctly returns 0.  When applying to an uneven number, such as 5, it will return the value 1.  1 denotes that there is a remainder. The purpose of xsl:attribute is to apply XML/XSL to an attribute of a HTML tag.  In this case I want to apply a CSS style to the table row ( tr...

I know that I once stated that using UL to build a list of links was not desirable, but there are times when you have no choice. It is fairly straightforward and you do not need any JavaScript to ruin your code.  So let's get started an define the menu and wrap it inside a DIV: <div id ="hovermenu" >   <ul >         <li > <a href ="#" href ="Link Number 1" > Link #1 </a > </li >         <li > <a href ="#" href ="Link Number 2" > Link #2 </a > </li >         <li > <a href ="#" href ="Link Number 3" > Link #3 </a > </li >     </ul > </div> Now for the CSS: .hovermenu ul{   font: bold 13px arial;   padding-left: 0;   margin-left: 0;   height: 40px; } .hovermenu ul li{   list-style: none;   display: inline; } .hovermenu ul li a{ ...

Many times I am told that using table s to layout a web page is a sin.  But, when I try to resize a DIV, it's hard to get it to resize when the window has been resized.  Setting 100% does not seem to work. So far we have the 3 column liquid layout, but it is not enough when the web pages (or applications for that matter) are more complicated.  When searching on the Internet to resize a DIV in response to a window resize, I am mostly presented with JavaScript solutions. Yeuch. This is not very accessible for users of other browsers. Luckily, there is an undocumented feature of CSS that helps with this: table layout. Firstly, create the element in the HTML: <div id ="pageBlock" > Content comes in here... </div> And then in the CSS we set our display: #pageBlock {   display : table;   height : 100%;   width : 100%;   table-layout : fixed; } Although this works with Firefox, it still likes to show a scrollbar for some reason, so you add th...

When it comes to trying to use pure CSS to layout documents, it may seem daunting at first but is actually more straightforward than using table s. First off, define the columns in your HTML page: <div id ="leftColumn" > Content comes in here... </div> <div id ="middleColumn" >   <h1> Document Header </h1>   <p> Content comes in here...... </p> </div> <div id ="rightColumn" >Content comes in here....... </div> Now that is the structure put in place.  The wizardy is done using the id s of each div : #leftColumn {   position : absolute;   top : 140px;   left : 0;   width : 20%;   margin-top : 1%; } #middleColumn {   position : absolute;   top : 140px;   left : 20%;   min-width : 360px;   width : 58%;   margin : 1% 1% 0 1%; } #rightColumn {   position : absolute;   top : 140px;   left : 80%;   width : 20%;   margin-top : 1%...

I remember the days when I started with web design. While specifications and proposed standards were drafted, many designers and developers were lazy in making websites accessible in many browsers, including myself. The Internet has come a long way since, especially now that governments are making services and information available. I was given my awakening when studying User Centred Design and HCI concepts, realising that a lot of people are missing out. That is when I began utilising my design and marketing skills to provide consultancy to companies that produce web services/applications for the Local Authorities in the UK. My role with my current company is primarily consultancy to ensure that marketing and the online products are usable/accessible , but have been involved in development to ensure that the guidelines are implemented. I was astonished that they never considered making their software usable/accessible until I came along. There must be more companies and local autho...

My work place tasked me with trying to be as purist as possible with HTML and CSS for an interface their web application. Without any formal web development background, I have always been one of those who intermingle the code and have presentation within the HTML. I think it came out pretty well. I separated design from content in addition to separating the dynamics. Mind you, I even separated out all the server talk and taught myself some XML/XSL in the process. After all that I learnt Ajax, without realising it. One little nugget from all this is creating a pure CSS rollover button for the menu, without Javascript. There's alot of websites that help out in this, but they are not "pure" as they involve you including the image in the HTML and to perform some shifting with the image. Hell no to that. My way leaves out the usual ul tag and dives straight into the anchor ( a ) tag as it should be: a href ="links.htm" id ="linksButton" title ="Lin...