Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Add Color To The Background Of Two Rows Of Clickable Banners?

Last time in our "Linda's How-Do-I Series? How Do I Add Borders To Two Rows Of Clickable Advertising Buttons?" article we showed you how to build two rows of 2 clickable advertising buttons with separate borders around them.

Now, let's say we want to add color to the background of our two clickable rows. How would we do that?

To review a little - Last time we had 6 clickable banners of equal size (i.e. 150x150px) and we wanted to show them in two rows of 2 banners each with each having a separate border around them. How did we do that?

Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

Now, let's say we want to add padding and borders around our two rows of three clickable advertising buttons each, but we want to eliminate the right hand margins and add padding instead. And, instead of using line breaks <***br/> (minus the 3 ***'s) we decide to use the separate paragraph commands of <***p><***/p> (minus the 3 ***'s)for each row and one line break <***br/> (minus the 3 ***'s)after the first row. How would we do that?

Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***p><***a href="http://thebookreviewcorner.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 3px solid ; padding: 15px;"/><***/a><***a href="http://lindawalshoriginals.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 3px solid ; padding: 15px;"/><***/a><***a href="http://lindawalshoriginalsfabricdesigns.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindaWalshOriginalsFabricDesignsButton150x150-1.jpg" style="border: 3px solid ; padding: 15px;"/><***/a><***/p><***p><***a href="http://freecraftarticles.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/FREECraftArticlesButtonNew150.jpg" style="border: 3px solid ; padding: 15px;"/><***/a><***a href="hthttp://tipsforcraftersontheweb.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton150x150.jpg" style="border: 3px solid ; padding: 15px;"/><***/a><***a href="http://lindawalshoriginalsepatterns.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" /><***/a><***/p>

and that produces this:





Now, let's say we want to add color to the background of our two rows of clickable advertising buttons with blue borders. Let's say we want to add a yellow background. How would we do that?

Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***p><***a href="http://thebookreviewcorner.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 3px solid ; padding: 15px; background-color: yellow;" /><***/a><***a href="http://lindawalshoriginals.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 3px solid ; padding: 15px; background-color: yellow;" /><***/a><***a href="http://lindawalshoriginalsfabricdesigns.blogspot.com/"><***img src="
http://i24.photobucket.com/albums/c47/LWOriginals/LindaWalshOriginalsFabricDesignsButton150x150-1.jpg" style="border: 3px solid ; padding: 15px; background-color: yellow;" /><***/a><***/p><***p><***a href="http://freecraftarticles.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/FREECraftArticlesButtonNew150.jpg" style="border: 3px solid ; padding: 15px; background-color: yellow;"/><***/a><***a href="http://tipsforcraftersontheweb.blogspot.com"><***img src="
http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton150x150.jpg" style="border: 3px solid ; padding: 15px; background-color: yellow;"/><***/a><***a href="http://lindawalshoriginalsepatterns.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" style="border: 3px solid ; padding: 15px; background-color: yellow;" /><***/a><***/p>

And, that produces this:








Hopefully, you now know how to build two rows of 3 clickable advertising buttons with separate colored borders around them and give them colored backgrounds.


Posted by Linda Walsh Originals - "Doll Patterns for Grown-up Girls!"

No comments:

Post a Comment