Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Add Borders To Two Rows Of Clickable Advertising Buttons?

Last time in our "Linda's How-Do-I Series? How Do I Build Two Rows of 3 Clickable Advertising Buttons Each" article we showed you how to build two rows of 3 clickable advertising buttons each.

Now, let's say we want to add borders and padding to each clickable banner. However by doing so I will be widening the banners. Because we are confined by the width constraints of htis article we will need to reduce that to two rows of two clickable banners each. So, how would we do that?

To review a little - Last time we had 6 banners of equal size (i.e. 150x150px) and we wanted to show them in two rows of 3 banners each. 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):

<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindaWalshOriginalsFabricDesignsButton150x150-1.jpg" /><***br/>
<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/FREECraftArticlesButtonNew150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton150x150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" />

And that produced this:




The <***br/> (minus the 3 ***'s) inserts a line break. We could have used <***p> <***/p> (minus the 3 ***'s) which indicates new paragraph to surround the second paragraph as well.

And, last time, we didn't want them abutting each other. We wanted some spacing in between them. To do that we needed to add some margins and decided to add right hand margins to the first two banners in each row. And, we added an additional line break <***br/> (minus the 3 ***'s) to create space in between the two rows. 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):

<***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindaWalshOriginalsFabricDesignsButton150x150-1.jpg" /><***br/><***br/><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/FREECraftArticlesButtonNew150.jpg" /><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton150x150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" />

And that produced this:





Then we decided we wanted to make all of the banners clickable. 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):

<***a href="http://thebookreviewcorner.blogspot.com/"><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***/a><***a href="http://lindawalshoriginals.blogspot.com"><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" /><***/a><***a href="http://everythingedirectory.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindaWalshOriginalsFabricDesignsButton150x150-1.jpg" /><***/a><***br/><***br/><***a href=***"http://freecraftarticles.blogspot.com"><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/FREECraftArticlesButtonNew150.jpg" /><***/a><***a href="http://tipsforcraftersontheweb.blogspot.com"><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton150x150.jpg" /><***/a><***a href="http://lindawalshoriginalsepatterns.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" /><***/a>

And that produced this:





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="http://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:






Hopefully, you now know how to build two rows of 3 clickable advertising buttons with separate borders and padding around them. In the next article we are going to add color to the borders of our two rows of clickable buttons and then color to the background of our two clickable rows.

No comments:

Post a Comment