Welcome to the Frontpage

Superimpose text over an image by using CSS-styled text

Friday, 03 April 2009 17:00 administrator

If your page design calls for a photo with superimposed text, you don't have to create an image file that includes both the photo and the text. Instead, you can use CSS to keep the text and image separate and still achieve the desired effect.

How would you handle a page design that called for a photo with superimposed text? The common approach has been to create an image file that includes both the photo and the superimposed text, and insert it into your page with an tag.

It may be time to rethink that standard solution. Although inserting an image that consists of text superimposed over a photo is a valid, standards-compliant technique, there are hidden costs to using such a composite image; there are also distinct advantages to replacing the composite image with CSS-styled text over a background image.

The old way to superimpose text
The standard technique for superimposing text over an image has been to use an image editor, such as Photoshop, to create a composite image that contains the desired text embedded into the photo. Then, you could add the resulting image file to your Web page using an tag.

alt="Superimposed Text"/>

Occasionally, you might have used HTML text floating over a background image instead, but only if the image was large enough to fill the page or small enough to fit in a table cell. Otherwise, the only question about how to create and apply the composite image was what compression settings to use to reduce the file size, while maintaining adequate sharpness in the text.

Image optimisation for composite text/photo images is a real challenge because the crisp edges of text deteriorate rapidly as JPG compression ratios increase. Even moderate compression levels cause the text to exhibit noticeable edge distortion and compression artifacts. As a result, large text looks fuzzy and small text becomes unreadable, unless you stick with low compression settings that produce high-quality images at the expense of large file sizes that make your page slow to load.

The CSS way to superimpose text
You can easily duplicate the effect of text superimposed over an image by using CSS-styled text and a background image in a

tag. It's a simple, straightforward technique, but surprisingly few Web builders use it. Perhaps it's due to concerns about proper text positioning over the image, but it's most likely because the reliance on composite images has become a long-standing habit.

To insert a background image into a

, you use the background-image attribute. You'll also want to set the size of the

to match the image dimensions, and set the background not to repeat. The following sample code defines a background image for a

with the id = test:
div#test {
    background-image: url(/images/backgroundimage.JPG);
    background-repeat: no-repeat;
    height: 500px;
    width: 380px;
}

Superimposed Text

If the text positioning relative to the image is simple, you could add any necessary text formatting to the div#test style and use the padding-top and padding-left attributes to position the text in the

. On the other hand, if you need more control over text positioning, or the text consists of multiple lines and paragraphs, you can nest the text within another

, like this:
div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: 25px;
    top: 200px;
}

Superimposed Text

Note that the nested has its position attribute set to relative so the left and top attributes position the text within its containing element—the containing the background image—rather than on the page as a whole.

Advantages of the CSS method
Using the CSS-styled text technique for superimposing text over a photo has several advantages:

Smaller image files: By removing the text from the composite image, you can usually employ much stronger image compression settings without degrading the quality of the text. The result is faster page loads.
Sharper text rendering: CSS-styled text is always rendered at the maximum resolution of the visitor's computer screen. There are no softening or compression artifacts to worry about.
Easier text editing: Editing the superimposed text in a composite image requires recreating the image file; editing the text in a is just like editing any other plain text on your Web page.
More flexible positioning: You have more options for positioning a on your page than positioning an tag.
Text accessibility: CSS-styled text is fully accessible to special-needs visitors and to search engines. There's no need for alt text attributes or other accessibility workarounds.

The next time you need to superimpose text over a photo, consider using a background image in a

containing CSS-styled text instead of creating a composite image in Photoshop. It may be hard to break the habit of resorting to old techniques, but the results can be worth the effort.

This article was written by Michael Meadhra

Last Updated on Friday, 03 April 2009 17:06

Three column layout in less than ten lines of CSS

Friday, 03 April 2009 16:58 administrator

Many developers have dedicated their time and efforts such as me to try and move developers over to the proper standards of web code and away from older or non w3c approaches to site designs. One of these long used but improper approaches to site designs is the dreaded table use for your sites layout.

Tables were never meant to be a websites layout backbone as IE and Microsoft FrontPage have been advocating for years. Today however most developers know to stay away from tables unless to display data in a actual table format and now stick to XHTML and block elements such as division boxes (

The problem that arises is that even though the use of CSS and block elements actually gives us the developers a more dynamic and cleaner way for working with complex layout structures it lacks some of the essentials in creating what we consider to be a standard layout in the ideals of web design. One of these paradoxes is the three column layout and our understanding of how this layout should act according to how we all have grown with the web. If you think about what you would consider a three column layout to be and how it should function you might come up with the following:

Any column height determines the overall height of the layout.
Fluid layout and wont break under browser font size changes.
Column colors and center cell color can differ.
Column colors and center cell color can extend to the full height of the layout.

Seems simple enough, but in fact many great minds have been trying to accomplish the best approach to meet these four simple requirements or more with use of XHTML and CSS for years were a table three column layout can already achieve this. I myself have been spending a great amount of time trying to come up with the most compliant and cross browser friendly method that achieves the above requirements for a three column layout. My first attempts were to try and study what is already out there and see what ground has been broken in this three column layout battle and I found lots of creative yet very similar method out there that even got me distracted from what might be accomplished is you simply would think outside of the box.

Everything I had found tackled the three column layout and above requirements by doing what we have been taught for years now about proper block element design and that is something call the box model method that says we must nest elements to properly apply padding, margin and height styles. So it was no wonder that I too got sucked into this approach to accomplish the perfect three column layout. What I found that if you simple stop and rethink maybe even give and take a little you can accomplish this three column layout but do so while making it completely cross browser friendly and less than 10 lines of CSS.

Yes you read right I did say that I have accomplished this most sought after layout with less than 10 lines of CSS code. So with the little history lesson out of the way and our full understanding as to why were are even sitting here talking about this layout we can begin to get started with this tutorial.

In this tutorial I am going to show you how to create the perfect three column layout. This three column layout is designed under the common screen resolution of (1024x768) and meets all of our above requirements while again under 10 lines of CSS code! Let’s get started by first creating our html structure for our three column layout.

Ok so far this is a great structure to create a three column layout. We have our header and our footer boxes not always a must but give our layout that desired look we are after. Next we have our two left and right columns and in the center of the two we have our center column. Each column has a nested div box in order for us to add padding to our columns and the content they will hold.

Ok now let’s move on to our CSS portion of this tutorial.

body{} #main{} #wrapper{} #header{} #footer{}

 .column{} .center{}

 .caps{} .column div, .center div {}

Let us break down the first five CSS rules.

body {text-align:center; background-color:#ccc;} #main{margin-left:auto; margin-right:auto; width:980px;} #wrapper{float:left;} #header{height:90px; border-bottom:#ccc solid; border-width:1px;} #footer{height:30px; border-top:#ccc solid; border-width:1px;}

Our first rule is pointing directly to our documents body tag and has a text align of center and a background color of light gray. I set our body's tag to have a text align of center for IE5 browser to center our proceeding child elements to the pages over all width and I gave our body a background color to contrast our three column layout once it’s finished.

Our next rule is named #main that has two margin rules (margin-left and margin-right) both of which are set to auto. We also give a set width of 980px to our #main rule. We set its margins to auto in order to align it to the center of our pages over all width and give it a width of 980px for a safe real state under a 1024x768 standard screen resolutions.

Next is our rule named #wrapper and it has a float rule of left to properly float any child elements nested with in it that also carry a float rule.

Our last two rules (#header & #footer) are for our header and footer elements that are self explanatory and of user preference.

Moving on lets look at our next two CSS class rules.

.column{width:165px; float:left;} .center{width:650px; float:left;}

Our first class rule is .column and is a rule for both our left and right columns and has a width of 165px and another float set to a left in order to properly float all our columns next to each other rather than over each other.

Our next class rule is .center and is for our center column. This class rule also has a width and float rule but this time I use the remaining width of our 980px to fill up with our center column. (980 -165 -165 = 650)

And last but not least our last two CSS class rules.

.caps{width:980px; float:left; background-color:#FFF;} .column div, .center div {padding:15px}

Ok so our first class rule here is .caps and is used in our header and footer elements. I call it caps but because visually it’s like a soda can, our header and footer elements cap both the top and bottom of our three column layout. This rule ".caps" has a width of 980px to span our fully allowed width and again a float left rule to properly stack header and footer over and under their sibling elements.

Now our last CSS class rule points to our left and right columns child div element .column div as well as our center columns child div element .center div. This rule gives all column children div elements a padding style of 15px around all sides to space out content within each column.

Great now we have a complete understanding of our HTML structure and our CSS rules it’s time to point out what makes this approach so different from the others. Remember our requirements?

Any column height determines the overall height of the layout.
Fluid layout and wont break under browser font size changes.
Column colors and center cell color can differ.
Column colors and center cell color can extend to the full height of the layout.

Ok right now as this tutorial stands we have successfully completed 3 out of the 4 requirements for our three column layout. The only one that is not yet fulfilled is the last requirement.

"Column colors and center cell color can extend to the full height of the layout."

If I was to go in to our column classes and play around with our columns background colors we indeed are in control of each of our columns color. The problem is however once you begin to add content to anyone of the columns you soon realize that the colors of each column do not extend to the full height of the layout when extending the layouts height manually with content in any one of the columns.

The solution to our last requirement is not one of pure CSS, CSS hacks, box model padding and margin tricks. What I suggest is a background image to define all three columns and colors that can span the full height of our #wrapper CSS rule. In Photoshop I have created an image that has a width of 980px (our respected real state for a standard screen resolution) and a height of 500px. I then divide up the image in to our three column sizes (left=165px center=650px right=165px) and added a drop shadow to my left and right sides that points in over my center column like so.

three column layout background

Next change the canvas size of this image to be that of only 1px so our browser only has to load a tiny strip of our background image and with the use of CSS we will tell our browsers to repeat the image vertically for us. By making our image only 1px tall it makes our background load nearly at 1 second down all the way to a 14.4 dial up modem so no poor loading times should result from this method.

Now in Photoshop save the image for web and make it a gif image and name it whatever you like. My background image has drop shadows that consume up to 9 shades of gray so I tell my save for web dialog to only utilize up to 9 colors for my background gif. The color utilization for you and your own background color will vary so please take note of this.

Our last step is to go back to our #wrapper CSS rule and add our new background image and repeat it vertically.

#wrapper{float:left; background:url('/images/standard.gif') top left repeat-y;}

See how we have added a background rule (not a background-image rule) this rule supports images, alignment and repeat styles. URL is the location of the image relative to our document and top left is how I want to position the image in my elements background while repeat-y repeats the image in a y axis (vertically).

That’s it folks, we have successfully created a fully cross browser friendly three column layout in under 10 lines of CSS code.

CONCLUSION
Some may say that this is not the best way to accomplish this three column layout with our above requirements while at the same time will point to far more complex and long winded CSS rules to accomplish the same three column layout. Some of these complex methods to the three column layout consist of hacks to make them cross browser friendly or simply do not support all browsers. This is simply a method I like to use for the convenience of it and light weight / simplicity of the structure and CSS.

This topic was written by Devin R. Olsen

Using MSysObjects - Getting information of Tables, Forms, Query, ...

Thursday, 19 March 2009 15:12 administrator

MS Access System Objects consist of several tables that give you important and useful information about your database. One such Table is the MSysObjects table. This gives comprehensive information about all your database objects (i.e. queries, forms etc.) that can come in very handy when you document your database. To obtain access to system objects set View/Options/ General/Show System objects to "yes".

A very useful feature of MSysObjects that should not be ignored is the information that the columns DateCreate and DateUpdate supply on your database objects. The DateUpdate can be used in the creation of a "Last Updated" query that can tell you what modules, forms or reports have been modified since a particular date or within a specific period.

We use the 'LastUpdated' Query on a regular basis when we are updating our clients' databases with new or changed objects. Create a New Query and copy and paste the SQL statement below to generate a list of new / changed objects.

SELECT MSysObjects.DateCreate, MSysObjects.DateUpdate, MSysObjects.Name, MSysObjects.Type FROM MSysObjects;

If the values in the column Type faze you, just refer to our ready reckoner for MSysObjects.Type given below. This contains the list of values that are commonly used by developers and are consistent over MS-Access versions 2.0, 7.0 and 8.0

Type of Object	Value of MSysObjects.Type
Tables	1
Attached Tables	6
Forms	-32768
Queries	5
Reports	-32764
Modules	-32761

More details can be seen at perfectparadigm.com

Last Updated on Friday, 29 May 2009 13:30

ASP PDF with FPDF

Wednesday, 25 March 2009 16:15 Veasna Much

FPDF is a PHP class which allows to generate PDF files with pure PHP, that is to say without using the PDFlib library. F from FPDF stands for Free: you may use it for any kind of usage and modify it to suit your needs.

FPDF has other advantages: high level functions. Here is a list of its main features: