But don’t worry, because I will give instructions to you, how to add slideshow image on zencart home page.

First, open the file define_main_page.php. Files in the directory:  www.yoursite.com / includes / languages /english /  define_main_page.php with a text editor such as Notepad + +.

Second, Copy all the existing code in the text box below and then input into a file define_main_page.php.

Third, don’t forget to save again.

To display the images on your website home page, you should put a folder slideshow into directory: <www.yoursite.com/images> You can download sample images here.

If all the above steps done correctly, then I’m sure the home page of your website will display slideshow images.

Than, If you want the slides to look good in accordance with the homepage on your website, you can edit your script in the input earlier.

Ok,  Good luck …!

Sorry, we do not refuse if I use the image as a button for the beauty of your site, but if your site has a lot of navigation should use as a background image on the button and the words on the button using a dynamic text that you work more practical and efficient.

Okay, to create a dynamic Button,  I will show you how:

• Make 2 pieces on the image to photoshop background in accordance with the button you wish, in this case I cite like this:
  

  

• Then, create a navigation menu with HTML, for example:

<ul id=”inline-button”>
<li> <a href=”http://gusdwi.info”> <span>Home</span></a> </li>
<li> <a href=”http://gusdwi.info/tentang-gusdwi/”> <span>About Me</span> </a> </li>
<li> <a href=”http://freetemplatedesign.blogspot.com/”>  <span>Free Template Design</span></a> </li>
</ul>

• And make a CSS code like this:

#inline-button {
margin:1em 0 0 0;
padding:0;
list-style:none;
text-align:left;
}
#inline-button li {
margin: 0 0 0 0;
list-style:none;
display:inline;
padding:0;
}
#inline-button li a {
background:  url(../images/button-left-bg.gif)no-repeat left top;
font-size:1.3em;
margin:0 0 0 0 ;
padding:0.3em 0 0.5em 0;
text-decoration:none;
}

#inline-button li a span {
background:  url(../images/button-bg.gif)no-repeat right top;
margin:0 0 0 1em;
padding:0.3em 1em 0.5em 0;
color:#330000;}

The result will be as below:

• Home
• About Me
• Free Template Design

<table border=”0″>
<tbody>
<tr>
<th colspan=”3″>List of Student Class IIIA</th>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Date of  Birth</td>
</tr>
<tr>
<td>Andy. R</td>
<td>Jl. Setia Budi, 20A</td>
<td>22-4-1992</td>
</tr>
<tr>
<td>Budianto</td>
<td>Jl. Merdeka, 23B</td>
<td>12-2-1993</td>
</tr>
<tr>
<td>Brandy. W</td>
<td>Jl. Anyelir, 11C</td>
<td>10-1-1992</td>
</tr>
<tr>
<td>Cyntia Dewi</td>
<td>Jl. Pahlawan. 10C</td>
<td>13-8-1993</td>
</tr>
</tbody>
</table>

Second, we make its CSS file as follows:

table.listItem {
width:100%;
padding:0.1em;
text-align:center;
border:1px #009966 solid;
background:#FFFFFF;}

table.listItem th {
font-size:1.4em;}

table .nameItem {
background:#006666;
font-weight:bold;
color:#FFFFFF;}

table .oldRow {
background:#009999;}

table .evenRow {
background: #00CC99;}

OK, download the HTML code and CSS code above, and if you see in the browser as a result will like Table above.
Congratulations ….! Testing

Baiklah untuk lebih memperjelas fungsi z-index, saya akan memberikan ilustrasi seperti ini, Dalam sebuah halaman web terdapat 3 div yaitu:

<div class=”layer_1″>BERWARNA BIRU</div>
<div class=”layer_2″>BERWARNA HIJAU</div>
<div class=”layer_3″>BERWARNA KUNING</div>

Selanjutnya masing-masing class selector diberi style sepertti berikut:

div.layer_1 {
background-color:blue;
position:relative;
left:0;
top:0;
z-index:0;
}
div.layer_2 {
background-color:green;
position:relative;
left:20px;
top:-20px;
z-index:1;
}
div.layer_3 {
background-color:yellow;
position:relative;
left:40px;
top:-40px;
z-index:2;
}

div.layer_1, div.layer_2, div.layer_3 {
width:200px;
padding:20px 15px;
text-align:center;
font-size:14px;
font-weight:bold;
color:#000000;}

hasilnya akan tampak seperti dibawah ini:

Bila anda ingin merubah susunan layer tersebut, anda tinggal meng edit bilangan integer yang menjadi nilai z-index. dan kalau belum jelas tentang penggunaan z-index, silahkan isi comment form dibawah…! mudah mudahan Saya bisa bantu anda.

Nah, sekarang saya akan mencoba memberikan sedikit pengalaman saya kepada anda.
Pertama, buatlah text box diantara tag <body>…</body>pada halaman HTML seperti ini:

<div class=”kotak_teks”></div>

selanjutnya, ketikan isi atau artikel diantara tag <div>…</div> seperti contoh:

<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css
</div>

Kedua, buatlah style Css nya diantara tag <head>…</head> seperti contoh dibawah ini:

<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>

Untuk lebih jelasnya, lihatlah sintax HTML yang lengkap dibawah ini:

<html>
<head>
<title>Membuat texs scroll box dengan Css</title>
<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>
</head>

<body>
<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css.
</div>
</body>
</html>

Dan hasilnya akan menjadi seperti text box dibawah ini:

Nah, semoga ada manfaatnya bagi yang belum mengetahui cara ini.

Let’s take a look at the difference of logo.png (with transparency) above on Mozilla Firefox and Internet Explorer 6

If you inserting your logo in PNG format with transparancy will leave you with a white background when saw in Internet Explorer 5 or 6. It makes your logo looks not good and this is really the last thing any web designer would want on their website. Don’t worry about that, I’ll give you a solution on how to solve this.

Solution

1. You must download file iepngfix.zip
   Unziped file and than inside iepngfix folder you can see two file blank.gif and iepngfix.htc
   Upload two file above to your server and put into root directory.
2. Into your CSS file add selector on tags/element which you want PNG transparency appear. Example:
   

   <html>
<head>
<style type="text/css">
img.logo { behavior: url(iepngfix.htc) }
</style>
</head>
<body>
<img class="logo" src="http://gusdwi.info/images/my-logo.png"/>
</body>
</html>

For more detail source, see on :

IE PNG Alpha Fix v1.0
This is a IE5.5+ “behavior” that automatically adds near-native PNG support to MSIE 5.5 and 6.0 without any changes to the HTML document itself
www.twinhelix.com