Abeon Tech » CSS

Centering divs

admin — Mon, 14 Jun 2010 00:34:30 +0000

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>
</pre>

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>
</pre>

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>
</pre>

AVElf – AV Arcade Template

admin — Tue, 16 Dec 2008 16:30:04 +0000

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.

Install

Turn off “Featured Games” on the Admin/Settings page.
Upload all files from the “# Replace” folder and overwrite the original ones.
Set AVElf as the default skin on the Admin/Settings page.
Report any bugs or errors!

Notes

Please note: This no longer works with the official AV Arcade source code. It will only display correctly when used with AV Arcade v4.0.2 c [Unofficial].
This template has been tested on:
– FireFox v3.0.4
– Internet Explorer v7.0.5
– Opera v9.62
This template looks best when viewed with FireFox, as with any website.

Please note:
This template has been updated to fit into the w3c valid version. The Template is included with the modified code

About AV Arcade

AV arcade is a free arcade script from AV Scripts. It has features which easily match those of paid scripts. There is no need for anyone to buy an arcade script!

AV Arcade will always be free, but support is much needed to make sure AV Arcade is around for longer. If you purchase a Gamepack or copyright removal you are really helping to keep AV Arcade development going. Version 4.0 is not too far away and will include some great new features including this template you see right here.

AV Arcade is available for free by following the link below:
Download AV Arcade

Css Image Hover Effect

admin — Tue, 02 Sep 2008 19:19:01 +0000

With CSS all you need to do is put a piece of code in your style sheet to automagically make image or text rollovers.
You don’t need a second image or messy scripting.

Step 1

Put the code in the head section of your page between the head tags, like in the below example:

<head>
<title>CSS Image Hover Effect</title>
<style type="text/css">
#center{ text-align:center; padding:auto auto auto auto;}
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
</head>

You only have to do this once.

Step 2

Then add a class=”linkopacity” to the link when you want to make the rollover.
It works with hyperlinked text and images.

Note:
Even though this code isn’t strict standards compliant, all the style information should go in the CSS file too!