Author Archives: webdes

Max Blog Press Banner Ads

Posted on by
Reply

Easy Banners with Max Blog Press Banner Ads

Statistics have long shown that….

“Rotating your advertisement banners can defeat banner blindness and increases CTR.”

But..

One of the issue about banner advertisement on WordPress blog is the banner ad management.

Normally adding banner ads will need you to edit your WordPress theme, mess with lots of codes and even then you won’t have the result as you want.

This is pretty tedious and time consuming if you have to go through all the codes just to add some banners.
Wouldn’t it be great if:

  • You had the power to easily place your banner ads in any position you want to on your blog?
  • You could track your banners, find out how good they really are doing?
  • You could rotate your banners in multiple spots and transform your WordPress blog into advertising gold.

Above all what if you didn’t even have to worry about editing your WordPress theme to do all of this?

I have Max Banner Ads on ALL my blogs. Saves me a ton of time by not having to mess with a bunch of code. Even though I do KNOW HOW to do it, Max Banner Ads just eliminates the need for ANYONE to be a WP programming expert. Get it now at Max Blog Press

PHP Templated Website

Posted on by
Reply

PHP Template HEREDOC String Creation Tool

Exactly what is PHP? PHP means Pre Hypertext Processor. PHP is what is known as “server-side” scripting. This means that the server “serves” up the scripts, thus doing away with “client-side” scripting such as “javascript”.

What this means for you, the designer, is that you can now create files that include repetitive code and information, and serve up that same information to each page on your website.

Where does HEREDOC string creation tool come into the design? The HEREDOC string creation tool does away with quotation marks in the page, which is a huge plus. No more nesting php commands in single/double quotes.

To learn how to create websites using PHP and the HEREDOC string creation tool, visit here:
PHP Templating

About the author. Claire Poulton is a professional web designer. I design my sites using ONLY CSS and PHP, no tables, no WYSYWIG editor. Visit my design site at Tygerz Designs

How To Create Jump Link Top Of Page

Posted on by
Reply

I always hated that code <a name=”top”></a> under the body tag. So here’s a better solution

  • Reference links can be placed anywhere on your page
    • A convenient link to have at the bottom of your webpage is one that the visitor can click on to “jump” them back to the top of the page, without using the scrollbar
    • At the bottom of your page place your link between paragraph tags <p><a href=”#top”>Top of Page</a></p>
    • ***NEW*** Instead of just the plain old <body> tag, use this instead <body id=”top”>. Your link will work and you won’t be using ugly code for the “jump link” under the <body> opening tag
    • You can name the reference link anything you like – I use top

About the author. Claire Poulton is a professional web designer. I design my sites using ONLY CSS and PHP, no tables, no WYSYWIG editor. Visit my design site at Tygerz Designs

How To Fix List-Style-Image bug in IE

Posted on by
Reply

Have you experienced IE’s crocked rendering of list-style-images?  Either they don’t display at all or  are chopped in half (choose how much here! – LOL), especially when you’re floating a list beside an image. Or how about the annoying IE “peek-a-boo” bug, hiding and re-appearing indiscriminately.

Anyway, I found a solution: First I created a class ul.list for the unordered list.

Clear the list-style-type to none, remove all margins and padding. This makes it cross-browser compatible.

ul.list
{
list-style-type:none;
padding:0;
margin:0;
}

Then I created a rule for the .li

ul.list li
{
margin-left:40px;
background-image:url(../images/arrow.gif);
background-repeat:no-repeat;
background-position:0 6px;
padding-left:22px;
}

Indent the left and right margins about 10px narrower than your header and paragraph margins.

Use a background-image instead of a list-style-image. You will have to adjust the background-position through trial and error so it lines up beside the text.

As for the padding: If your background-image is 16px in width, make the padding the width of the image plus about 6px, for a total of 22px. The extra px for padding will depend on your personal tastes as far as white-space between the image and the text happen to be.

<ul class=”list”>
<li> Item One</li>
<li> Item Two</li>
<li> Item Three</li>
<li> Item Four</li>
</ul>

You can also do this for “nested lists” indenting the margin by only 10px instead of the 40px as in the demonstration.

About the author. Claire Poulton is a professional web designer. I design my sites using ONLY CSS and PHP, no tables, no WYSYWIG editor. Visit my design site at Tygerz Designs

CSS Only Round Corner Boxes

Posted on by
Reply

Today’s post was going to be a demonstration of creating round corner boxes with CSS Only!

But, NO, the WP WYSIWYG Editor repeatedly changed all the “b” box codes to “strong”. Go figure!

Here’s an outside link so you can see the demonstration for creating round corner boxes with CSS Only

CSS Only Round Corner Boxes

About the author. Claire Poulton is a professional web designer. I design my sites using ONLY CSS and PHP, no tables, no WYSYWIG editor. Visit my design site at Tygerz Designs

Still laying out out your website designs using tables?

Posted on by
Reply

I still use tables ….. WHAT? But NOT for what you think. I use tables when I have to show some kind of a schedule, or data presentation….. and I style my tables with CSS, so I don’t have to mark up each <tr> and <td> tag to present them…….

You must have heard by now that designing with tables is becoming obsolete. CSS is the professional easy way to design web pages, and it has quickly become a must-have for standards-compliant websites.

What are standards-compliant websites?

At first new web designers think OMG Rules! But, these rules make it easier in the end, which is what? Designing a web page that can be viewed in any web browser and can be accessed by anyone who may need screen-readers, braille devices, or who want to print information or receive via a cell phone or i-pod. This is ALL available now by using standards-compliant (X)HTML for markup and content, and CSS for design. No more “transparent gif’s” to create white space between your page elements.

CSS (Cascading Style Sheets) allow you to separate the content of your website from the design, making both much easier to update and much friendlier to search engines. Search Engines look for CONTENT, not endless redundant and empty <tr> and <td> tags.

Tables require much more mark-up in the of your web page This means it takes longer to download, and more bandwidth usage.

Tables are usually slower to layout for the browser because tables require mathematical calculations by the browser engine which means it takes longer for people to actually view your pages.

Tables usually prevent incremental rendering. In other words your page is loading away in the background revealing nothing but a blank white screen with little parts showing up bit by bit.

Tables may require you to chop single, logical images into multiple ones. You’ve seen those web designs where the header image is all in small pieces designed to fit within a table cell. Very difficult to change the look of your page.

Once you know CSS, table-based layouts usually take more time to implement. Over the past few years I have created simple templates. One-column, Two-column, and Three column, as well as some unusual ones that mimic a frames layout.

Tables are semantically incorrect mark-up for layout because tables describe the presentation, not the content – which is what people came to your page to see… CONTENT.

People who use screen-readers have a terrible time with table-based layouts. Wouldn’t you want to make your website content available to everyone?

Tables lock you into the current design and make re-designs MUCH harder than semantic HTML plus CSS. You can’t just “fix” a table based design to update it. You pretty much have to create the WHOLE design from scratch. With CSS layout and design you only need to change those elements in your style sheet that you want to look different.

Create Unusual Effects with CSS and Opacity

Posted on by
Reply

I created this unusual graphic effect in only a couple of minutes, using a background image I already had on my computer. The topmost box is NOT a graphic but is styled with special background color, and special border styles, heights, and colors – to make it look like a picture frame.

Stop and smell the roses

Here’s how you do it:

  • Use these three “class” rules

div.outerbox
{
margin:0 auto;
width:500px;
height:250px;
background:url(img/roses.jpg) no-repeat;
border:4px solid black;
border-color:#eee #aaa #ccc #ddd;
}

div.innerbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#fff;
border:10px solid black;
border-color:#eee #aaa #ccc #ddd;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

div.innerbox h1
{
margin:30px 20px;
font-weight:bold;
color:#000;
text-align:center;
}
Continue reading →

Image Align with CSS

Posted on by
Reply

I have had requests from a lot of people who still hang on to their table-based layouts to help them align images on their pages. Somehow the table structure does weird things to image and text placement.

Using CSS properties to place images on a page is so easy that I can’t understand why those people still cling desperately to placing images in table data cells and hope they don’t break their layout.

First of all, I create a rule for the img Selector:

img
{border:0;}

If you are using banners or images as links on your pages, this will ensure that that ugly blue border doesn’t appear. The other bonus of this is that you don’t have to add border=”0″ to each <img /> tag on your page.

Next I create two “img classes” which will place the images either on the left or right side of the page.

img.left
 {
float:left; /* the float property places image on left side */
margin:5px 30px; /* top and bottom margins are 5px, left and right 30px; */
margin-right:5px; /* overrules the right-margin declaration of 30px so there is less white space between the image and the text */
}

img.right
{
float:right; /* the float property places image on right side */
margin:5px 30px; /* top and bottom margins are 5px, left and right 30px; */
margin-left:5px; /* overrules the left-margin declaration of 30px so there is less white space between the image and the text */
}

This last class a “clearing class” which can be used if you want your text to not wrap around the image, but instead drops down under the image, back in the normal flow of the page.

.clear
{clear:both;}

So much easier than trying to fit images into table data cells.

The (X)HTML

<img class=”left” src=”someimage.gif” title=”description of your image” alt=”description of your image” />

Header Text Capitalization

Posted on by
Reply

You can automatically capitalize the text of your h1 – h6 tags in your code using the rule -
text-transform:capitalize;

How to Use This Rule

h1,  h2,  h3,  h4,  h5,  h6
{text-transform:capitalize;}

(X)HTML
<h1>the first heading on my web page</h1>

Using the “text-transform” declaration will automatically capitalize the first letter of each word in your <h1> tag.

No Border Rule

Posted on by
Reply

I have seen a LOT of people purporting that they know how to create websites with CSS. But, when I see style rules such as: img{border:none;}, I wonder where they learned CSS.

The Standards Compliant Rule for displaying NO BORDER on images

If you do NOT want a border on an element such as an image, the rule would be as follows:
img {border-style:none;}

Why “border-style” instead of “border”? Border is the short-hand for naming all border rules in one line – which consists of border-width, border-style, border-color – ie: border:1px solid #000;.

Another CSS Tip
Claire Poulton