© ezmacwebdesign

Understanding the iWeb HTML Snippet

The image has been put inside a div with the class "slide" which is in itself inside a div with the class "container".


This container is the snippet "page" and its dimensions are big enough to accommodate the "slide" and has the same background color as the main page.


The "slide" is made big enough to accommodate the image, its caption and the padding and has a border and border radius added.


"But I could do all that in iWeb with an image, a text box and a background shape", I hear you say! Well, yes you could but you will create at least six images and  a whole bunch of extra code in the process and your page download time will suffer.

<!doctype html>

<head>

<title>Photo Frame</title>

<meta http-equiv="content-Type" content="text/html; charset=utf-8">

<style type="text/css">

.container {

width:485px;

height:395px;

padding: 5px;

margin:0;

background: #000}

.slide {

      width: 480px;

      height: 390px;

      margin: 0;

      padding:0;

      background: #eee;

      border: 2px solid #aaa;

      -webkit-border-radius: 10px;

     -moz-border-radius: 10px}

     img {

     height: 300px;

     width: 400px;

     padding: 30px 0 0 40px }

h4 {font: 1em Trebuchet MS;color: #222;margin:5px;padding;5px;text-align:center}

p {font: 0.8em Trebuchet MS;color:#333;margin:5px;padding;5px;text-align:center}

</style>

</head>

<body>

<div class="container">

<div class="slide">

<img src="http://www.iwebformusicians.com/img/shark.jpg" alt="shark" />

<h4>Polar Mesospheric Clouds</h4>

<p>Icy clouds reflect the Sun's light after it has sunk below the horizon.</p>

</div>

</div>

</body>

</html>

iWeb uses an HTML Snippet widget to allow us to put raw code onto a page. Unlike code injection, this actually creates another html page so the Snippet content is actually a small page within the larger page.


Once you realise this, working with snippets becomes easier and helps you understand why this little page gets chopped off sometimes hiding some of the content.


If we treat this miniature page as a page in its own right and give it some styling rules, we can get a lot better control over its content.

In the example below is an image which has been set in a frame to look like a "slide".

Image Caption Using Position Absolute

This is a fixed width div containing an image with 100% width and auto height.


The caption is placed using absolute positioning within the div and has a transparent background.


The transparency setting uses both "opacity" and "filter" to cover most browsers.