Monday, February 12, 2007

Linda's How-Do-I-Series? How Do I Space Two Banners of Different Sizes Evenly Within Their Boxes?

Last time in our article "Linda's How-Do-I Series? How Do I Change The Background Color Between The Borders Of My Pictures Or Banners?" we showed you how to add color to the borders around your banners and how to make those banners clickable back to your website or blog. Plus we showed you how to change the background color around those banners.

Now, let's say that you have two banners of different sizes that you want to space evenly within our two side-by-side boxes. How would we do that?

To review a little - Last time we had two banners that we wanted to show side by side, but we wanted some 15px of padding around them, wanted the banners to be clickable, and wanted the borders to be blue in color rgb(0, 0, 105). Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px;" /><***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:





Now, let's say we have two banners of different sizes. One is a 150x150px button and one is a 125x125px button and we want to space them evenly within the side-by-side boxes. How do we do that? Well, here's how (minus the ***'s which are there so you can view the HTML in this article):

Here's what they look like before we try to space them evenly:





And, here's their code before we adjust them (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: 15px;" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px;" />


So, what do we need to do? Well, we need to center the banner in the middle with more padding around it until the box is the same size as the one for the 150x150 button. How would 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 produces this:




Now let's say we want to make those banners clickable back to their website or blog. 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;" /><***/a><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://lindawalshoriginals.com/images/lindasblogbutton150x150.jpg" style="border: 4px solid rgb(0, 0, 105); padding: 15px;" /><***/a>


And, that produces this:





I hope this helped to show you how to space two banners of different size evenly within their side-by-side boxes and how to make them clickable.


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

No comments:

Post a Comment