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

Weekend :) Life

November 2nd, 2009 by admin

Weekend Life :)

jQuery menu few simple steps ;)

January 29th, 2009 by admin

here is an example of code if you can’t understand something pls ask me ;) but i think this is very simple for you ;) we you will use just really small javascript and css ;) that’s all :)
what you gonna do :
1 – made html file for example “menu.html”
2 – open file “menu.html”
3 – copy this html code below ;)
4 – paste this code into your “menu.html” file
5 – save “menu.html”
6 – run it in FireFox for example ;)
7 – made a changes in this code if you need it ;)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Menu Demo</title>
<script src=”http://jquery.com/src/jquery.js”></script>
<script>
$(document).ready(function(){
$(“dd:not(:first)”).hide();
$(“dt a”).click(function(){
$(“dd:visible”).slideUp(“slow”);
$(this).parent().next().slideDown(“slow”);
return false;
});
});
</script>
<style>
body { font-family: Arial; font-size: 12px; }
dl { width: 100px; }
dl,dd { margin: 0; }
dt { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 2px; }
.s { background: #999; font-size: 14px; padding: 2px; margin: 2px; }
.s a { color: #FFF; }

</style>
</head>

<body>
<dl>
<dt><a href=”/”>Menu jQuery</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/12/simple-css-menu/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/12/the-technology-validation-of-the-forms/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/ajax-email-validator-ajax-php/”>Item 3</a></li>

</ul>
</dd>
<dt><a href=”/Menu1/”>Menu1</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/11/your-own-scrollbar-color/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/11/css-image-effect-you-can-use-it-in-your-gallery/”>Item 2</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/some-rules-for-web-designers/”>Item 3</a></li>
</ul>
</dd>
<dt><a href=”/Menu2/”>Menu2</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/7-simple-ways-to-get-repeat-websitetraffic/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/10/do-you-want-build-your-website-what-do-i-need-to-do-for-star-my-online-project-first-steps/”>Item 2</a></li>
</ul>
</dd>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/how-to-build-a-great-web-site/”>Menu3</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/09/web-design-web-development-seo/”>Menu4</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/2008/10/4-stages-of-web-site-design/”>Menu5</a></div>
<div class=”s”><a href=”http://blog.branding-studio.com/category/for-all/”>Menu6</a></div>
<dt><a href=”/Menu7/”>Menu7</a></dt>
<dd>
<ul>
<li><a href=”http://blog.branding-studio.com/2008/10/what-is-specification-how-its-look-like/”>Item 1</a></li>
<li><a href=”http://blog.branding-studio.com/2008/09/here-some-sites/”>Item 2</a></li>
</ul>
</dd>
</dl>
</body>
</html>

an example  :)



Menu jQuery
Menu1
Menu2
Menu7


be happy :) !!!

The technology validation of the forms

December 9th, 2008 by admin

First part  :

<script type=“text/javascript”>
//<![CDATA[
function checkform()
{
document.getElementById('urltosend').action="addmess2.php";
document.forms['addform'].target=”process”;
top.document.forms['addform'].submit();
}
//]]>

</script>

<form id=“urltosend” name=“addform” method=“post” action=“addmess.php”>

<input type=“button” onclick=“checkform()” value=“Отправить данные”>

<iframe name=“process” id=“process” width=“0″ height=“0″ style=“visibility: hidden”></iframe>

<div id=“alerts”></div>

Second part:

<?php
/*

Checking the received data and found errors add to the variable $alerts – for example:

$alerts.=”Error1<br />”;
$alerts.=”
Error2<br />”;
и так далее.

Depending on the outcome of displaying a message <div id=”alerts”></div> if all is ok  we resend our information to  “addmess.php”

*/

print ‘<script type=”text/javascript”>’.“n”;
print ‘//<![CDATA['."n";
if ($alerts)
{
print "top.document.getElementById('alerts').innerHTML='".$alerts."<br />';"."n";
}
else
{
print "top.document.getElementById('alerts').innerHTML='all is great !<br /><br />';"."n";
print "top.document.getElementById('urltosend').action='addmess.php';"."n";
print "top.document.forms['addform'].target=’_top’;”.“n”;
print “top.document.forms['addform'].submit();”.“n”;
}
print ‘//]]>’.“n”;
print ‘</script>’.“n”;

Just simple example  javascript and php ;)

Your own Scrollbar color

November 4th, 2008 by admin

In IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page, which includes various components of the scrollbar. The below CSS shows the relevant CSS properties for scrollbar coloring. Note that if your page uses a doctype that triggers a “Strict” mode in IE, the scrollbar properties need to be assigned to the “HTML” tag instead of the conventional “BODY” in order to work.

The CSS (for non “strict” doctypes):

body{
scrollbar-face-color:#EBF5FF;
scrollbar-base-color:#EBF5FF;
scrollbar-arrow-color:black;
scrollbar-track-color:#F3F3F3;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
}

The CSS (for “strict” doctypes):

html{


}

CSS Progress bar ;)

October 29th, 2008 by admin

Thoughts

We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage.
for css

Read More »

Preloader…

October 26th, 2008 by admin

Here is image preloader :) you can use this this script to not only preload images before displaying them, but also, get a live update on it’s progress through an update bar. Once the preloadiing is complete, the surfer is then directed to the page containing the preloaded images.

here is sample of code :

P.S.  sorry I forgot. You need made 2 gif images one 1X1 pix black dot and other 1X1 pix blue dot . Call them blue.gif and black.gif and paste them in the same scriptfolder.

Read More »

Opera and Safari

October 26th, 2008 by admin

Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn’t like that symbol, so you could declare something like this:

p { color: red; }
p { color: black;# }

Every other browser will read the second line replacing the first line and the text will be black. Safari doesn’t like that pound sign and will stick with the first declaration and the text will be red. This is the perfect example of why using hacks are a bad idea, because it no longer works (Safari 3 and beyond).

Now there is a new hack on the block targeting newer versions of Safari as well as Opera 8/9:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari-Opera specific declarations here */
}

Originally published here.

Read More »

4 stages of web site design

October 12th, 2008 by admin

Typically, web site designs evolve. In the beginning, many web site owners become enamored with “bells and whistles” that, on the surface, might appeal to their target audience. Flash movies, Java applets, animation and other rich media has become increasingly popular over the years.

However, in the rush to have the “coolest” site design, web site owners forget whom they are designing their site for: their target audience. Your audience might find that Flash movie irritating after viewing it multiple times. Your audience might not be able to find your site in the search engines. “Bells and whistles” are attributes of a web site that need to be measured and tested to see if they increase or drive away sales.

Below are the various stages of evolution web sites typically undergo:

  • Stage 1 – Style Over Substance
  • Stage 2 – Designing for Online Visibility
  • Stage 3 – Designing for Your Audience
  • Stage 4 – Site Redesign
  • Conclusion

Stage 1 – Style Over Substance

The first stage is to design a site that the CEO, venture capitalists, and ad agencies like to see. There are all types of “bells and whistles” in this design. An entire site might be a Flash site. Or there might be some beautiful JavaScript mouseover effects or drop-down menus in the design. It’s always a pretty design, but the message is clear — style over substance.

Stage 2 – Designing for Online Visibility

In Stage 2, the reality of an ineffective web design begins to hit, usually around 3-6 months after the initial launch. A site will typically get rejected by many of the major directories, not be indexed by the major search engines, or not get the traffic or sales that were projected based on the various types of marketing strategies used. Typically, that’s when companies decide that they will try to hire a professional online marketer to promote the site. Doorway page companies, in some way, shape or form, rear their ugly heads.

Unfortunately, many web site owners fall for a doorway page company’s pitch because the beautifully designed site couldn’t possibly be the problem with low site traffic. Yahoo might have rejected a site, or the site might have been listed in Yahoo and the company cannot understand why they have no description next to their company name. But in no way would many ad agencies or doorway page companies want to tell potential clients the truth — they simply did not design and write an effective web site — because it would mean losing thousands of dollars in business.

Stage 3 – Designing for Your Audience

By Stage 3, after spending an exorbitant amount of money on pretty web site designs and various marketing strategies, web site owners generally figure out that they did not design or write an effective Web site for their target audience.

Typically, web site owners will bring in a usability expert to analyze potential problems and present various solutions. Bringing in a search engine marketing expert to help with search-engine friendly design templates early in the design phase can save a company thousands of dollars in online marketing costs.

Stage 4 – Site Redesign

After careful usability and search engine visibility analyses, web site owners finally have an effective web site. A site that is written, coded and designed for user friendliness and search engine visibility generally gets the most traffic and resulting sales because it was written, programmed, and designed for end users.

Conclusion

Web sites should always be designed with your target audience in mind, not your own personal preferences. Colors have meaning. Professional designers understand the psychology of color and the use of white space to best project the image your audience wishes to see. (For example, try not to use the color red on a financial site.)

Understanding the products/services/information your target audience is searching for is paramount to designing and maintaining an effective web site. When you launch a site, you might have to make an educated guess as to what your target audience wants. After that, tools such as site statistics software and reporting from site searches tell you exactly what your visitors are looking for. Then content and marketing strategies can be adjusted accordingly.

Unless the advanced technology clearly benefits end users, do not use it on your site. If your venture capitalists or CEOs or lawyers like the site, ask if they are going to spend the thousands or millions of dollars to keep you in business. They’re not.

Your target audience who will ultimately determine the success or failure of your site.

If you have any specific questions about our web site design tips, or if you would like permission to republish this design tip on your web site or newsletter, please use our contact form or email us at suppor@branding-studio.com