Help Stefan Campaign
Making Money from the Web:
CSS Image Placement
Ok, so this page is a bit of a mixture in terms of content. The basis is a code page, I admit. But before you turn off just have a further look at the code I'm presenting and why.
If you're serious about internet marketing then at some point you will want to present a formatted page of images to your visitors. This may be because you're doing deep linkage to an affiliate partner's products or you want to present Amazon results or you want to sell artworks or photographs. Even if you're not an internet marketer you will still probably want to present a tabular array of images on your website for family snaps, wedding photographs or whatever.
The usual way of formatting an array of images is to use HTML tables. But this generates many lines of code and can be very cumbersome to arrange and to update. Even worse, if you arrange your images using tables then the tabular format will only work with one page size so you may force your visitors to scroll across the screen to see all the images.
A far more elegant solution is to use CSS (cascading style sheets) to achieve the same purpose (and I assume that you already have CSS to define you're page layout, dont't you? – if you don't have a look at my Introcudtion to CSS). I'll show you just how elegant this solution is below:
CSS Image Layout — the Code:
Like all software projects the first thing is to generate a definition for what needs to be done. In this case it's relatively simple in that we need to place images on a page in a way that they can be arranged in an array and that array needs to re-size (and thus wrap) itself if the page gets re-sized.
Now that we have the definition it's possible to generate the CSS code, as below:
|
Simple isn't it? basically all you're generating here is a new div or division that automatically floats to the left of the page. So that all divs that you define float the images contained within them to the left of the page so that the images all stack up against one another. This also means that if an image goes over a page's right-hand margin it will automatically be wrapped and floated to the left-hand side of the next row of images.
I'm assuming here that you will need to add a caption to your image. As a result I've defined a paragraph (p) that floats with the float division float.div that it relates to. This way you can define an image and a caption together and they will move with one another.
Now that the CSS is written, the next stage is to write the code in your web page that will use the CSS definitions — and don't forget to call your CSS files with a statement such as the one below:
|
Which is the precise code used to define this very page.
Next you can define the code that will actually place the images within your document:
|
To add more images simply increase the number of <divs> as in the example code above. What this gives you in reality is something like this:
First Weddin Photograph
Second Wedding Photograph
Thrid Wedding Photograph
As you can see the images all stack to the left and they wrap when they're too big for the screeen. The only problem is that the text still aligns against the last image and the images abut one another so a little tweaking is needed. Esentially what we want to do is to place spacers both above and below the code that defines the alignment of the inages.
The first thing to do is to separate the images from the remainder of the page's content. This is done simply by defining spacer elements and adding the following code to the CSS file:
|
Adding this to the file in the HTML page gives:
|
Which, when the images are added looks like:
First Weddin Photograph
Second Wedding Photograph
Thrid Wedding Photograph
Now the images are nicely separated from the ramining text but they still abut one another. In fact this is easy to fix by co-opting the existing code and adding spacers as below:
|
Which, when aplied to the example images gives:
First Weddin Photograph
Second Wedding Photograph
Thrid Wedding Photograph
Now the images are nicely-spaced and have captions. Just what you need for any kind of album or product page (and, yes, the images are of my own wedding). For examples of how to use this in anger see my pages on Celtic Rings and Celtic Art Sourcebooks.
|
If you enjoyed this page and would like to get more tips, tricks and offers to help you make the most of your most of your web presence please sign up for my Weekly e-mail newsletter. Please note that your details will never be sold and shared with others. You are signing-u for my e-mail only. |
