If you are wondering what a Belcher Button is, it’s that ugly button that you see on sale pages usually. The one on the thumbnail. Yes, that BUY IT NOW / ADD TO CART button, that people tend to click in order to purchase what you are selling.

If you still don’t know what it is about, you can take a look at Belcher’s video on facebook about it and see why it works.

And today I’m going to show you how to make one by yourself with simple HTML and CSS.

Live Preview

Let’s see the code now and I will then explain it to you:

HTML

<div class="buttonContainer">
    <h1 class="buttonHeader">"Name of Your Product"</h1>
    <div class="buttonBorder">
        Regular Price <del>$300</del> Today <ins>$99</ins>
        <a href="#" class="addToCart">Add To Cart</a>
        <a href="#">Add to Cart</a>
        <div class="buttonIcons">
            <img src="http://www.railroadforum.com/forum/icon_smile_visa.gif" width="30" />
            <img src="http://www.cruisedeals.co.uk/img/icon_mastercard.gif" width="30" />
        </div>
    </div>
</div>

CSS

.buttonContainer { width: 400px; margin: 0 auto; font-family: tahoma; }
.buttonHeader { text-align: center; color: #C70311; margin-bottom: 10px; }
.buttonBorder { border: dashed 3px #C70311; padding: 10px; text-align: center; font-size: 15px; }
.addToCart { display: block; width: 200px; padding: 5px 10px 2px; margin: 5px auto; font-size: 25px; background: #FCD629; border: solid 2px red; color: navy; text-decoration: none; }
.buttonIcons { margin-top: 5px; }

Now, as you can see I decided to use classes instead of ids for the elements. This is because usually sale pages MUST have more than one of these buttons and ids must not repeat. Marketers say, that it must include AT LEAST three (3) of them, because a lot of people decide to buy only after they see the call to action for the third time.

I must admit the button does not look exactly as his, because I decided to make it entirely in css without using a background image. You could easily reproduce his effect by making a background in photoshop and setting it in the css code.

And for this example I’m just hotlinking the credit card logos, you should download their original logos and use those.

Once again another easy tutorial for ya.

Have swing!

This is what I’m going to show you how to do:

It’s a nice effect that can be used for many things, for a nice gallery or something. You could combine this with some JS, add a hover effect to the picture and have it display the caption.

edit: theodin posted a comment with a link to this kind of effect, check it out at buildinternet.com

This is a pretty simple trick that works in different browsers except for older IE versions I think (because IE seems to hate transparent png’s). Btw, RIP, IE6.

Let me show you the code and then explain how it works:

<div style="width: 300px; height: 224px; position: relative;">
    <div style="position: absolute; bottom: 0px; _bottom: 4px; width: 100%; background: transparent url('http://zurka.us/bg_overlay_black.png') repeat scroll 0 0; font-family: verdana; font-size: 11px;">
        <div style="color: #fff; margin: 10px; text-align: center; position: relative; z-index: 1;">This is Kakashi from the Naruto anime.</div>
    </div>
    <img src="http://www.quizilla.com/user_images/K/KA/KAK/kakashihatake1226/1158375681_resKAKASHI.jpg" width="300" />
</div>

So basically what we are doing is enclose our image in a relatively positioned DIV element. Inside this element we create another DIV element, absolutely positioned. We stick it on the bottom of it’s parents div, so it goes displayed on the bottom (we could position it on the top if wanted). The background of this div is a semi-transparent black PNG image, 1x1px (http://zurka.us/bg_overlay_black.png). This is our black box, the content holder.

Now what we need to do is add our text to the box. Inside the box we create another DIV, give it a 10px margin (this way it has some space around it), style the text and put it over the other layers with z-index.

And that’s it, we have it done. It’s a simple HTML + CSS effect that I tried to get using different methods (like css opacity and stuff) but didn’t manage to replicate.

Original image: Kakashi at Quizilla

So once again, easy peasy!
Have swing, thanks for reading!

Did you ever want to do something like this? An ad showing from the bottom of the screen?

Well, today I’m going to show you how to do it, without the need to spend $47 Yay!

We are going to do reproduce this by using mootools and some styling. Again, it’s an easy thing to make.

Let’s start by including mootools in our document and writing a little script that will basically do all the job that need to be done. This goes into the <head> of our html file.

<script src="inc/mootools-1.2.1-core.js" type="text/javascript"></script>

<script>
    window.addEvent('domready', function() {
        slideUp = new Fx.Tween('footerad', { property: 'height', duration: 1000 });
        (function(){ slideUp.start(0, 90) }).delay('1000');
        $('closead').addEvent('click', function() {
            $('footerad').tween('height', 0);
        });
});
</script>

Let’s analyse the script:

1. When the DOM is ready, execute the following function:
2. slideUp is the variable in which we ‘store’ the motion of our sliding div. We give a tween effect to our element with ‘footerad’ as ID
3. Next, we make the function execute after 1 second (1000ms) and make it raise the height from 0px to 90px. This is going to be the height of our slider on the bottom
4. Now, we add a button that will close the ad if clicked. We could do something more complicated here by adding some code that would write a cookie so the ad doesn’t show up again if the user reloads the page but we don’t need it, we want to bug the user, right?

Now that’s it with the script. All we need to do now is create or DIV element (if you go check out the page at the top of this post you will see they use an IFRAME.. I’m not going to use it).

Now, I think that if you don’t understand how DIV’s work you won’t understand a shit here. Feel free to ask for further explanation in the comments. Oh and I will style the divs directly here, without a css file, so we see how it works.

<div id="footerad" style="display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 0;">
    <div style="position: relative; left: 0; bottom: 0;" id="positioned_relatively">
        <div style="background: #002949; border-top: solid 3px #3b8ccb; position: absolute; top: 15px; left: 0; width: 100%; height: 75px; color: white;" id="background_color">
            <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" id="RSS_icon" />
            <div style="margin: 10px 0 5px 105px;" id="text_div">
                <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
            </div>
        </div>
        <div style="position: absolute; right: 5px; top: 0; font-size: 11px;" id="close_button">
            <a href="#" id="closead">[close]</a>
        </div>
    </div>
</div>

1. We give the first DIV the ID ‘footerad’, since that’s the id we told the script to show when the dom is ready. We style it so it will cover 100% of the width, will be 0px high (the script is going to increase the height with a nice movement) and we make it stay fixed at the bottom of the page. The background of this element is not set, so it will be transparent.
2. The second DIV stays there only because we need a relatively positioned element so we can absolute position other elements inside it.
3. The third div we give a background color and a border on the top, we position absolutely, 0px from the left so it sticks left and 15px from the top so we have some transparent background on top of it (the RSS or whatever icon will look like it’s coming out of the slider)
4. Now it’s time to position our rss icon. We position it absolutely and move it 20px from the left and -15px from the top (this is why we positioned the third div 15px from the top).
5. We make a fifth div with the text and our form. We could position it absolutely but I decided to position it using margins. So we move it 10px from the top and 105px from the left of the screen (because there’s the icon)
6. We close this div and make a new one, positioned absolutely, 5px from the right and 0px from the top, this will be out close button. We make a link and give it the ID ‘closead’
7. We close every div tag. It’s done

Now, as I said, I maybe made a complete confusion writing this. If you don’t understand how this works ask and I will help you out. If you don’t care how this works just copy/paste the code and play a bit with the styling. It’s not hard to understand even if you don’t read my messy writing.

What’s different from this is, that they use a wider image on the left and everything seems more centered. You could do the same by positioning the icon further from the left and then giving your text div a bigger margin on the left.

Have a nice day and go drink some beer with the $47 you just saved!

Live example

As IE does NOT support the use of the CSS position: fixed; property, I found a workaround that works in all browsers but which I didn’t test with other content on the page. The demo is still using the old code, displaying well in all the browsers except IE. This code will work there as well.

<body style="margin: 0; padding: 0;">
    <div style="position: relative; width: 100%; height: 100%;">
        <div id="footerad" style="display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;">
            <div style="position: relative; left: 0; bottom: 0;">
                <div style="position: absolute; background: #002949; border-top: solid 3px #3b8ccb; top: 15px; left: 0; width: 100%; height: 75px; color: white;">
                    <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" />
                    <div style="margin: 10px 0 5px 105px;">
                        <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                        <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
                    </div>
                </div>
                <div style="position: absolute; right: 5px; top: 0; font-size: 11px;">
                    <a href="#" id="closead">[close]</a>
                </div>
            </div>
        </div>
    </div>
</body>

All that changes is that we create a dummy div with a 100% height and position the ad absolutely on it’s bottom. Should work well with all the content as well, but as I said, I didn’t test it.

However, I suggest you using this with caution and parse it only if the useragent shows up to be an IE. Create two different CSS files and use something like this:

<style type='text/css'>@import 'all.css';</style>
<!--[if IE]>
<link
 href='ie_win.css'
 type='text/css'
 media='screen'>
<![endif]-->

Have swing!

I started reading some tutorials and books about this very nice and simple javascript framework, with which you can do supercool things in the browser.

It’s actually pretty simple to use for simple effects and gets complex as you try to do magic with it.

After reading a chapter about it’s Tween function, I decided to make a simple menu with a simple fade animation. It’s really something for beginners, since this is what I am, a beginner.

We are going to do a menu with some links that change their position and color with a simple animation when we hover them. Easy peasy. Check the result here.

First: we start the document as always, with a doctype (I still use the transitional xhtml) and include the framework.

<!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" xml:lang="sl" lang="sl">
    <head>
        <title>MooTools</title>
        <meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />
        <script src="inc/mootools-1.2.1-core.js"></script>

Second: we add an event to our window element which is going to start as soon as the DOM (Document Object Model – the browser) is ready (it won’t wait all the other elements to load [big, fat images, advertisments etc]).

<script type="text/javascript" language="javascript">
            window.addEvent('domready', function() {

             });
</script>

Third: when the DOM will be ready we want it to get all the links with a specified class (I made it this way, you could easily make all the links in a specified UL or any other element behave the same way) and apply a special behaviour to them.

                $$('a.click').addEvents({

                    'mouseover': function() {
                        this.morph({
                            'padding-left': '20',
                            'color': ['#1E0CB5', '#94BB06']
                        })
                    },

                    'mouseout': function() {
                        this.morph({
                          'padding-left': '10',
                          'color': ['#94BB06', '#1E0CB5']
                        })
                    }

                });

As you can see, MooTools is very simple and easily understandable. Using $$(‘a.click’) we create an array of all the links in our page with the class=”click” attribute.

Next, we tell the function to Morph the link when the mouse hovers the link and when the mouse leaves the link. We add 10px of padding on the left and change the color to green when the mouse passes over the link and restore the default values when it leaves. Easy.

Still in the head we apply some styles to our menu.

        <style>
            a { color: #1E0CB5; }

            #menu { list-style: none; margin: 0; padding: 0; }
            #menu li { width: 150px; background: #eee; }
            #menu li a { padding: 4px 10px; display: block; }
        </style>

And now we complete our simple page.

    </head>
    <body>
        <h3>Something nice</h3>
        <ul id="menu">
            <li><a class="click" href="#">link</a></li>
            <li><a class="click" href="#">link</a></li>
            <li><a class="click" href="#">link</a></li>
            <li><a class="click" href="#">link</a></li>
        </ul>
    </body>
</html>

That’s it, a nice animated menu to use on your website! If you want to see the whole code in one piece, check the source of the live example.

Hope I was clear enough.

I’ll write again with a new example of what I’ve learnt!

Sorry for not writing recently but my laptop decided to stop working and actually it really did stop working. It has some motherboard problems again I guess, keeps dying and the keys in the last row aren’t working (except for y, b and n). So it sucks, can’t really write anything. Luckily I’ve got a very kind girlfriend who lent me her laptop so I could work. “Work”.

As I wrote in the first “lesson” (Let’s Make A Website Together), this post will be about designing a simple interface using HTML and CSS. I already wrote everything but unfortunately it went lost along with my laptop. Sucks.

So what we’ll be doing is something like the image below. Nothing complicated as you can see.. Let’s keep it simple for the beginning.

As you can see form the image, the page will be composed by 7 elements, having the #container keep our other elements “tight” and centering the page. We will have two #menus (I will make those menus simple, links only, without the use of ordered/unordered lists), a #header with the logo, a #sidebar with the latest news and our favorite links, the #content where we will load our content and the #footer with the copyright notice or our email, whatever we want.

So let’s start at the beginning. We need to open our new document, write some lines in and save it as index.php. I usually write the same lines in every file I start and save it, so it is there in the folder, waiting to be updated. And I save my work after everything I make, even for just a smaller change.. I got used to this because once the electricity went off and I lost like 2 hours of work. After all the CTRL+S combo is not that hard to hit and it can for sure spare a lot of bad mood (or nerves).

Okay so let’s see the first few lines of code:

<!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" xml:lang="en" lang="en">
    <head>
        <title>My First Website</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />
            <meta name="keywords" content="this, is, my, first, website" />
            <meta name="description" content="Creating my first website by scratch. It's a simple one but good for learning." />
    </head>
    <body>

    </body>
</html>

As you can see, I start my project like every webpage should start, with the DOCTYPE declaration, so keep the first two lines somewhere you can easily find them and copy/paste them into your new projects. We then open the HEAD part of the site in which we put our page title, charset, styles, meta keywords, the meta description and everything that we have to load before the rest of the page. For the charset I usually use windows-1250 encoding since I’m from Slovenia and I use special charactes like č, Å¡ and ž and I don’t really like UTF-8. The meta keywords and description are used by the search engines which get an idea about what our site will be talking about and rank you higher in the results. The description will be shown in the search result of a search engine. It is the text that you see under the site’s title.

In the head I also load my style.css file which will include the (guess what?) style of the page. It is best to load an external file since it gets stored into the cache of the browser and helps the site load faster.

As you can see I open and close the BODY tag and then close the HTML tag. I save the file and I go make myself a sandwich. It’s time to start working. From now on I will write the code that comes between the body tags.

I will now put down the HTML part, explain it and then go to the CSS part, put it down, explain and confront the results I get. The HTML part is going to be without styles and since the DIV is a block element, all of our site elements will be listed one under the other, in the hierarchy I put them in the code. Let’s start.

<div id="container">

    <div id="top-menu">
        home | contant | sitemap
    </div>

    <div id="header">
        Our big fat logo comes here
    </div>

    <div id="main-menu">
        home | news | members | whatever | link
    </div>

    <div id="main-content">
        Something really nice here, this will be our content soon.
    </div>

    <div id="sidebar">
        My friends:
    </div>

    <div id="footer">
        &copy; 2009 OurSiteName.Domain
    </div>

</div>

I created a file with these lines in it so you can see our result. It’s basically nothing but 6 lines of text written one under the other which we are now going to style using Cascading Style Sheets.

I start by wrapping everything in the #container div, to which I will define a specific width, position on the page and everything else I want to style inside of it. Since the layout will be simple the only thing you need to understand is what will happen to the #content and #sidebar divs. We will float them one next to the other. Floats are a bit hard to understand since they can get pretty tricky and we very often have problems with them because of the incompatibility between web browsers (it’s not an incompability between them but they render the site in a different way), like for example Firefox and Internet Explorer. I have to admit that I lost my nerves lots of times because of IE, mainly because of IE6, but I can see nobody actually cares about IE6 nowadays since it’s being replaced by IE7.. But I still see many users use it so I think we should take it into consideration as well.. But it’s a lot of work, including hacks and so on, we are not gonna do this in this lesson. Maybe when we finish the site, we are going to look into tweaking it some more.

Let’s start with the styling. I will do this step by step, so you can see or results as we keep on going on. We put the following code in the style.css that we put in the same folder as our index.php file.

/* here I style the body, select the font size and family and background color */
body { font-family: arial; font-size: 12px; background: #f8f8f8; }

#container {
width: 800px;
position: relative;
margin: 0 auto;
background: white;
border: solid 1px black;
}

What I do to the container is define the width of 800px, “paint” it in white, give it a simple solid border and position it relatively and center it using the MARGIN property. See the result by yourself. Please note that I’m using html files for now since I didn’t install apache and php on this laptop and can’t use .php files locally. And if you check the source code of that file you will see that I am putting the styling directly into it and not into the style.css file. It works the same but reloads every time so the loading time takes longer but it really doesn’t matter with such small codes. Anyway, you put it into the style.css file and you’ll be fine.

#top-menu {
background: #55bdda;
text-align: right;
padding: 5px 10px;
}

#header {
background: #3a8195;
text-align: center;
font-size: 20px;
color: white;
padding: 40px 0;
}

#main-menu {
background: #244f5c;
color: white;
padding: 5px 10px;
}

With this I’ve styled the top part of the site, including as you can see the top menu, header and main menu. Every property is self explanatory except for the padding, which I’ll try to explain now. The padding is basically the space that you make between the border of the box and the content of the same box. The values of this property are like this: padding: TOP RIGHT BOTTOM LEFT. Why did I write only two values then? Because if we leave them out, they will get the same value as their opposite. So in that statement I say the padding should be 5px 10px 5px 10px.

EXAMPLE

Since I know I explained this in a shitty way, I suggest you read the w3schools article about padding. But the main point is that the padding will push your text to the inside of it’s container. See the result here.

Now that we styled the head we move on to the body and footer. Let’s see the code.

#main-content {
width: 550px;
padding: 10px;
background: #cee1e6;
float: left;
}

#sidebar {
background: #007394;
color: white;
padding: 10px;
float: left;
width: 210px;
}

#footer {
clear: both;
background: #163741;
color: white;
text-align: right;
padding: 5px 10px;
}

Since I will be floating the content and sidebar, I have to use a little bit of mathematics now. At least that’s how I do it. What we do now is define the width of the sidebar. Let’s say that we want it 230px wide so we have 570px for our content. Do make the content of the sidebar clearer, we are going to give our box the padding property, so we move the text into the center a little. We are goingo to apply a 10px padding on each side, so we will define the width to 230px – 10px*2 = 210px and float it to the left.
Now we have 570px for our main content. But since we want this box to be clear as well, we apply the same padding as to te sidebar. So here, we again have 570px – 20px = 550px od width. We float this box to the left as well.

Now that we have floated the content and sidebar, we kinda messed up with the layout and it’s “path”. If we now style the footer without taking the floats in consideration, the footer will come out messed up. Lifted a bit or maybe even in a position that it’s not what it should be. To save ourself from this mess we must clear the footer. To clear means telling the box that we don’t want it to be touching other elements according to the value that we clear it with. In this case we clear it with a both value, which means it won’t touch anything on the left and on the right side. This makes it slide down and fix itself like it should.

Check our today’s final result here.

One last thing, make you have a good host, not some terrible fly by night operation. You can find the best cheap web hosting plans and if you’re a super serious person, a dedicated server.

I’m sorry if anything wasn’t clear, I’m sleepy and my head will explode but I had to write it. I will go through it again today and correct the mistakes and make things clearer.

If there’s any question on your mind don’t hesitate to ask it, I will be happy to reply you.

I thought about a nice and simple project.. I will write a step by step tutorial on how to create a simple website. Why? Because I’m bored and don’t know what to do in my free time.

I will show you how to design a simple layout with CSS and how to use PHP and a MySQL database to make a simple website with news, users and comments.

I will do this in different posts, so be sure to subscribe to my RSS feed or check back often. Posts will be coming daily I guess.. And we will start with a simple design.

I am going to show you the code and explain it step by step so you will understand it clearly (I hope). I will also provide you with examples of course. All you need is a web server with php and mysql installed on it.. You can set this up on your machine using software like xampp (apache, php, mysql and more in one pack, install and your done) or find a web hosting service that will give you the space. I would suggest you Globat since they offer a very cheap and stable service. You will pay about $8 per month for their hosting. As for the domain, you can buy one on Go Daddy (domains for a low price) or sign up for a free account on afraid.org and get yourself a free subdomain.

Edit: I forgot to tell you how I will structure it.. well, no one read the post so it’s no problem )

1. This post is the introduction <-- we are here
2. Designing a simple interface in HTML and CSS
3. Use PHP to display page content
4. Setting up the database and connecting the site with it
5. We will add the register, login and logout features
6. We will add the add news, delete news and edit news features
7. Commenting the news
8. Adding features that you suggest (but if I guess right there won’t be many of them).

Hope you will enjoy this project. I will try to make it interesting

PS. Ideas are more than welcome. Feel free to add a comment if you have any!

I used UltraEdit and then changed to Notepad++ but decided to start using something more specific for php. I found a site that reviews quite a lot of them, PHP editors review. I downloaded PHP Eclipse (you need Eclipse and then go to Help – Software updates – Available software – Add site – oaste http://update.phpeclipse.net/update/stable/1.2.x) and will give it a try.

I was wandering what do you use (if you use) for your programming? I’m also in CSS so it would be great if it would also support this language..

I actually got the idea on Antonio’s excellent blog (Woork) and used his code in some of my sites but it didn’t work well for me, so I wrote something mine that works (I am not saying his doesn’t work, it just didn’t work for me).

One of the main differences is that he calls the css via the id of the list and I do it via the class of the list. The difference is that if you show the list more than once (on the top and on the bottom of the page) my version will validate and his will not.

The result of a copy/paste of my code gives you this:

• The « prev button is unclickable (we are on the first page)
• The first page is selected
• The second and third pages are normal page links and
• The next » is the a link when we pass our mouse over it (:hover)

The HTML code looks like this:

<ul class="pages">
	<li class="prev-off">&laquo; prev</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=' . ($_GET['page']+1) . '">next &raquo;</a></li>
</ul>

The ul class is “pages“, to turn the buttons prev and next off we use the class “prev-off” and “next-off“. We give the class “active” to the <li> element, not to the <a> element! Notice that the link is not present in the active <li> element.

This is the CSS:

.pages {
	list-style: none;
	padding: 0; margin: 0;
	overflow: auto;
}
.pages li {
	float: left;
	margin-right: 2px;
}
.pages li a {
	display: block;
	padding: 1px 5px;
	border: solid 1px #c0002d;
	color: #c0002d;
}
.pages li a:hover {
	background: #c0002d;
	color: white;
	text-decoration: none;
}
.pages .prev-off, .pages .next-off {
	border: solid 1px black;
	padding: 1px 5px;
}
.pages .active {
	padding: 2px 5px 1px 5px;
	font-weight: bold;
}

You can customize this in any way you want just by changing some lines in the CSS. Try playing around with the colors (background, border and color attributes).