Need help with website please !!

[the_constructor]

Below is part of a file I have on my website. I have done all my files like this. You will notice that at the side of the picture I am using ' ' to keep the text away from the picture. Is there a neater way of doing this. It appears differently on a 19" widescreen monitor to that of a 19" ordinary monitior.

Many thanks,

Jim

  Spotted outside the General Garage in Annfield Plain.

  If you know the make, model and year of this van I would be extremely   pleased to hear from you.

  The General Garage,   South View,   Annfield Plain,   STANLEY.   County Durham.   DH9 7HS.

  Telephone: [phone]

[Adrian Brentnall]

HI Jim

Lots of other ways to do this....

a) Tables - Control positioning of text & images using tables (old-fashioned - but still very effective). Put text in one table cell and picture in the next - then use cell padding and/or cell spacing to get the desired effect. The table borders can be made 'invisible' so they don't appear on the website.

b) Use the hspace/vspace attributes to make 'emoty space' around the image (deprecated tag)

c) Re-do the image with appropriate white or transparent space where yuo want it (transparent works with gifs not jpg's)

d) Use a 'spacer' 1x1 pixel transparent gif that yuo then resize in the html to give you as much spacing as you need

e) Probably do-able in css as well...

Any of these help? (though be aware that the whole issue of designing webpages so that they look 'similar' across different browsers / operating systems / screen sizes etc is likely to be a long and unrewarding journey )

Adrian

[Andy Burns]

Use CSS to put a margin around the image (or perhaps just on the edge that faces the text) google on "css box model" and also look at "floating" the image left or right

Web pages *should* look different on devices with different sizes, resolutions, fonts and aspect ratios - might as well just make each page a huge single GIF file otherwise.

[Dave Liquorice]

And normally renders as you expect in most browsers. Large tables can slow down things on older machines though.

Or use the border or padding attributes. I think they are avialable in the img tag, I use them in CSS so not sure.

Messy IMHO.

This would be the prefered way, either inline or via a style sheet (prefered).

Agreed, you can get "similar" fairly easily, but you still might have something that is different. "same" is impossible.

[John Rumm]

As others have said, loads of options. I would tend toward using CSS since that gives most flexibility and the cleanest looking code.

So for example, if you added the following to your section[1]:

Then modify this to use the above class with the addition of a class= tag:

you can now lose all the non breaking spaces. ;-)

[1] If you are doing much with CSS then slap it in a separate .css file, and use a "link" command to suck it in instead of hard coding it in the header - that way you can share the styles between multiple pages.

[John Rumm]

[Tim Watts]

As others have said, CSS. These days, it is the de-facto "correct" solution (though many solutions work) - CSS keeps the presentation away from the HTML which is quite useful if you then want to re-present the web page for say mobile devices with a different CSS, or even re-formatted for nive prinitng rather than nice screen viewing.

Pad and Margin are the two main control devices for sticking space between things. You can go as far as specifying absolution position of blocks, though most people[1] prefer having things float and auto expand where possible to use the user's available space.

[1] Except marketing types and rare special cases like fixed format displays and kiosks.

If you google for w3schools, they have some cool free demos for CSS and HTML with some really nice "Try It" boxes where you can fiddle with stuff and see the results.

[John Rumm]

Handy for forgiving the sins of dodgy page layout?

[Jethro]

I fell in love with CSS when I discovered the MEDIA selector, so you could automagically have the same HTML page AND stylesheet, and simply apply different styling depending on output device.

Unfortunately you rely on the browser being truthfull, but it means (for example) you can avoid the need for clunking javascript "Print this page" scripts to render a page printer-friendly.

[Tim Streater]

Yes, CSS or tables. There is a bit of a learning curve but it's worth it if you intend to do more in this line.

Doing it "by hand" in HTML is akin, when using a word processor, to doing formatting by using tabs and spaces to create your columns and so on or empty lines to separate paragraphs. Looks OK but wait until you try to adjust column widths or page length - it all falls apart. So I'd encourage you to "dive in". :-)

[Tim Watts]

Ta - I must look at that!

[Jethro]

The way it *should* work, is you have a MEDIA section in your CSS (don't forget you can have as many CSS files as you like, so if you want to keep them separate you can).

The browser then chooses tne CSS media-type best suited to it's config. "Screen" is desktop PC, but you can have "Print".

you then define the appropriate styles. So for Screen you may have a display style for a header graphic, and for the Print section you set it to "display:none". All being well, when the browser goes to print, it picks up the Print style, and supresses the graphic.

There's more here :

a year since I last dabbled (well, since on of my team last dabbled. I do recall some IE issues, but you could say that of anything really).,

[the_constructor]

Many thanks John and everyone else for the help and advise on this matter. It would appear that following John's advice my problems are solved, for the moment that is anyway. Jim

[John Rumm]

I worked with someone many years ago who used to do hanging indents like that! Looked fine until you ever had to edit one of his documents, change one character and the whole page fell to bits!