Monday, February 12, 2007

Linda's How-Do-I-Series? How Do I Add Background Color To Boxes Surrounding Two Clickable Banners Of Different Sizes?

Last time in our Linda's How-Do-I Series? How Do I Space Two Banners Of Different Sizes Evenly Within Their Boxes? article we had two clickable banners of different sizes that we wanted to space evenly within our two side-by-side boxes. Now let's say that we want to add background color to boxes surrounding two clickable banners of different sizes? How would we do that? Well, here's how.

To review a little - last time we had two banners of different sizes. One was a 150x150px button and one was a 125x125px button and we wanted to space them evenly within the side-by-side boxes. How did we do that? Well, here's how (minus the ***'s which are there so you can view the HTML in this article):


<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton125x125-1.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 27.5px;" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px;" />


And, that produced this:




Then we wanted to make those banners clickable back to their website or blog. How did we do that? Well, here's how(minus the ***'s which are there so you can view the HTML in this article):

<***a href="http://thebookreviewcorner.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton125x125-1.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 27.5px;" /><***/a><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px;" /><***/a>


And, that produced this:




Now, let's say we want to add yellow coloring to the background of those boxes. How would we do that? Well, here's how (minus the ***'s which are there so you can view the HTML in this article):

<***a href="http://thebookreviewcorner.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton125x125-1.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 27.5px; background-color: yellow;" /><***/a><***a href="http://lindawalshoriginals.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px; background-color: yellow;" /><***/a>


And, that produces this:





I hope this helped to show you how to add background color to boxes surrounding two clickable banners of different sizes?


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

No comments:

Post a Comment