Previously ::
Part 1 | Part 2 | Part 3
When last we left our draft blog post, we had managed to display a picture and some text. However, we hadn't quite gotten it to look like we wanted. We also didn't have text flowing around it. In fact, it was little more than an island of content that sat there more like a desert island instead of the tropical paradise we envisioned. (I need a vacation if you can't tell.)
<div>
<img src="http://www.landscapedia.info/images/plant_images/Poncirus_trifoliata__Flying_Dragon_Flying_Dragon_Hardy_Orange.jpg" />
<p>Poncirus trifoliata 'Flying Dragon'</p>
<p>Image courtesy of Landscapedia.info</p>
</div>
Which gives us this as a display:
Poncirus trifoliata 'Flying Dragon'
Image courtesy of Landscapedia.info
It's a bit spartan. Let's dress it up. Go back into your Edit HTML on your draft blog post.
Let's start with the very first
div tag, and add a bit of style. In fact, that's exactly the text we are going to insert.
<div style="">
This tells the computer that the part of the island from this first
div tag to the last closing
div tag will have this style. Inside the quotation marks, we'll tell the computer what we want our entire island to look like. Then in each of the individual tags, we tell the computer what we want each of the individual items to look like.
Poncirus trifoliata 'Flying Dragon'
Image courtesy of Landscapedia.info
Our island will have a background color, a border and some buffer space to keep text from running up against it. We'll also tell our island to float. All of this in between those pesky quotation marks, and it will end up like the example to the right.
To make our island float, we add
float: right; to the style. Notice that we put the style element name (
float) then follow it with a colon (
:). We tell it where we want it to float (
right) then finish it with a semi-colon (
;). So now it looks like:
<div style="float: right;">
Now we simply add in each of the other formatting styles in the quotes behind the
float. Let's work on our background color next. The style name is
background-color and we can get the number for our color from a ton of websites (
http://html-color-codes.info/). Now remember that you can play with all of the numbers as long as you stay between 0-9 and A-F. Our color code, light gray, is #EFEFEF. It's the lightest gray you can get before white. Now our tag should look like:
<div style="float: right; background-color: #EFEFEF;">
OK, let's really dress it up with a border. I picked a thin blue border with a dashed line. The element name is, yep, you guessed it,
border. You already know where to get the colors. To make it thin, we set the width to
1px. We can also set it to
solid,
dashed or
dotted. Put it together and our tag now looks like:
<div style="float: right; background-color: #EFEFEF; border: 1px dashed #6699CC;">
Don't worry if your blog software changes your color codes to something that says RGB. Just change it back to this format to play with colors.
Finally, we want to buffer our island so that we don't have text running up against our carefully designed border. Remember that we need to add a buffer outside the island
and inside the island.
Margins add buffers outside the island.
Padding adds buffers inside the island. You can also buffer top, bottom, right and left instead of everything. Let's start with a buffer inside the island all the way around. We'll use
padding: 5px; to put a small buffer in.
Now to add a buffer to the left of the island outside, we'll use margin but change it slightly. Let's add
margin-left: 10px; to put in an outside left buffer. Now our code should look like:
<div style="float: right; background-color: #EFEFEF; border: 1px dashed #6699CC; padding: 5px; margin-left: 10px;">
There are many more style elements you can add to your island. Play with the ones I gave you by changing the colors, line types and numbers. Tomorrow, we are going to format our the content inside our island to make it look snappier.
Posts
