How to Turn the whole element into a clickable link

So we’ve probably all come across that situation where we have a nice list of articles, or images with descriptions that we want to make clickable.

Often we see developers wrap an anchor tag around the image, and another one around the text.. take this fairly standard example:

<div class="list-item">
 <div class="item-img">
 <a href="#"><img src="myimage.jpg"></a>

 <div class="item-text">
 <a href="#">Check out this awesome article about cats!</a>

That looks great, but there are a couple of issues:

  • You have to create two anchor tags
  • You probably have to fix some CSS to make sure there are no borders, or horrible underlines
  • It doesn’t make the whole element clickable..

Continue reading

Nice custom file upload button styled with HTML & CSS

We have all seen the horrible file upload button boxes, we all know what they look like.. and they all differ slightly from browser to browser.

There are lots of hacks out there to emulate an upload button click to launch the file input dialog, or to position the input box transparent ontop of a beautified button, but all of these are limited to the browser support and some browsers require hacks.

I want to show you the simplest way I can think of..

Here’s how it looks (give it a click!):


Ok that’s cool, but how exactly does it work?
Continue reading

How to fix your email newsletter to render correctly in all email clients

So, building a newsletter that works in all the different email clients is a mission!

Luckily there is a program that helps out, adobe fireworks – this program exports the HTML files and images needed for the newsletter, unfortunately this isn’t all you need to do.. That’ll be ok for some templates but if you have any text in yours newsletter there’ll be issues!

There’s a tool called eshotdoctor.com which takes your HTML freshly exported from fireworks and processes is to fix all the issues like padding, images out of shape, text resizing on iPhone mail, images jumping on googles gmail, blue links underline on mac outlook and more!

Give it a try.. It saves you so much time

How to apply a custom google plus +1 share button

So I needed a custom google plus +1 button for a website I am developing.. But there wasn’t any around! Sure there were custom buttons, icons etc, but no way to implement them. I searched on the interwebz for a tutorial on how to make a custom google +1 share button.

But then I decided I might as well just make it myself.

It was surprisingly easy to be honest, and because of the lack of tutorials out there, I thought I’d write a quicky!

So, How did I turn this:


Into this:

Well when you see below you’ll kick yourself if you haven’t already, because it’s so simple.

Continue reading

© 2019 Chubby Ninja

Theme by Anders NorenUp ↑