Author Topic: Smartarse html question (Read 1306 times)

Calum · « **on:** 4 September 2003, 18:18 »

ok, please look at http://www.polytheism.org.uk/
now see how i have done the picture there? it's aligned right, and has a caption beneath it. the caption is part of the image. This is fine as far as it goes however how can i make it so it will work like that, but use real text?

ie: i want the image aligned right, the caption beneath it also aligned right (but possibly centre aligned beneath the actual image) and the caption text should not get mixed up in the body text. Tables would seem to be the answer, but can i use tables and still have the text flowing round the image? when using different default text sizes in different browsers (because IE and moz have very different ideas of proper font sizes, and people have different sized monitors) i want it to look "okay" on everybody's screens, so if possible i would like to avoid large spaces of background colour where text should be flowing round the image, and i want the text to not overlap or anything.

Is this possible? if so, is it easy? and how?
or should i continue to just integrate the text into my images? (this method is tiresome since any change in colour or font on the site necessitates a revamp of the image, also the font on the image is rarely the same as that the reader sees the page in).

So, any suggestions?
thanks in advance.

flap · « **Reply #1 on:** 4 September 2003, 18:43 »

This is one way to do it; there may be a better one. Where you have your img tag, replace it with this:

Code: [Select]

Calum · « **Reply #2 on:** 4 September 2003, 18:53 »

thank you, that's nice and easy and it works, also it saves me having to ask the next question which was going to be how to get an invisible border round the image (which of course i know how to do with tables)

jasonlane · « **Reply #3 on:** 4 September 2003, 21:40 »

better if you do borders, etc... well any styling with CSS, it's lighter, less code

Calum · « **Reply #4 on:** 5 September 2003, 01:32 »

i am quite new to css to be honest. i now include fonts and stuff in the <head> part of new documents, but have not got round to finding out how to have a separate stylesheet so i can just have one for a whole site.

xyle_one · « **Reply #5 on:** 5 September 2003, 01:43 »

I found some info-
Introduction to CSS
http://www.w3.org/Style/CSS/

I like css, but i haven't spent much time to actually learn it. I know some things, but the more intricate formatting just flies right past me.

basically, you create a new file, call it style.css. You will also have your html file. In that file, you will want to add this tag under <head>

Code: [Select]

A generic css doc looks like-

Code: [Select]

or more simply-

Code: [Select]

[ September 04, 2003: Message edited by: ecsyle:951 ]

jasonlane · « **Reply #6 on:** 5 September 2003, 02:23 »

Yup that's it, it the long run it's all about reusability, which is a good thing....do more with less

There are a two main basic types of selector in CSS

Code: [Select]

for reusability you would use a class, as it can apply to many, referencing a style by id is if you just have one instance of that id.

you can also do some cool things like

Code: [Select]

Ideally all structural mark up should be just that, just content and structure, all styling wherever possible should be handled by css.

So if you want an image to have a 5px padding around it, but only if it is contained within a given tag by say id you could do something like:

Code: [Select]

Note that most box elements can also be styled thus:

Code: [Select]

Here's a site I'm working on at the moment, the styles are entirely driven by CSS and the css is here.

You're more than welcome to rip any CSS off

The site's not finished yet so there are a few errors

As ecsyle has already pointed out:

http://www.w3.org/Style/CSS/

The only reference you should need,

[ September 04, 2003: Message edited by: Zardoz ]

xyle_one · « **Reply #7 on:** 30 October 2003, 04:16 »

Stop Microsoft

News:

Author Topic: Smartarse html question (Read 1306 times)

Calum

Smartarse html question

flap

Smartarse html question

Calum

Smartarse html question

jasonlane

Smartarse html question

Calum

Smartarse html question

xyle_one

Smartarse html question

jasonlane

Smartarse html question

xyle_one

Smartarse html question