Sliding Door menus in CSS

Most of the times while coding in HTML & CSS, we come across a situation whereby we need the background of the menu to vary according to the text inside (the menu items). For an illustration, you can click this link here. Here, the menus on the top namely Most Recent, Popular & Random need to have a background that expands itself when the text (Most Recent, Popular & Random) size increases, in case the text is dynamic and gets fetched from the admin side. This menu designing technique is called Sliding-Door technique. Designing this kinda menu is really an interesting task. Though I have included the codes for this kinda menu with this blog, I guess this link here also has a nice explanation that can be understood once read carefully. I have used two images here, though I found that that its possible to implement this menu technique using a single background image too, though I am not quite sure if that is bereft of any browser compatibilty issue(s). Moreover this way that I have mentioned here is a much tested one and is the best of its kinds or even the best one, easy at the same time.

StyelSheet goes here :

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(image_32.jpg) no-repeat;
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 39px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 37px 0 0;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(image_hover_left.png) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(image_hover_right.png) no-repeat right top;
}

The main body has codes like this :

<ul class=”glossymenu“>
<li><a href=”#”><b>Home</b></a></li>
<li><a href=”#”><b>About Riccineer</b></a></li>
<li><a href=”#”><b>Story</b></a></li>
<li><a href=”#”><b>Blog</b></a></li>
<li><a href=”#”><b>Gallery</b></a></li>
<li><a href=”#”><b>Testimonials</b></a></li>
</ul>

 

Though this works fine in normal coding, while using WordPress or might be other CMSs (though I am not sure about others), using two attributes <a> & <b> in the menu items as above cannot be implemented this way. so we need to remove theĀ  <b> attribute and accordingly make changes as required.

You can send me any issue that you come across using this technique.
Comments are really welcome and appreciated too.

Easiest way to building zebra tables in css

I found myself stuck with a real strange but interesting thing. I just needed to get the design as in the picture below. If it were only for html page, it would have been indeed a child’s play. But the problem was that it had to be fetched dynamically.
Picture1 :

I tried the best way to learn. Googled it. I tried in forums as well, but the solution came in the form of javascript codes which I am really afraid of. I infact avoid using javascript, for I am not at all comfortable with the codes. Thereafter, there was the css property to my rescue. Its the nth child pseudo class expression property.
The codes go as:

tr:nth-child(2n+1) /* represents every odd row of a html table */
tr:nth-child(odd) /* same */
tr:nth-child(2n) /* represents every even row of a html table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

But the issue was that, this cannot work in IE. A big issue for me.
So at last, I tried php and succeeded.
Here is the code that will get the thing done easily and without any javascript jargon.

Friendship is a bond to revere

Before I begin this entry of mine, let me dedicate this (at least) to Aradhana Prakash Gupta, a friend of Ruchika Girhotra. She lives in Sydney with her family and teaches some language in a school there(apologies, I forgot). She has really set an example for all those who consider themselves as someone’s friend without realizing the real meaning of this sacred bond called Friendship. No one can ever imagine herself in the midst of a situation where one’s best friend gets violated, tormented and when all this was not enough was even made to commit suicide all because of a man who was old enough to be her father.. I would surely not like even the deadliest of my enemies (if any) to be inflicted upon such a life.This Valentine’s Day, Aradhana even has started a website for this noble cause . Its http://www.justice4ruchika.com/. Please visit this and be a part of this Crusade for Justice.

Friendship is not a mere formality that people boast of being in. This sacred thread has been bestowed upon by the Almighty so that we learn how to love and spread love. This is the secret of this transient world. In my own case, this sacred thread has got too many knots to get along with. My best friend of, sometimes in my school days broke off with me. He had been so close that he knew me in and out once. We used to be buddies, so close that even some of our teachers used to cite our examples in front of our classmates. Though our homes were far away, this never was an impediment. There are still certain sweet memories of him in my life. then one fateful day,while I was trying to connect with him, I was tersely asked to get away.And the guy telling this was no one but the same so called friend of mine. That one message was the end to our some seven years long friendship. I was simply heart broken. I never had imagined that I will have to face such a situation in my life. It was more like a slap in my face to which I had nothing to say. Everywhere in this world if any one gets punished, he is at least aware of what his fault or crime or sin is. I am not at all aware of mine.I simply dont know what I did. Its like I had been severely punished for some crime I never thought I committed. It took me some five or six months to accept the fact that something like this happened to me. But then everything has a silver lining. I learnt how to be alone in life and also keep oneself going which is the gist of life. I learnt not to wail upon over split milk and that nothing in the world is permanent. May be for this fact, I have so much of respect for this sacred bond. But the guys around flaunt it very much than to understand the responsibilities attached with it. I guess the Aradhana really deserves kudos for her brave act of hers. Her patience and determination has made her a real idol for so called friends to emulate.

while vs foreach in PHP

There can be a lot many ways to get a specific task done. To display a certain number of items form an array, we have two ways. One is to use while() statement and the other one to use foreach() statement. The syntax for both are as follows :
while (list($key, $value) = each($pagearray)){
echo “Key: $key; Value: $value”;
}
foreach ($pagearray as $key => $value){
echo “Key: $key; Value: $value”;
}

Though for smaller arrays, the one containing a limited number of elements, both can be used. But from the optimisation point of view, the use of foreach() is suggested. foreach() is optimised for iteration over collections. Or in other words, this statement works faster than while(). This is more efficient as for every loop, we need to make a call to two functions every single time and so this makes while() inefficient.

Icons for Design

Designing a web site might be a creative thing to do and might ask for a lot much so-called creativity, but its not that heck of a job. It simply needs a bit of confidence and quite much concentration.

You must wish to use some attractive design icons to be included in your site. Following gives you a list for the icons.

1) Icon List 1

2) Icon List 2

3) Icon List 3

Using same class with different elements depending upon the browser in use

Sometimes doing cross browser checks can become really cumbersome and is a heck of a job. IE causes unwanted margins to appear from nowhere, can cause borders to disappear and a myriad of other things as well. Using javascript, here is a simple code that can differentiate the class depending on the browser that we are using.

if(navigator.appName==’Microsoft Internet Explorer’){
document.getElementById(‘vertical1′).className=’css_vertical_text_mineIE’
document.getElementById(‘vertical2′).className=’css_vertical_text_mineIE’
document.getElementById(‘vertical3′).className=’css_vertical_text_mineIE’
document.getElementById(‘vertical4′).className=’css_vertical_text_mineIE’
document.getElementById(‘vertical5′).className=’css_vertical_text_mineIE’
document.getElementById(‘vertical6′).className=’css_vertical_text_mineIE’
}

Designing Logos

Logo forms an integral part of any concern or for any entrepreneurship, whether it be a blog or any simple website. A professional logo can enhance the image of a company, organisation or a product while an unprofessional logo can play havoc. Creating a logo might seem a simple ask for many but it really requires a lot of attention, logic and research. As mentioned in ecompanylogos.com,
A logo should:
1. Attract attention, and then leave an impression.
2. Create a look that is unique and distinguishable.
3. Reflect the overall “feel” of the company it represents.
4. Promote a feeling of authenticity and professionalism.

For any project, doing one’s own research is the foremost important requirement, this is called doing one’s own homework. This would include analysing the requirement for the site.

Normally logos can be classified into three types. Font-based logos that use type treatments with a twist that makes them distinct. Then there are some logos that literally illustrate what a company does, such as when a house-painting company uses an illustration of a brush in its logo. And finally, there are abstract graphic symbols-such as Nike’s swoosh-that become linked to a company’s brand.

I had never been so convinced than I am today that designing a logo can be such an exciting experience. Though the designing process is an ever learning curve and one gets to learn a lot many things on how to proceed with a logo design. The foremost important thing to be kept in mind is that you need to to gather quite much (read sufficient) information on what the concern works for or what for you are designing the logo. Once you have the info, the world of designing is open for you and is all set to welcome to with open arms. Every logo has a meaning that it conveys to the general public, though I find certain meanings a bit tougher to fathom. I feel the meaning should be simple enough but exciting at the same time. Although some logos with complicated, intricate meaning are very much interesting.

We can have some interesting info on several logos of some concern all around the world here and also here.