CSS : Vertical Centering Menu

Vertical centering has always been a fairly elusive goal when doing CSS layouts, but it’s still possible. Here, we'll make a simple center list menu where each list have centering orientation.

Then it's the preview of menu that would be made :

Firstly, we make html file :

menu 1
menu 2
menu 3
menu 4
menu 5
menu 6

After that, let's move out to make style :

body{
 font-size: 12px;
}
.menu{
 border: solid thin #f00;
 margin-top: 45px;
}
.wrapper{
 width: 960px;
 margin: auto;
}

ul#menu {
    text-align: center;
    height: 140px;
    display: table-cell;               /* make unorder list to be table-cell */
    margin: auto !important;
    width: 960px;
    background:  #8fcdea;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}
#menu ul {
    display: table;
    margin: 0 auto;
}
#menu li {
    display: inline-block;            /* make list to inline-block */
    position: relative;
    width: auto;
}
#menu li li {
    display: block;
}
#menu ul {
    display: inline-block;
}
#menu li {
    display: inline;
}
#menu a {
    display: inline-block;
    border: solid thin #f00;
    height: 60px;
    display: table-cell;
    vertical-align: middle;    /* set list vertical align : middle */
}
#menu li:hover ul {
    left: 0;
    top: 1.3em;
}
#menu li {
    display: inline;
    margin-left: 0 !important;
    position: relative;
    width: auto;
}
#menu a {
    color: #000000;
    line-height: 1.6;
    padding: 0 2.5em;
    width: 6em;
    text-decoration: none;
}
#menu li li, #menu li li a {
    display: block;
    height: 1.5em;
}
#menu li li a {
    padding: 0;
    width: auto;
}
#menu li:hover ul {
    left: 0;
    top: 1.5em;
}

Note :

The simple way if you want to center certain content vertically :

.container {
   min-height: 10em;  /* set your own height */
   display: table-cell;
   vertical-align: middle;
}

Done !

Auto Generate Image CSS

When we would make image gallery on our site, we want every image looks neat and but sometimes to make it, we have to make a php class to generate and make it as thumbnail picture. But I have alternative solution to make gallery image neat looking without php class just by using css.

Here is a trick that could be solve the problem,

Firstly, we make an html file with div name class img_box

After that we put css code to manipulate the image and img_box div

Then here we go, we could see the preview in the browser. For example, I put my preview image like this :

source image  :

1. http://jonasdero.deviantart.com/?rnrd=6690#/d5ff1qw
2. http://jonasdero.deviantart.com/?rnrd=6690#/d5ewhkw 
3. http://jonasdero.deviantart.com/?rnrd=6690#/d5gctpk

Cross Browser Font Style Using CSS3

Sometimes on our website, we want to use several even more different and particular font that doesn't installed on the operating system. The solution that usually we use for solve that problem is we use static image to display the character which use that font. But after being supported CSS3 by many browser then we could use better option by using inclusion of a particular font on the server side and accessed via css web pages.

So here's the example for call a particular font that stored on the server command with CSS3 :

@font-face {
    font-family: MyFontName;
    src: url("path/to/font.ttf")
}

Next for for, calling that fonts we could do as usual.

.style1 {
    font-family: MyFontName, Arial, Tahoma, Verdana;
}

Note : for internet explorer, font that could be used not TTF (TrueType Font) but use EOT (Embedded OpenType) format. To change font a TTF become an EOT we could use ttf2eot application that provided by google or other application. 

Reference :

1. http://batikpress.com/2012/02/cross-browser-font-style-menggunakan-css3.html