Depending on what you want, it could be either easy and cheap or complicated and expensive. So here some information to understand a bit better.

To be able to sell a product on internet, you will need a few things.

-A hosting service
-A website
-A shopping cart
-A payment gateway.

We will focus on the 2 last ones.

the shopping cart

It is the part that will be used to pick the article the client want to buy. You can have a simple “buy now” button or something more sophisticated with quantity and color. The cost of such cart varies from 0$ to 100$/months. For the cheaper ones, you will have to install them yourself or hire someone to do it for you, and again depending on the cart you picked the price will vary.
A really easy one to install and use is http://www.mals-e.com/ but some of the features are limited.

A payment gateway

The payment gateway is the connection you will have to use to accept payments like credit card. One of the most known today is Paypal but there are others like authorize.net.
What is the cost of a payment gateway?
Depending on the one you want to use different fees will apply. Usually you will have a monthly fee and a transaction fee. For Paypal payments Pro, which is one of the cheapest, it’s 30$/month and 1.9 to 2.9% on each transaction.

What is the best solution?

If you use Paypal standard, you don’t have to pay the 30$/month and you don’t need a shopping cart. But the shopping cart will be very simple. You will have the “BUY NOW” button and in paypal they can change the quantity. It’s a easy setup if your clients usually buy only one article by visit.

We are going to add some detail in this article in the future.
Hope it make sens for you.

Here is a simple menu done with html and css. You don’t need to be on the text to be able to click on the link, you just need to be on the block. Also you can have some text on two lines and it will be center and last but not least, it looks really similar on Internet Explorer and Firefox.

here is the code.
Enjoy.

(we added a background just for the look)
CSS:
<style type=”text/css” media=”screen”>
html, body {
margin:0px;
background:#ffffff;
}

#button{
font:normal 12px/12px arial;
margin:0px 0px 0px 0px;
width:357px;
background:url(images/button_back.jpg);
height:36px;
}

#button ul{
font:bold 12px/12px arial;
text-align:center;
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li a{
display: block;
background-color: #fff;
color: #d11e01;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding:5px 15px 5px 15px;
}

li#single{
line-height: 24px;
}

li#double{
line-height: 12px;
}

#button li a:hover{
color:white;
background:#d11e01;
}
</style>

Html:

   <div id=”button”>
    <table cellspacing=”0″ cellpadding=”0″ border=”0″>
     <tr height=”33px;”>
     <td width=”30px”></td>
      <td><ul><li id=”single”><a href=”#”>BUTTON 01</a></li></ul></td>
      <td><ul><li id=”double”><a href=”#”>BUTTON 02
ON TWO LINES;br/>DE L’INFECTATION</a></li></ul></td>
      <td><ul><li id=”single”><a href=”#”>BUTTON 03</a></li></ul></td>
     </tr>
    </table>
   </div>

When you have to accept the transfer on the loser account, if you can’t find the option, send them an email as soon as possible, they will be able to accept it for you.

Warning: Cannot modify header information – headers already sent by (output started at /home/espresso/public_html/site/product.php:1) in /home/espresso/public_html/site/product.php on line 4

After spending more than an hour, we found where the problem came from. It was the format in which our php file was saved in! In Notepad++, a little free software we are using, click on Format and select Encode in UTF-8 Wihtout BOM

and then it worked.

There could be other problem like space around the tags (like removing any line after the last tag) but we didn’t face this problem.

A little engine that generate the code to create html button.
http://www.pagetutor.com/button_designer/index.html

A generator of stripes for your background
http://www.stripegenerator.com/

Dot generator for background also
http://www.pixelknete.de/dotter/

Print folder – you might wonder how does that help us… to create a good xml list, if you have tons of pictures to put in a xml file, you print the name of the whole folder in a pdf, and copy-past the text in the xml! This way you are sure not to have any spelling mistakes.
http://no-nonsense-software.com/freeware/

It could be also difficult to get the same margin on the left, so here is a way that works.

here is the html code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head><STYLE>

</STYLE>
<title>List</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<style type=”text/css” media=”screen”>
#box{
background:#ccc;
width:350px;
}

#list_css{
padding-left:100px;

}

#list_css p{

margin:0px;
padding:0px;
}

#list_css li{
font: bold 18px/12px arial;
line-height:20px;
list-style-type:square;
padding:0px;
margin:0px;
}

#list_css ul{
padding:0px;
margin:0px;
}
</style>

</head>

<body>
<div id=”box”>
<div id=”list_css”>
<ul>
<li>TEST 01</li>
<li>TEST 02</li>
<li>TEST 03</li>
</ul>
</div>
</div>
</body>
</html>

the size was setup with the command cols=”xx” like this example and that was the problem.

<textarea id=”field” style=”FONT-SIZE: 10pt” cols=”65″ rows=”7″ name=”themessage”></textarea>

to solve the problem, we had to take off the cols=”65″ and put the width directly in the css, we also did the same for the height and the row attribute.

<textarea id=”field” style=”FONT-SIZE: 10pt” name=”themessage”></textarea>

Css:
#field{
width:300px;
height:200px;
}

Again, it might not be a big problem but it’s nice to know where to look at!

here is a place where to look for this pixel.

space under a <img>

When you put an image in a table, firefox will have the table as big as the image, it will fix exactly, however Internet will add a space under the image and changing the padding of the image won’t fix it.

here is the solution, add style=”display: block”. It’s better to add it only on specific image like this way:

<img src=”add.jpg” style=”display: block”/>

A block will always start at the beginning of the next line in your html so if you apply this to all you images, you might have some surprises with your design.

space under a <form>

About the form, it’s not that internet explorer is doing something wrong with the form, it’s just that without the proper information it handles it in a different way than firefox and add some bottom margin to it. So with your form, just add a specific margin to the form in css should solve the problem. like this:

form{
margin:0px;
}

So here is the problem,

in the css file for a division, this won’t work in ie but works in firefox.
#div_id{
min-height:400px;
}

In Internet Explorer, if you do that it will work, not in firefox.
#div_id{
height:auto !important;
height:400px;
}

solution for internet explorer and firefox:

#div_id{
min-height:400px;
height:auto !important;
height:400px;
}

Hope it could help!

This way we will be able to post some news, some tips and some notes about our work. It will be a great tool for us to keep track of some problems we faced and especially how we resolved them and for visitors, you might be able to find the solution of a problem you have.

We hope you will enjoy our blog.