HSE banner

arrowPortal pages

The above image use class="imgnopad" which stands for Image, no padding. It only works inside class="headlinehighlight" as it is designed to counter the effects of the negative margins and padding in headlinehighlight.

This page provides solutions where you need to link to a number of pages of equal high importance.

Solution one - the vertical solution

radiation warning sign Link to topic 1 - highlighted

This highlighting is inline, so won't look right unless you have a big chunk of text.

Filler text needed here!

fibre optic lights Link to topic 2 - plain

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

There is a bug with the above technique and highlighting in IE6 - test thoroughly before implementing.

As ever, to see the how to code a page to get any of the effects shown on this page please use "view source".

Solution two - the horizontal solution

The example above forces images to be strictly 118px wide and 68px tall and works best on three column pages, and in multiples of three. Four boxes are shown to indicate how to code for more than one row.

Solution three - the big box approach

Though the code is less clean than the approaches above, this is a more flexible method. Again, "view source" to see the code.

The following examples also show current recommended practice for choosing images that match.

testbox one

Boxes do not always require images. If you have a lot of explanatory text, you may wish to dispense with imagery in order to fit all your text on the page 'above the fold'.

testbox two

The image above is used simply for me to check alignment and sizing issues.

red lightbulb box one

Images that match through colour.

red apple box two

This has a border.

two red arrowsbox three

This box does not have a border. Switch on and off as required.


part of a larger image of a blurred london bus box one

Separate images

part of a larger image of a blurred london bus box two

that make

part of a larger image of a blurred london bus box three

one big image.

part of a larger image of a blurred london bus box four

This has a border.

The above can also be matched with height delimiters to create containers with the same height. There are three to choose from:

Obviously these have to be combined with the class for the box option to work, so <div class="b3 bmed"> is used for three boxes of medium height. You may need to clear floats. A <div class="b1"> is also available, it is not shown as I can't think of a practical application for it.