Web Design Discussion

Most web site banners are created using images. However images can slow the loading of your web pages and search engines don’t read images particularly if they contain text. Many sites often use images for navigation. This prevents search engines from spidering them.

Using CSS you can replace the images and get the added benefits of fast loading, search engine friendly pages.

How to create a text banner.

Place this CSS between the head tags on your web page:


<style type="text/css">
<!--
.box1 {
width:300px;
padding: 5px;
border-width: thin;
border-style: dotted dashed;
border-color: #990000;
background-color:#FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
-->
</style>


Here’s the XHTML:

<.div align="center".><.br />
<.p align="left" class="box1".><.strong.>FREE<./strong> One Year Home Warranty
<.br /.>
<.strong>FREE<./strong> Home Inspection – Up to $400
<.br />
<.a href="http://www.homefinders.com".><.strong>For All Maryland and Virginia home buyers<./a><./p>
<./div>

(remove the periods in the code above for the correct XHTML)

Here are css banners with different style borders (the first banner displays the code above).

Here are table banners to show how you can also use html tables to create banners without images.

This entry was posted on Tuesday, May 9th, 2006 at 9:42 pm and is filed under CSS . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.