Split image and position with CSS

[chlori]

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

 

[Neal]

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?

 

[chlori]

Neal schrieb am 06.11.2004 16:50:

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

 

[brucie]

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.

 

[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-images-in-a-blob-thingy.shit

 

[brucie]

In alt.html brucie said:

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

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-images-in-a-blob-version-2-thingy.shit

 

[Neal]

Neal schrieb am 06.11.2004 16:50:


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.

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.

 

[Jan Faerber]

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.

 

[Liz]

In message <[email protected]>

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

 

[Sybren Stuvel]

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

 

[Liz]

In message <[email protected]>

Liz enlightened us with:

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

 

[Toby Inkster]

Toby Inkster enlightened us with:


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

Then why is the Firefox download so much bigger than the Opera download?