13 Jun 2010 @ 11:34 PM 

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>
Posted By: Abe
Last Edit: 13 Jun 2010 @ 11:35 PM

EmailPermalinkComments (0)
Tags
Tags: , ,
Categories: Web Design
 27 Nov 2008 @ 5:26 PM 

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 »

Posted By: Abe
Last Edit: 08 Aug 2009 @ 11:56 AM

EmailPermalinkComments (7)
Tags
Tags: ,
Categories: Web Design
 23 Oct 2008 @ 10:29 PM 


A DHTML calculator with error checking.
Definitely more stylish than the traditional JavaScript calculator, if nothing else!

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.

Dhtml Calculator Source Code

More »

Posted By: Abe
Last Edit: 20 Aug 2009 @ 10:51 AM

EmailPermalinkComments (0)
Tags
Tags: ,
Categories: Web Design
 23 Oct 2008 @ 9:58 PM 

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 »

Posted By: Abe
Last Edit: 08 Aug 2009 @ 12:02 PM

EmailPermalinkComments (0)
Tags
 23 Oct 2008 @ 9:41 PM 

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 »

Posted By: Abe
Last Edit: 17 Nov 2009 @ 01:25 PM

EmailPermalinkComments (0)
Tags
Tags: , ,
Categories: Web Design
Change Theme...
  • Users » 195
  • Posts/Pages » 37
  • Comments » 28
Change Theme...
  • VoidVoid « Default
  • LifeLife
  • EarthEarth
  • WindWind
  • WaterWater
  • FireFire
  • LightLight

DDO Forum



    No Child Pages.

Login



    No Child Pages.