Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

PZ2 - How2

Filed in:CSS

PZ2 - How2

October 14th, 2005  · stk

Examples: Letting you see what's what.

Example 1 - Styling

You want to style PZ2 to suit your own site? The best way to do this, of course, is to modify the CSS file directly. You can control the border, background, margin, colors and padding associated with the thumbnail image and the caption.

However, you can also do much of the styling on-the-fly (using inline CSS), as I've done with the image here. A little bit of code can make the image appear unique and different.

Be warned: Changing the padding, margin or border thickness will necessitate "tweaking" of other parameters, as it will affect image placement.

Here is the HTML code used to generate this image:

<div class="fill left" style="height:268px; width:250px;"></div>

<div class="PZ PZ1 PZleft">
  <p class="PZoom t200 w400 Brdr Cap noLink">
    <a href="" onclick="return false"><img src="" alt=" chive blossom " title="" style="border:5px inset #3d9140; padding:20px; position:relative; left:-50px; background:#e0eee0" />
      <span class="PZcap" style="margin-top:15px; position:relative; left:-50px; border:3px ridge #3d9140; padding:5px 10px; background:#e0eee0; font-family:georgia,serif; font-size:12px; color:#3d9140; width:424px;">
<span class="PZpad"><strong>Chive Blossom: </strong>Looking pretty in the backyard.</span>


Ex10 - Centering

You want to center the image on a page. Can this be achieved? Sure. How do you do it? Well, the concept is simple, but the execution here is more difficult. The concept: create a DIV that's as slightly wider and taller than your thumbnail. You center the div, and play with "padding" declaration until you achieve the results you want.

Views: 60864 views
13 Comments · GuestBook
default pin-it button
Updated: 26-Feb-2006
Web View Count: 60864 viewsLast Web Update: 26-Feb-2006