Split image and position with CSS

Hi

I have 1 image which is actually 4 images in one:
http://www.alz-maschinen.ch/vorschlag3/ (right side)

I want to change that image to 4 smaller images
positioned with CSS. It should look the same/similar.

Any ideas for easy and short HTML/CSS?
Do I need to pack the 4 images into a div?

chlori

On Sat, 06 Nov 2004 16:43:00 +0100, chlori <invalid (AT) arto (DOT) ch> wrote:

Hi

I have 1 image which is actually 4 images in one:
http://www.alz-maschinen.ch/vorschlag3/ (right side)

I want to change that image to 4 smaller images positioned with CSS. It
should look the same/similar.

Any ideas for easy and short HTML/CSS?
Do I need to pack the 4 images into a div?

It's probably better to leave it as one image, 4 smaller images will load
slower.

If you really require that, let me ask this first: if there's no CSS, what
do you want to happen with the 4 images?

Neal schrieb am 06.11.2004 16:50:

I have 1 image which is actually 4 images in one:
http://www.alz-maschinen.ch/vorschlag3/ (right side)

I want to change that image to 4 smaller images positioned with CSS. It
should look the same/similar.

It's probably better to leave it as one image, 4 smaller images will load
slower.

Isn't it faster using 4 images if I have many
combinations on different pages containing the same
images but not in the same order?

The other idea was that it would be easier/faster to
change the images on the site.

If you really require that, let me ask this first: if there's no CSS, what
do you want to happen with the 4 images?

The best thing would be if they were next to each other
in a row - I think. Other suggestions?

I know it would be quite easy with absolute
positioning, but I would prefer without.

How can I test a site without CSS but with images?

chlori

On Sat, 06 Nov 2004 16:57:08 +0100, chlori <invalid (AT) arto (DOT) ch> wrote:

Neal schrieb am 06.11.2004 16:50:
I have 1 image which is actually 4 images in one:
http://www.alz-maschinen.ch/vorschlag3/ (right side)

I want to change that image to 4 smaller images positioned with CSS.
It should look the same/similar.

It's probably better to leave it as one image, 4 smaller images will
load slower.

Isn't it faster using 4 images if I have many combinations on different
pages containing the same images but not in the same order?

If the 4 images will be used elsewhere, they'll be cached, so sure. But
that's not what you said. In absence of other need for the small pics,
a larger assembled pic is better.

If you really require that, let me ask this first: if there's no CSS,
what do you want to happen with the 4 images?

The best thing would be if they were next to each other in a row - I
think. Other suggestions?

Assuming allimages are identical in size, and are 100px wide:

<div>
<img><img><img><img>
</div>

div {
width: 200px;
}

img {
width: 100px;
margin: 0;
border: 0;
padding: 0;
}

ought to do it. The images should wrap. Padding might not even need to be
set, I can't recall if any browsers put padding on images.

I know it would be quite easy with absolute positioning, but I would
prefer without.

No need for it here.

How can I test a site without CSS but with images?

1) If you, as I have begun, include the stylesheet links with PHP (or
SSI), comment the stylesheet links out for the whole site in one place.
You can, of course, do this on a page-by-page basis.

2) Use Opera and turn off CSS but enable images.

chlori wrote:

Hi

I have 1 image which is actually 4 images in one:
http://www.alz-maschinen.ch/vorschlag3/ (right side)

just to shorten it:
you have this blue background with those four gifs.
You could do this with a color like #619aff;
and set it as the background-color of the table or the div.

And the images - use them without any blue border.
http://www.janfaerber.com/alt.html/chlori.html

Hope it helps.




--
Jan

http://www.janfaerber.com

In message <2v4aikF2cm552U1 (AT) uni-berlin (DOT) de>
chlori <invalid (AT) arto (DOT) ch> wrote:

How can I test a site without CSS but with images?

I can do it for you and send a screenshot.
My usual RiscOS browser is totally non-CSS, but has images, (+tables and
frames).

Also in some pc browsers you can turn off CSS. I'm not on the pc just now,
so can't send you a list: maybe most of them can do it.

Or 'hide' your CSS file when testing (e.g. change its name temporarily.)

Slainte

Liz

--
Virtual Liz now at http://www.v-liz.com
Kenya; Tanzania; Namibia; India; Seychelles; NEW! - Galapagos
"I speak of Africa and golden joys"

Liz enlightened us with:

Also in some pc browsers you can turn off CSS. I'm not on the pc
just now, so can't send you a list: maybe most of them can do it.

There is an extension for Mozilla Firefox called "Web Developer". It's
great for (duh) web developers. You can disable CSS, JavaScript,
Images, etc. It's also possible to edit CSS on the fly, outline
block-level elements, validate the HTML/CSS etc. Really worth it!

Sybren
--
The problem with the world is stupidity. Not saying there should be a
capital punishment for stupidity, but why don't we just take the
safety labels off of everything and let the problem solve itself?

In message <slrncos662.9np.sybrenUSE (AT) sybren (DOT) thirdtower.com>
Sybren Stuvel <sybrenUSE (AT) YOURthirdtower (DOT) imagination.com> wrote:

Liz enlightened us with:
Also in some pc browsers you can turn off CSS. I'm not on the pc
just now, so can't send you a list: maybe most of them can do it.

There is an extension for Mozilla Firefox called "Web Developer". It's
great for (duh) web developers. You can disable CSS, JavaScript,
Images, etc. It's also possible to edit CSS on the fly, outline
block-level elements, validate the HTML/CSS etc. Really worth it!

I only just got round to looking up Firefox last night, funnily enough.
It seemed like a 4Mb download, so thought I'd be cheaper sending for the
CD/manual set, once I find a round tuit.

Slainte

Liz
--
Virtual Liz now at http://www.v-liz.com
Kenya; Tanzania; Namibia; India; Seychelles; Galapagos
"I speak of Africa and golden joys"

Toby Inkster enlightened us with:

Opera can do all that without downloading any extensions!

Firefox doesn't include it by default, because they don't want a
bloated browser for people that won't use this functionality ;-)

Sybren
--
The problem with the world is stupidity. Not saying there should be a
capital punishment for stupidity, but why don't we just take the
safety labels off of everything and let the problem solve itself?

On Sun, 7 Nov 2004 20:38:23 +0100, Sybren Stuvel
<sybrenUSE (AT) YOURthirdtower (DOT) imagination.com> wrote:

Toby Inkster enlightened us with:
Opera can do all that without downloading any extensions!

Firefox doesn't include it by default, because they don't want a
bloated browser for people that won't use this functionality ;-)

Opera is still a much smaller download than Firefox. I guess Firefox
is so bloated elsewhere that they needed to leave these little things
out. ;-)

Steve