Home How-To Sharing Build Your Own Web Gallery
Monday, August 25, 2008

Build Your Own Web Gallery

A step-by-step guide with screenshots for building your first website

This Article Features Photo Zoom


STEP 6b: Adding Padding To Cells

Cloning

Code with padding added to page-title graphic.


In the <td> tag cell that contains the title graphic, I added the attribute style="padding" (see line 37 of the code). Note the syntax of the attribute in the code. After the colon, there are 4 values, 10px 0px and so forth. These specify the amount of padding on the top, right, bottom and left of the object, in that order. I remember the order with the acronym TRBL, as in there'll be "trouble" if you mix them up! So I've added 10 pixels of space above the image graphic and 20 pixels below it, but none on either side.

Cloning

Code with padding added to the navigation.


I repeated this step to add padding to the navigation as well. See line 53 of the code.

Cloning

Here's a preview in Safari of the page after adding padding to the title and navigation. Ah, much better. Everything has room to breathe.


11 Comments

Add Comment

 
 
 

 
  • International residents, click here.
Check out our other sites:
Digital Photo Pro Outdoor Photographer HDVideoPro Golf Tips Plane & Pilot