CSS horizontal menu

September 22nd, 2010 by admin

This is simple css horisontal menu. You don’t need be an advanced webmaster for create the same nice menu.
Lets start:
1. we should draw this menu in photoshop ( I created this one for example)

2.now lets create a rollover effect for our menu. Look what i did  I made a copy of this menu   and just changed a color of button. Next i paste together  both images like this :

3.lets cut this menu on buttons look like i did this:

4.now lets write little css code :

a.valutesbfunt {
display:block;
height:45px;
width:49px;
background :url(images/css_horizontal_menu/css_menu_button1.jpg);
text-decoration: none;

}
a.valutesbfunt:hover  {
background-position: 0 -45px ;
}

.deltextatall {
position: absolute;
left: -5000px;
}

let me exlain what i did in this css :

i created a block  height: 45px on  width:49px and background image of my block is an imge

size of this image is width:49px height:90px this is really important i mean this size 90px i show in this block just top part of this background image height: 45px on  width:49px so people can’t see bottom side of it with another color
what i do next if you put your mous on this block  i will show you another bottom part of this button  background-position: 0 -45px ; this mean that i changed button position and show you just bottom part with gray button
for show this button i need a text   in it so i decide hide it  and position of this text is  left: -5000px; so you can’t see it .
5.next step create the same css for all buttons just with different  names

a.valutesbfunt {
display:block;
height:45px;
width:49px;
background :url(images/css_horizontal_menu/css_menu_button1.jpg);
text-decoration: none;

}
a.valutesbfunt:hover  {
background-position: 0 -45px ;
}

.deltextatall {
position: absolute;
left: -5000px;
}
a.valutesdollar {
display:block;
height:45px;
width:46px;
background :url(images/css_horizontal_menu/css_menu_button2.jpg);
text-decoration: none;

}
a.valutesdollar:hover  {
background-position: 0 -45px ;
}
a.valuteseuro {
display:block;
height:45px;
width:55px;
background :url(images/css_horizontal_menu/css_menu_button3.jpg);
text-decoration: none;

}
a.valuteseuro:hover  {
background-position: 0 -45px ;
}

6. step lets create simpe html code for one of this buttons  :

<a href=”#” class=”valutesbfunt”  title=”Pound”><span class=”deltextatall”>Pound</span></a>

link in hreaf=”#”  you  can chage on any link as you  need the same you can do  with title and anchor text of the link

7. lets create whole menuin html

<table width=”150″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”left” valign=”top”  ><a href=”#” class=”valutesbfunt”  title=”Pound”><span class=”deltextatall”>Pound</span></a> </td>
<td align=”left” valign=”top”><a href=”#” class=”valutesdollar”  title=”Dollar”><span class=”deltextatall”>Dollar</span></a></td>
<td align=”left” valign=”top”><a href=”#” class=”valuteseuro”  title=”Euro”><span class=”deltextatall”>Euro</span></a></td>
</tr>
</table>

just notice that each button has her own class  in  link “valutesbfunt,valutesdollar,valuteseuro” in span class is the same  for all css menu buttons  “deltextatall”

lets see what we have now
examle

Remove ICQ Firefox tutorial

September 15th, 2010 by admin

I use Firefox cause I really like it but after I installed ICQ … I start to hate it !!! ICQ search engine – it’s awful thing !!! So i found the way how i can remove ICQ from Firefox permanently !!! :)
1. In Firefox status bar enter about:config (image of firefox status bar with about:config)
remove icq from firefox
2. You will see a message : ” Here be dragons!  Change this advanced settings can be harmful to the stability, security, and performance of this application. You should only continue if you are sure of what are you doing.”  and you will see button  “I’ll be careful, I promice!”  click this button (image of firefox with careful message and button)
remove icq from firefox
3. You will see next screen with Firefox configuration options name of this tab “about:config” and you will have new field “Filter” (image of firefox configuration page)
remove icq from firefox
4. In the “Filter” field enter “keyword.url” or “ICQ” (image of firefox filtred results)
remove icq from firefox
5. In filtred results find “keyword.url” right click on this word and you will see drop down men find there word “Reset” and click it
remove icq from firefox
6. Now you will see defaul search engine url in this string like ” http://www.google.com/search?ie=UTF-8&oe=UTF-8&sourceid=navclient&gfns=1&q=” (image of default firefox “keyword.url” settings)
remove icq from firefox
7. Restart Firefox . DONE !!! Try to enter search phrase in status bar now you will see default firefox search engine