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

chlori

On Sat, 06 Nov 2004 16:43:00 +0100, chlori <> 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

In alt.html chlori said:

> Hi

g'day

> 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.

why? it'll just increase the download size/time

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

you could do:

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

with the <div> set the width of two images but some browsers will give
you a gap between the first/second row. a fix would be to add a negative
margin to the images on the second row. e.g:

div{width:200px;} /* 2 x 100px images side by side */
..margin-fix,[nul]{margin-top:-3px;}

<div><img ...><img ...><img ...class="margin-fix"><img ...class="margin-fix"></div>

IE doesn't need the margin fixing so we use a [nul] attribute selector
which makes IE ignore the css. easy peasy.


--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.

In alt.html chlori said:

> 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?

yep, its reasonably safe to assume the visitor would be caching them.

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

use a real browser such as opera

with no css you just get 4 images in a row
http://moreshit.usenetshit.info/4-im...ob-thingy.****


--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.

In alt.html brucie said:

> with no css you just get 4 images in a row
> http://moreshit.usenetshit.info/4-im...ob-thingy.****

i forgot about a bug gecko browsers have with text size/resizing with
makes the above fall apart (adds gaps between the images) depending on
text size <cue my troll/>

this version doesn't appear to have any issues:
http://moreshit.usenetshit.info/4-im...-2-thingy.****

--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.

On Sat, 06 Nov 2004 16:57:08 +0100, chlori <> 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 <>
chlori <> 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?