positioning image slices CSS-style

[bulge]

I want to move away from tables for positioning images. Just wondering
if there's an easier way?

Here's what I'm currently doing:
Working on a site with:
5 separate images for the navigaton bar.
These images will be consistent on all pages on the site.

I made 5 classes:
..navbar001
..navbar002
..navbar003
..navbar004
..navbar005

1) I take note of exact pixel dimensions of each navbar image.
2) I fill each navbar class (above) with the relevant "absolute" and
"top" and "left" positioning.
3) In the html page itself I've made reference to these classes like
this:

<div class="navbar001">
<img src="images/navbar001.jpg">
</div>
....and so on.

After that's done, I finally see my image(s) positioned normally in IE
5 and Mozilla Firefox 0.9.2 - all without tables! Bewdiful. I give
myself a pat on the back and take a sandwich break.

The problem:
The front page (and the frontpage only, thankfully) has lots more
image slices in addition to the navbar (about 30 images more) that
need to be accurately positioned one-by-one in this (very slow) way.

Is there an easy (freeware, preferably) visual tool that will make my
job easier (that isn't table-based)? Something that lets me slice and
dice a graphic I've created and outputs all positioning info in an
accompanying CSS file?

 

[Webcastmaker]

The problem:
The front page (and the frontpage only, thankfully) has lots more
image slices in addition to the navbar (about 30 images more) that
need to be accurately positioned one-by-one in this (very slow) way.
Why?

Is there an easy (freeware, preferably) visual tool that will make my
job easier (that isn't table-based)? Something that lets me slice and
dice a graphic I've created and outputs all positioning info in an
accompanying CSS file?

There are reasons to slice a picture and reasons not to. Based on
the lack of a sample URL, I am assuming you are using one of the
reasons NOT to use slicing.

 

[rf]

I want to move away from tables for positioning images. Just wondering
if there's an easier way?

Yep, there is.

Here's what I'm currently doing:
Working on a site with:
5 separate images for the navigaton bar.

Ouch. Images for a navagation bar? Oh my...

These images will be consistent on all pages on the site.

I made 5 classes:
.navbar001
.navbar002
.navbar003
.navbar004
.navbar005
Worser.

1) I take note of exact pixel dimensions of each navbar image.

Unreliable. What if I change my font/canvas size.

2) I fill each navbar class (above) with the relevant "absolute" and
"top" and "left" positioning.

See above.

3) In the html page itself I've made reference to these classes like
this:

<div class="navbar001">
<img src="images/navbar001.jpg">
</div>
...and so on.

After that's done, I finally see my image(s) positioned normally in IE
5 and Mozilla Firefox 0.9.2 - all without tables! Bewdiful. I give
myself a pat on the back and take a sandwich break.

I don't see your images. Care to share them? Hint: A URL.

Besides, what use is a sandwich without a quiet beer to go with it?

The problem:
The front page (and the frontpage only, thankfully) has lots more
image slices in addition to the navbar (about 30 images more) that
need to be accurately positioned one-by-one in this (very slow) way.

You really don't want to do this anyway.

30 images equals 30 trips back to your server, one trip for each image.
Slooooows things down dramatically.

Is there an easy (freeware, preferably) visual tool that will make my
job easier (that isn't table-based)? Something that lets me slice and
dice a graphic I've created and outputs all positioning info in an
accompanying CSS file?

Show us the site. You are probably trying to do something that could be done
much simpler some other way.

I suspect you are using mystery meat navigation

I also suspect that you may need a client side image map.

 

[Rob Collyer]

I expect you are doing bandwidth costly image rollovers....

I almost guarantee there is a way to do this with pure CSS, and to get it
looking very close to what you want.

Do you have a URL to share?

 

[bulge]

alright.

navbar was the wrong word for what I was doing earlier. It's really
just the header image used for the whole site that resembles a navbar,
but really isn't an actual navigation bar as such. It's just a pretty
header, which I managed to sneak in as a background image in my CSS
file. Hooray!

The actual page navigation was to be done in CSS, using a tabbed-like
interface which I plan to do soon.

Anyway, I was slicing the bigger pic(s) on the front page in order to
save some precious kiloboytes on the optimised images (I got them down
to less than 100KB), but after reading some answers, I tried to keep
the image in far fewer pieces - it turns out that slicing wasn't
saving me too many kilobytes after all. I wasn't doing any fancy
rollovers.

The front page just has an ENTER thingy with some purdy pictures & a
simple CSS text box for the latest 'news' on the site. Anyway, the
site is yet to go up and at this stage it seems like 2006 might be a
good year for it to be ready because I've hit a positioning bog that I
can't get out of just yet.

The problem now:
I have a CSS file that looks like this so far:

body {
font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
color: #696969;
background-image: url(images/header001.jpg);
background-repeat: no-repeat;
margin: 0 0 0 0;
}

I have positioned a jpg picture of a paper - a note - like so:
..note001 {
position: absolute;
left: 400px;
top: 61px;
}

On top of this note, I want to add some plain vanilla text (so that it
appears the note has been written on), like so:
..news {
color: Teal;
position: absolute;
left: 420px;
top: 81px;
}

Anyway, Mozilla 0.9.2 is the only browser that shows the two
positioned at the places I wanted them. IE 5 and Opera 7.51 totally
screw up proceedings! They both have the text WAAAAY to the right.

Any ideas?

 

[rf]

Anyway, I was slicing the bigger pic(s) on the front page in order to
save some precious kiloboytes on the optimised images

We discussed this at length a few months ago. Go over to groups.google and
search for
image slicing cheers richard
within group alt.html. It's the first hit.

We did a few experiments and I discovered that slicing an image into 16
pieces could in fact, under certain circumstances, increase the download
time by an order of magnitude, yes, ten times.

Keep in mind that those trips back to the server I mentioned take, for me,
at least 300 milliseconds, being on the other size of the planet from where
most of the internet lives. Since I am on cable you would have to shave 50K
bytes off your image size to justify slicing it into even two seperate
images.

The front page just has an ENTER thingy with some purdy pictures & a
simple CSS text box for the latest 'news' on the site.

Why intentionally put a barrier on your site to keep the visitors from the
real content?

The problem now:
I have a CSS file that looks like this so far:

Anyway, Mozilla 0.9.2 is the only browser that shows the two
positioned at the places I wanted them. IE 5 and Opera 7.51 totally
screw up proceedings! They both have the text WAAAAY to the right.

Any ideas?

Yes, many. However without seeing the HTML I can only guess which one
applies.

 

[bulge]

Yes, many. However without seeing the HTML I can only guess which one
applies.

Thanks for the info on slices. As for the 'entrance' page, well...I
hate those too, but it's not my idea. I'm simply the one that has to
implement it.

Anyway, the html is the simplest it can be; I simply referenced the
two classes I made earlier in the divs (one being the pic of the note,
the other of the text I want on it), like so:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

<title>test</title><body>
<div class="note001"><img src="images/note001.jpg"</div>
<div class="news">testing text</div>
</body>
</html>

That is literally the page as it stands now (along with the complete
CSS I pasted earlier). The simplicity of it all has me baffled why
Opera and IE cannot position it right. Am I doing something wrong?

 

[rf]

bulge wrote:

Thanks for the info on slices. As for the 'entrance' page, well...I
hate those too, but it's not my idea. I'm simply the one that has to
implement it.

Anyway, the html is the simplest it can be; I simply referenced the
two classes I made earlier in the divs (one being the pic of the note,
the other of the text I want on it), like so:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

<title>test</title><body>
<div class="note001"><img src="images/note001.jpg"</div>
<div class="news">testing text</div>
</body>
</html>

That is literally the page as it stands now (along with the complete
CSS I pasted earlier). The simplicity of it all has me baffled why
Opera and IE cannot position it right. Am I doing something wrong?

Is this exactly the page you have? Is it a copy/pasted correctly? If so,
look at this line

<div class="note001"><img src="images/note001.jpg"</div>

Do you fail to see a > between the .jpg" bit and the </div> bit?

The browsers error correction has kicked in.

Yeah, I know, shit happens

 

[bulge]

Is this exactly the page you have? Is it a copy/pasted correctly? If so,
look at this line

<div class="note001"><img src="images/note001.jpg"</div>

Do you fail to see a > between the .jpg" bit and the </div> bit?

The browsers error correction has kicked in.

Yeah, I know, shit happens

arrrghhhhhh. Would you believe I was working at this for hours (tried
different graphics, stripped it back completely, tried different
positions and STILL didn't notice it? Thanks.

<div class="hidesincorner"><img src="images/embarrassed.jpg"></div>