Is it just me, or is it really awkward implementing pictures neatly onto a webpage?
The pictures on the right-hand side of my page are not neatly aligned, take a look at gaps in between them.
I have used the code align=right.
How can I get them as neatly aligned as the bottom ones?
Thank you in advance and kind regards.

PS: & this will not be the real URL of site, I just needed a temporary one to design the website first.

Well, it is going to be awkward the way you do it now, because the placing of the pictures on the right will depend on the content on the left.

The method prefered by people like me who aren't trying to keep up with stuff developed since the last century is a table. The text in one table cell, the pictures in one (or 7, depending).

The simplest possible solution would perhaps be to use not 7, but one image. Like this:


Not popular with people who like to cut single images into tiny bits, I know. But since this image is 16 kilobytes, and the images you are using are all between 19 and 27 kilobytes, that shouldn't be a problem.

Dear Corwings,

It's been a while since I last posted a message, in reply to your much needed and appreciated help.

So here's a special message for you now.

Corwings is correct. The vertical placement of the images is dependent on the other content in the container. In this case, the container is a paragraph.

You should not be using the "align=right" code. The "align" property was originally intended for "div" and "paragraph" use, and still works in most current browsers. But the "align" property has been depreciated and may not work in newer browser releases. For use in a "paragraph", to align text, you should use the style "align-text:[left,right,center,justify]". When you are combining a "img" in a "paragraph", you should use the "float:[left,right]" property with the image.

And, while the use of a "table" has been passe since the inquisition, there is still nothing wrong with it. It has a lot of utility and has a lot of CSS support. If you design the table properly, using CSS, a table will validate as easily as anything else. The only real objection to using a table is, when it is used for the overall web page structure. Using it for displaying tabular data is not frowned upon.

If you used only a two celled table, like Corwings suggested, with the text in one cell and the combined image in the other, it should work. But it may not work if you used two column table, with multiple rows for each image. In that case, the size of each table cell would still controlled by content. Too much content will give you the same problem.

However, all of that is kind of skirting around the real problem. The template you are using was intended to be a two-column, fixed-width, design. I have a copy of the original template. Originally, the template contained a "content" area and a "sidebar" area. Had you stuck to the original template design, you could have stacked the images in the "sidebar" area. The text would have resided in the "content" area. In that kind of setup, the alignment of the images would have been separate from the text alignment.

The size of the images is another issue. The images are big, so you are resizing the images using the "width" and "height" attributes in the "img" tag. Doing it that way wastes your site's bandwidth and forces the visitors browser to do extra work. There is a noticeable delay while the images load. For anyone on a slower network, display of your page could take some time. If you only intend to display the images in one size, create smaller versions of the images and use them on the web page.

The original template, is not perfect. There is a alignment issue with some of the content, the default width is too wide, and the menu is positioned poorly. These can be fixed, but if you don't find all the CSS settings and adjust the relationships correctly, the page starts to look a little lopsided.

I would recommend a simpler template/layout. The Dynamic Drive CSS Library has basic layouts for almost every need. I took one of their layouts, borrowed a few things from your original template (menu, images), and resized all of your original images. I also took your logo, and used it differently in the header. That helped the menu work better and allows for menu expansion. Here is a link to the test page that I created. It is about as clean a design as you can get, and seems to display fine in multiple browsers.

You might notice the W3C image links under your web site URL. These indicate that the HTML and the CSS validate error free. Validation only indicates that the syntax is correct to the level of the design specified in the "DOCTYPE" tag. This doesn't guarantee that it will display the way you want it to in all browsers. But it gives you a cleaner/simpler layout to accomplish a consistent display.

You can download complete code for the page, including the resized images, with this SightingDynamicss ZIP file (123 KBytes). I didn't include your original images, because you already have them. You might note that I also included a "favorite icon". DynamicDrive.com also has a easy to use "favorite icon" generator. I used one of your image to create it.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

So is there anything that we can do to reformat the themes so that certain pics will actually fit?

Michelle,

I'm really not sure what your asking. You say "reformat the themes". Which "themes" are you talking about? In these forums, "themes" are usually associated with the Website Wizard.

Images come in all possible sizes. It's usually up to the web site designer to know how big their content areas are. That should tell them how big, or small, their image need to be.

Some layouts work better than others, and may accommodate images differently. With some layouts, adding an image that's too big, causes other page sections to relocate. Often to places you don't want them to. While other layouts will keep the structure together and just let the image overlay another area.

Sometimes the problem is not with the layout, but with the browser, the browser version, or with the display size that the visitor is trying to use.

A good example that discusses image sizes and layout restrictions is the forum post on Website not the same at different resolutions. There is an example in that post on how to make a image resize dynamically, when a visitor changes their browser window size. And it uses a Website Wizard Theme.

If you mean something else, then your just going to have to expand on your question.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Dear Philokvetch,

It's been a while since I last posted a message, in reply to your much needed and appreciated help.

So here's a special message for you now.