Archive for the ‘Codes’ Category

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.

Advertisements

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.

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.