positioning image slices CSS-style

Discussion in 'HTML' started by bulge, Jul 18, 2004.

  1. bulge

    bulge Guest

    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?
    bulge, Jul 18, 2004
    #1
    1. Advertising

  2. bulge

    Webcastmaker Guest

    In article <>,
    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
    Webcastmaker, Jul 18, 2004
    #2
    1. Advertising

  3. bulge

    rf Guest

    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.
    rf, Jul 18, 2004
    #3
  4. bulge

    Rob Collyer Guest

    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" <> wrote in message
    news:...
    > In article <>,
    > 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
    Rob Collyer, Jul 18, 2004
    #4
  5. bulge

    bulge Guest

    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?
    bulge, Jul 19, 2004
    #5
  6. bulge

    rf Guest

    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.
    rf, Jul 19, 2004
    #6
  7. bulge

    bulge Guest

    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?
    bulge, Jul 19, 2004
    #7
  8. bulge

    rf Guest

    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, shit happens :)

    --
    Cheers
    Richard.
    rf, Jul 19, 2004
    #8
  9. bulge

    bulge Guest

    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, 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>
    bulge, Jul 19, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Apc
    Replies:
    1
    Views:
    554
    Roedy Green
    Jun 2, 2004
  2. Apc
    Replies:
    1
    Views:
    838
  3. Ilya
    Replies:
    9
    Views:
    1,805
  4. Michiel Sikma
    Replies:
    2
    Views:
    269
    Chuck Rhode
    Feb 15, 2007
  5. Ken Varn
    Replies:
    0
    Views:
    428
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page