Aligning Graphics on Web Pages

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 77 people | Log in to rate

Ranked #130 in Squidoo Tips, #12,526 overall

How to Align Images on Webpages Using HTML

Want to align an image on a web page? Need side-by-side graphics and text? Are you trying to align an image left, right or center? Or do you need to know how to position a caption under an image?

This Image Tutorial Covers:

Got Graphics? No? Check out my "Where to Get Free Web Graphics -- Legally" tutorial!

This lens is part of Greekgeek's Graphics Tutorials Suite!How to Align Images • How to Upload Images
Where to Get Graphics (Legally!) • Free Squidoo Graphics
How to Fix Missing Images in Amazon Listings
Photoshop Tricks: How to Make Glossy Buttons • Add a 3D Frame to a Photo

HTML: Put Pictures Where You Want Them! 

Codes to Put Images on Web Pages or in Squidoo Text Modules

HTML -- Hypertext Markup Language -- puts hidden "tags" in webpages that mark which parts are text, images, or links. The tags contain information for your browser about how to display each part of the page.

First, we need an image! Upload a picture and get its web address. (Don't know how? See the Using Flickr and Using Photobucket sections of my How to Upload Images tutorial).

Use the <img> tag as a placeholder for your image on the page. The web address goes inside the tag, like this:

<img src=http://www.somedomain.com/imagename.jpg>

SRC is short for "source." Put the image's URL (location) after the equals sign.

For example, here's the HTML code for the magician Squid at upper right:

<img src="http://www.istad.org/lenses/squids/magic-squid.jpg" style="width: 150px; float: right;">

Notice the extra options tucked inside the <img> tag to set its placement and size. For the rest of this tutorial, I'll teach you what options are available for graphics layout and how to use them.

Back to Top ⇑

How to Make an Image a Clickable Link 

You know how to make a link like this one, right?

Link to my Greece Odyssey Lens

HTML Code:

<a href=http://www.squidoo.com/odyssey>Link to my Greece Odyssey Lens</a>

Do the same thing to turn an image into a link: wrap <a href=urlgoeshere>...</a> around the <img> tag. For example:

How to Align an Image in HTMLHTML Code to Turn an Image Into a Clickable Link:

<a href=http://www.squidoo.com/odyssey><img src=http://www.istad.org/squid/parthenonNW.jpg></a>

As you can see, it's a good idea to use graphics that include a headline or label as part of the picture.

Back to Top ⇑

How to Center an Image or Headline 

The easiest way to center a graphic (or any text) is to put this around it:

<p align=center>(image goes here)</p>

which makes a paragraph -- including a blank line after it -- containing the image. For example:

HTML Code to Center an Image

HTML Code to Center an Image:

<p align=center><img src="http://www.istad.org/squidoo/align-images/computer-squid.jpg"></p>

You can add a caption below the picture, before the end-of-paragraph code (</p>), to get the caption centered.

HTML Code for a Caption Under a Centered Image
I Squidoo: Do You?

HTML Code for a Caption Under a Centered Image:

<p align=center><img src="http://www.istad.org/squidoo/align-images/computer-squid.jpg">
I Squidoo! Do You?</p>

Back to Top ⇑

How to Align Side-by-Side Graphics and Text 

There's two ways to make images and text side-by-side. One, adding align=left or align=right inside an <img> tag, takes less typing:

Side By Side Image and Text in HTML<img src=http://www.istad.org/lenses/squids/idea-squid.jpg align=left>

The other takes a little more typing, but introduces the style attribute, which we'll be using shortly for fancier special effects:

<img src=http://www.istad.org/lenses/squids/idea-squid.jpg style="float: left">

The style attribute lets you piggyback a bunch of fine-tuning commands (CSS) onto basic HTML.

You don't need to know what HTML and CSS are to use them, but if this alphabet soup is starting to feel intimidating, check out "What the Heck are HTML and CSS, anyway?"

Note: I simplified the code in the above example. In fact, I had to do something else to this image -- add margins -- or it would be jammed against the text next to it. The next section explains margins.

Back to Top ⇑

How to Add Margins Around Images 

HTML Margins Around Images Again, there's two ways to do this: the old way using HTML (the language of the web since the beginning), the new way using style for fine-tuning.

The old, quick and easy way is to add hspace (horizontal space) and/or vspace (vertical space) around the image, measured in pixels.

Here's the code:

<img src=http://www.istad.org/greece/templeHephaistosSm.jpg align=left hspace=30 vspace=20>



CSS Margins and Padding Around ImagesNotice how the top and left side of the first photo are indented from the top and left side of this section. That's becanse hspace and vspace add padding to both sides.

CSS style lets us fine-tune each margin separately: margin-top, margin-right, margin-bottom, and/or margin-left. We usually measure them in (px).

Here's the code:

<img src="http://www.istad.org/greece/templeHephaistosSm.jpg" style="float: left; margin-right: 30px; margin-bottom: 20px;">

To adapt it, change the src to point to the URL of your image, change :float: left; to float: right; if you want the image on the right side of the column, and adjust margins as needed.

Usually, you just want to add a margin-bottom and a margin on the side opposite the float.

Back to Top ⇑

How to Add Background Images 

How to Make a CSS Background ImageHere's a close-up photo of the chair I'm sitting on. (It was handy.)

With CSS style=background-image, any image can be tiled as the background for any webpage element. We usually use this trick with paragraphs, but it also works for lists, headers, etc.

Unfortunately, background images often make it hard to read text. Sometimes even changing the color of the text (see code below) doesn't help. This example demonstrates why you should choose background images with care, instead of just snapping a random photo!

Here's the code:


<p style="background-image: url(http://www.istad.org/squidoo/align-images/wicker-pattern.jpg); padding: 10px; color: white;">

One solution is to have the background repeat in only one direction, using repeat-x (only horizontal), repeat-y (only vertical), or no-repeat (useful when you've got a graphic fitted to the paragraph...but be careful; text may be a different size on different computers.)

Here, I've repeated the background image as a vertical strip, then added padding to the left side of the text. padding separates text from the edge of a paragraph, as opposed to margin, which is the space around the paragraph.

Here's the code:

<p style="background-image: url(http://www.istad.org/squidoo/align-images/wicker-pattern.jpg); background-repeat: repeat-y; padding-left: 125px;">

I used 125px for the padding because I knew my image was 100 pixels wide.



The better solution, of course, is to use a graphic that doesn't clash with the text over it. Here I lowered the contrast and raised the brightness of the image using Photoshop. The code is the same as the first example, except I didn't change the text color.


See my Make a Fancy Table of Contents tutorial for some wonderful and useful ways to use background images.

Back to Top ⇑

Amazon Spotlight: Photoshop 

Adobe Photoshop CS4

Adobe Photoshop CS4

Amazon Price: $638.99 (as of 07/09/2009)Buy Now

When you start working with graphics, an image retouching and manipulation tool becomes a must. I haven't tried it, but I've heard the free graphics program GIMP can get basic tasks done like cropping, adjusting brightness and contrast. However, sooner or later, you may need something more than the basics. That's when it's time to bite the bullet and purchase Photoshop. I'd guess that nearly every web designer uses it, and most of the graphics you've seen on the web were prepared with it. (Link: Mac version)

How to Scale / Resize an Image 

How to Scale or Resize an Image Your web browser doesn't do quite as good a job as a graphics program, but it can scale images! Specify either the height or the width, and the browser resizes the other dimension to match.

In fact, I've been doing this throughout my tutorial, because my squid graphics are huge. (Graphics look better scaled down than up). I was concealing a part of the code in my examples above. Here's what I was really doing:

<img src=http://www.istad.org/lenses/squids/idea-squid.jpg align=right width=200>

align=[where] width=[number] are part of basic HTML. This method works fine if the graphic itself has margins (white space) around the image. If you find you need margins, use style and specify the width like this:

<img src=http://www.istad.org/lenses/squids/idea-squid.jpg style="float: right; width: 200px; margin-left: 15px; margin-bottom: 10px">

The HTML version saves typing; the second version's better if you need CSS fine-tuning like margins or captions under the image (which I cover in the next section).

Note that you can also define width or height using percent. For example, width="50%" means "make the width of the image half the width of the paragraph."

Back to Top ⇑

How to Add Captions Under Aligned Images 

How to Make a Caption Under Aligned ImageEarlier, I showed you how to center a caption under a centered image using HTML. Now, I'm going to show you my fanciest layout trick: a caption under a graphic that's left- or right-aligned!

At right is a graphic pushed to the margin using float: right, with some margins separating it from this paragraph.

Here's the code:

<img src=http://www.istad.org/greece/templeHephaistosSm.jpg style="float: right; margin-left: 20px; margin-bottom: 10px;">

Aligned Image with Caption HTML CSS
Temple of Hephaistos
© 2005 Ellen Brundige

Now for the tricky part. Instead of just having an image floating on the right, I want a whole paragraph over there, side by side with this one. That "floating" paragraph contain TWO things: (1) the image and (2) the caption below it. The trick is to set the "floating" paragraph width to the same width as the image. That forces the text (i.e. the caption) inside the "floaty" paragraph to wrap when it exceeds the image width.

Here's the CSS code that does it:

<p style="float: right; width: 200px; margin-left: 20px; margin-bottom: 10px; font-size: 9pt; font-style: italic; text-align: center;"><br><img src="http://www.istad.org/greece/templeHephaistosSm.jpg" style="margin-bottom: 5px;"/>Temple of Hephaistos
© 2005 Ellen Brundige</p>

If you're having trouble figuring out what all the codes mean, just copy and paste the whole kit and kaboodle, then change three things to use it:

  1. Change the URL of my image to the URL of your image.
  2. Change the width (in pixels) to the width of your image.
  3. Change the caption. You can break it into multiple lines, as I did, or just use one line.
font-size, font-style and text-align are tweaks to make the caption look good. These are optional. For many more font special effects, see my CSS Tutorial lens (Here's shortcuts to sections on text colors and font, size, bold or italics).

Back to Top ⇑

Warning: HTML and CSS Can Be Addictive! 

HTML and CSS with ImagesAt first HTML and CSS look like utter gobbledygook. But the more you use these codes, the easier they get. Once you're comfortable with the basics, you'll find yourself adding new "special effects" like drop caps and borders.

Before you know it, you'll create something like this fancy photo gallery! Sorry, I can't retrace my steps on that one... but feel free to swipe and adapt the code if you can make head or tails of it!

Don't be ashamed to stick with the simple stuff like centered images. It took me years to learn this stuff. Besides, simple, uncluttered layouts are generally more usable and more readable.

WORD TO THE WISE: whenever you've gotten some image code to work, I suggest saving it to Notepad or a spare document. You may reuse the code later on another lens. Or, if you get too fancy on the current lens and "break" the graphic (missing quotes, missing semicolons are a frequent culprit), you can go back to your last-saved version.

Now I've told you all I can about aligning images. Browse some of my other How-to Graphics Tutorials to learn about image hosting, Squidoo's built-in image hosting tools, free Squidoo graphics, and more!

Back to Top ⇑

Greekgeek's Graphics Tutorial Suite 

Don't forget to check out some of my other How-To Tutorials for Images and Graphics! Plus, some linkware clipart for Squidoo members!
featured lens How to Upload Images on Squidoo

Need help getting graphics onto Squidoo? Look no further! This easy Uploading Images Tutorial will help you dress up your Squidoo lenses. SHORTCUTS! Jump to... •  Squidoo Modules for Displaying Pictures •  Squidoo's New Photo Gal...

featured lens Squidoo Graphics For Your Lenses!

Here's some Squidoo Squid graphics to jazz up your lenses! I've dressed up Squidoo's squid logo in different ways to use as clipart. Feel free to use these or change them! All I ask is credit and a link. Other Squidoo lensmasters are doing this too:...

featured lens Free Web Graphics: Where to Get Them (Legally!)

With all the clip art, free web graphics, and stock photography sites out there, it's easy to make your lenses and webpages look great without breaking copyright! Some people think images posted on the web are up for grabs. They aren't, any more tha...

featured lens Fixing Missing Images on Amazon Listings

Don't you hate it when an Amazon product you want to feature is missing its picture? Sometimes it's an old book that's out of print, but available through used booksellers. Sometimes the product listing just happens not to have an image. And you know...

featured lens How-To Photshop Tutorial: Glossy Buttons

Do you want to be able to make your own glossy web 2.0 buttons? Here's a free Photoshop tutorial to get you started. It teaches you to make buttons of any shape or color with text and/or an icon on them. Once you've learned this basic technique, you...

Appendix: Width and Colors of a Squidoo Lens 

When you're using side-by-side images, it's useful to know how much horizontal space is available. Answer for a Squidoo lens: 590 pixels, although extra-wide graphics may be allowed to extend past the edge of the column:

Squidoo CSS Color Codes


Here's the codes for the colors found on Squidoo lenses. If you use Photopshop, you can paste these numbers in the Color Picker popup window in the box with the # sign next to it.

Squidoo Orange: #ff9900 • Squidoo Teal: #046381
Body Text: #333333 • Module Subtitles: #666666 • Various Headers: #999999
Discovery Tool: #e1e8f2 Light Gray Background: #f7f7f7Mustard Background #fff79e

Poll Colors:   #ff6600 • #005087 #cc007a • #8e0055 • #008e84 • #dddddd



Back to Top ⇑

Guestbook 

Shameless Plug Widget Tweet it!   Stumble it!
Rate it!     Favorite it!

I hope you found this lens useful. Feel free to leave a note! If it was really useful, then please consider clicking the magic widget!

Lensmaster

strato wrote...

Greekgeek, you never stop surprising me! You know more about Hellas from me (even I am Greek)! This lens shows other experties you have, beyond classic studies!
I could tell I'm a little jealous! But not! You are inspiration to me! Somewhere else I wrote that in a previous life you might be Artemis. Yes! But in another previous life of yours you might be one of the seven ancient wise men! Anyway thanks for sharing you knowledge with us!

ReplyPosted May 13, 2009

Lensmaster

JanaMurray wrote...

This is an amazing resource, thanks :)

ReplyPosted May 11, 2009

Lensmaster

GoutWife wrote...

I've taken to heart your advice on saving a handy bit of code to notepad. I can see myself using some of what I've learned here many, many times. Thanks you so much.

ReplyPosted May 10, 2009

Lensmaster

cjalba wrote...

This is a great site for beginner user of html. This is what I am looking for. I will have to try using it in my lenses. Thanks. You've got my 5 stars!

ReplyPosted May 09, 2009

Lensmaster

Laura45 wrote...

Thank you for sharing these insightful tips and how-to's!

ReplyPosted May 07, 2009

 
Next Page
1 of 9 pages