Triple Border BackGround with CSS
Learn to create Triple Border Background pages without the need for tables! Use CSS to style beautiful pages for poetry, graphic collections, and many other stylish presentations.
A triple border background CSS layout?
YES! It can be done. In fact, it is far easier than the traditional approach to multiple background styles using nested HTML tables.
Not everything artistic has to be done with HTML, as you have so patiently been trying to get through my skull. This page layout has been done with CSS. Compare the source with that of a standard html layout for the triple border background. See the difference? I get lost in the HTML for the triple border background and with this I don't.
Until now, an HTML triple border background required tables within tables within tables to acheive this same layout and design. It is very easy to get lost in the shuffle and making of the tables, nesting them properly and managing content. Not so with this way. All of your background elements are set in the head. No more looking through TONS of code to find where to put what. It's simple, clean, and easy to locate whatever you want to change colors and backgrounds, fonts, etc.
What's really nice about it, is those who insist on java effects, you can use those lovely java mouse effects they have their hearts set on, and no more of the conflict with positioning that confuses the java script. That's why these lovely little things are floating about annoying you while you read this. To have them go behind the images simply change the positioning attributes in the java script itself.
And just so you can see the versatility, we can also place images in a table style format using simply floats as shown above. By playing around with the padding and margin settings for the floats, and adding a border command for the image, I can add a nice border to a pic or simply leave it off, and keep them balanced even when one image is slightly larger than the other.
The CSS Triple Border Background Tutorial
The technique is far simpler than might be imagined. So simple in fact, you might soon forget you ever used tables to achieve a similar effect! All it takes is one nested div and a little bit of CSS style! Learn how in the CSS Triple Border Background Tutorial part 2.
Want more CSS background image techniques? Learn to create beautiful CSS background image picture frames. This incredibly simple technique will win you over with stunning results! Without a doubt, this will be one hot new CSS technique! Once again Papabaer delivers: The CSS Border Image Frame Technique. Need some graphics inspiration? How about textures for your backrounds? Textured Background Tutorial. Next, check out the animated Blinkie Tutorial - it's fun and easy!
Border Background Templates: Double Border Background CSS Template.
[ Return to Top of Page | Access Key list | BIG BAER ]