Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > positioning image slices CSS-style

Reply
Thread Tools

positioning image slices CSS-style

 
 
bulge
Guest
Posts: n/a
 
      07-18-2004
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?
 
Reply With Quote
 
 
 
 
Webcastmaker
Guest
Posts: n/a
 
      07-18-2004
In article <(E-Mail Removed)>,
http://www.velocityreviews.com/forums/(E-Mail Removed) says...
> 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.
--
WebcastMaker
The easiest and most affordable way to create
Web casts, or put presentations on the Web.
www.webentations.com
 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      07-18-2004
bulge wrote:

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

--
Cheers
Richard.


 
Reply With Quote
 
Rob Collyer
Guest
Posts: n/a
 
      07-18-2004
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?
--
Rob Collyer - www.webforumz.com
Web design and development forums for Free help, advice,
tips, and website critique by professional designers and developers.



"Webcastmaker" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed).. .
> In article <(E-Mail Removed)>,
> (E-Mail Removed) says...
> > 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.
> --
> WebcastMaker
> The easiest and most affordable way to create
> Web casts, or put presentations on the Web.
> www.webentations.com



 
Reply With Quote
 
bulge
Guest
Posts: n/a
 
      07-19-2004
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?



 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      07-19-2004

bulge wrote:

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


<snip css>

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

--
Cheers
Richard.


 
Reply With Quote
 
bulge
Guest
Posts: n/a
 
      07-19-2004
On Mon, 19 Jul 2004 06:35:05 GMT, "rf" <rf@.invalid> wrote:

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


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?
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      07-19-2004

bulge wrote:
rf wrote:

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


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, **** happens

--
Cheers
Richard.




 
Reply With Quote
 
bulge
Guest
Posts: n/a
 
      07-19-2004
On Mon, 19 Jul 2004 11:32:24 GMT, "rf" <rf@.invalid> wrote:


>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, **** 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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Automated resizing of JPEG image + making slices? Michiel Sikma Python 2 02-15-2007 10:51 PM
obtaining lengths of slices Griff Perl 6 08-06-2004 09:26 AM
JAI problem of creating compound image from slices Apc Java 1 06-02-2004 10:10 PM
Importing Image Slices into JAVA Apc Java 1 06-02-2004 04:36 AM
array slices proudfeet VHDL 1 10-01-2003 08:55 AM



Advertisments