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>

AVElf is a free template for the AV Arcade game site script (v4.0.1)

AVElf is a little different from other AV Arcade Templates I’ve seen, and has been modified a lot.

The flash arcade skin it totally free. All I require you leave the link in the footer.

I have moved the locations of the Featured Games and News modules so they fit into the template better.
I have also SEO and Adsense Optimized this template a little, including keywords hear the header more text on pages and so on.

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 »