Abeon Tech

I often get asked how to properly align divs and containers on website pages.
The most common bugbear is centering divs either vertically and horizontally, which can be a pain unless you know how.
This post has three examples of how to position the divs and should help clear up any confusion you may have.

Text is simple to align with css using the “text-align” property, as below:

// CSS
.positionme { text-align:center }
 
// HTML
<div class="positionme">
Position Me!
</div>

Positioning a div to center vertically and horizontally is a little trickier, but easy when you know how!
Let’s start with centering the div horizontally:

// CSS
.positionme { text-align:center; width:250px; margin:auto auto }
 
// HTML
<div class="positionme">
Position Me!
</div>

We can use a similar trick to get the div positioned centered vertically too:

// CSS
.positionme { text-align:center; width:250px;height:250px; 
       left:50%; top:50%;
       margin:-125px 0 0 -125px;
 }
 
// HTML
<div class="positionme">
Position Me!
</div>

If you have run a WordPress blog for any length of time, you should know how large the SQL database can get.

This is largely due to the “Post Revisions”, which get auto-saved.
If you edit a post a few times, a huge list of revisions gets saved to the database. You can see these at the bottom of the post editing page.

This post has easy methods to disable and delete the post revisions, which are automatically cached by WordPress.

More »

Very easy to customize and would fit well into a website providing a variable rate service and suchlike.

It would be better to use css for all the styling and layout information, but it’s easier to copy and paste the source code below as one file.

More »

Web developers loathe the task of building forms almost as much as users loathe having to fill them in. These are both unfortunate facts of the Web, but some smart JavaScript and intelligent CSS can go a long way to remedying the situation. In this article, I’ll introduce a number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own.

I’m going to start off with some simple tricks, before introducing the interesting stuff later on. If the material seems too simple for you, feel free to skip ahead.

It’s the Little Things that Count.

More »

The web design world is filled with excitement and experience, creativity and skill. Often, experienced web designers utilize a set of solid, proven techniques that others may not notice. Let’s take a look at a few of these techniques and how you can implement them into your own site quickly and easily.

More »