Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Add A Colored Border Around My Banners?

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

Well, let's say we want to add color to the borders around our banners - how would we do it?

Well, here's how:

To review a little - last time we had two banners side by side. Here's the HTML coding for that (minus thee ***'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:



Last time we also had two banners that we wanted to show side by side, but we wanted some margins of 15 px (i.e. pixels) 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:



Now let's say we want to draw a blue rgb(0, 0, 105) border around those banners and we want our border to have a 4px (i.e. pixels) thickness and we want our line to be a solid line. If we wanted a dotted line we would change the "solid" to "dotted" and if we wanted a dashed line we would change the word solid to "dashed." So, how do we code for this?

Here's the HTML coding to do 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);"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);">

And that would produce this:



The color blue could also be represented as #000069 versus rgb(0, 0, 105) that is shown in our coding in which case the coding would be style="border: 4px solid #000069;

Now let's say we want to have a little margin around two banners. How would we do that?

Here's how to do 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 would produce this:



I hope this helped to show you how to draw borders with colors around your banners and/or pictures.

Next time we'll make those banners clickable.



Posted by: "Doll Patterns for Grown-up Girls!"

No comments:

Post a Comment