Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Build Two Rows of 3 Clickable Advertising Buttons Each?

Last time in our "Linda's How-Do-I Series? How Do I Use Margins, Padding, and Borders?" we showed you how to add margins, padding, and borders around banners and/or pictures.

Now, let's say we have 6 banners of equal size (i.e. 150x150px) and we want to show them in two rows of 3 clickable banners each. How do we do that?

To review a little - We had two banners that we wanted to show side by side. 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" />

And, that produced this:



Then we wanted to show the banners side by side, but I wanted some margins around them. 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: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img style=***"MARGIN: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" />

And, that produced this:



Then we wanted to show the banners side by side, but I wanted a margin on the right hand side only. 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" />

And, that produced this:




Now, let's say that we want 6 banners of equal size (i.e. 150x150px) and we want to show them in two rows of 3 banners each. How do 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 produces 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.

Now, let's say that we don't want them abutting each other. We want some spacing in between them. To do that we need to add some margins and have decided to add right hand margins to the first two banners in each row. And then we need to add an additional line break <***br/> (minus the 3 ***'s) to create space in between the two rows. How do 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 produces this:





Now, let's say we want to make all of those banners clickable. 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):

<***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://lindawalshoriginalsfabricdesigns.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 produces this:





Hopefully, you now know how to build two rows of 3 clickable advertising buttons each. In the next article we are going to add borders to our two rows of clickable buttons.


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

No comments:

Post a Comment