Am I closer to being on the right track here?

Discussion in 'HTML' started by DaKitty, Nov 22, 2004.

  1. DaKitty

    DaKitty Guest

    With css and some other details?
    http://www.socalolympians.org/about_us-c.asp

    Should I make a new class for the text inside the white?

    Is it possible to make centered, so that it moves as the page width gets
    resized?... You know, like a table with so many pixels?
    DaKitty, Nov 22, 2004
    #1
    1. Advertising

  2. DaKitty

    DaKitty Guest

    Re: Am I closer... More on CSS

    "DaKitty" <> wrote in message
    news:pDcod.340077$a85.54357@fed1read04...
    > With css and some other details?
    > http://www.socalolympians.org/about_us-c.asp
    >
    > Should I make a new class for the text inside the white?
    >
    > Is it possible to make centered, so that it moves as the page width gets
    > resized?... You know, like a table with so many pixels?


    Okay, I'm thinking out loud here... I spent couple of hours reading about
    css on WW3
    And trying to redo that page in CSS only...

    I noticed that when I define a style, especially a box, dreamweaver shows it
    as a layer!

    Then I created a layer... and I see a DIV tag, but after a div tag in the
    code is the inline style definition...
    like this:
    <div id="Layer1" style="position:absolute; left:265px; top:135px;
    width:503px; height:446px; z-index:3"></div>
    Now I can take the pixel readouts from graphic positioning, and use them in
    a new CSS style.
    Still don't know how to center justify it so it floats as you resize the
    browser....

    And they both look right, in IE6 and in Firefox!

    Maybe it's silly, but I'm getting kinda excited about this!
    DaKitty, Nov 22, 2004
    #2
    1. Advertising

  3. DaKitty

    Nik Coughin Guest

    Re: Am I closer... More on CSS

    DaKitty wrote:
    <snip enthusiastic comments about CSS>
    >
    > Maybe it's silly, but I'm getting kinda excited about this!
    >


    It's good isn't it? :)

    Centering... in general...

    If the element that you want to center is an inline element, like a span,
    you can center it by giving its parent the following style:

    text-align: center;

    If the element that you want to center is a block element, like a div, you
    can center it with this:

    margin: auto;
    Nik Coughin, Nov 22, 2004
    #3
  4. DaKitty

    rf Guest

    DaKitty wrote:

    > http://www.socalolympians.org/about_us-c.asp


    <grin>
    You are still stuck in that dreamweaver fireworks rut.
    </grin>

    These products *assume* you have exactly 800 by 600 (or whatever) to play
    with. They *assume* you want a fixed layout, not a fluid one. Indeed they
    almost force you to have a fixed layout, when used the way you have.

    The images you are using and the names of them belie this. Your logo is made
    up of two images, l2_r01_c2.gif and l2_r01_c4.gif. You also have lots of
    others images, the pretty fade in the content box and loads of "shim" gifs.
    These are the direct result of using fireworks to cut up an image that was
    probably produced using fireworks "paint" utilities. That is, you paint onto
    the firefox canvas, fixed size. You then cut up the image, ship it down to
    the viewer and re-assemble it in a table. Fixed size. No chance of making it
    liquid.

    The web does not work like that. Or, rather, it *should* not :)

    Stand back and look at what you have: A nice logo image up the top, a left
    hand navigation bar and a content box.

    Lets rebuild the page...

    That logo and the way you have arranged the other stuff around. Hmmm. Place
    the logo in the background.

    Now, the navigation. An ordered list floated left. Text links. If you want
    to dress them up then use some CSS to change the background of the <a>
    element to make them "look" like images. I had to wrap the list inside a div
    so I could position it down a little bit. Probably not the best thing to do
    but it's quick and dirty and it works.

    This navigation bar is *not* fixed width. Its width is determined by the
    font size the viewer has chosen. (note I do not mention font size anywhere
    in the CSS).

    The content. Another div That nice fading stuff? A background for this div.
    The background image is a whopping 1600x1000 pixels but gif compress nicely.
    It's only 8K. You could probably make it smaller by changing it to a jpeg or
    something.

    That's it. No messy javascript. No confusing tables. Just two main elements
    and a bit of css to style them.

    http://users.bigpond.net.au/rf/sco/about.html

    While looking at this be sure to change your font size all the way from
    smallest to largest and pick up a corner of your browser window and drag it
    around to see what happens with different viewport sizes.

    This is what I was looking toward yesterday when I suggested re-creating the
    page :)

    We can play a little more afterwards and perhaps put those nice stars back
    in the background.

    --
    Cheers
    Richard.
    rf, Nov 22, 2004
    #4
  5. DaKitty

    DaKitty Guest

    Re: Am I closer... More on CSS

    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    news:xseod.8752$...
    > DaKitty wrote:
    > <snip enthusiastic comments about CSS>
    > >
    > > Maybe it's silly, but I'm getting kinda excited about this!
    > >

    >
    > It's good isn't it? :)
    >
    > Centering... in general...
    >
    > If the element that you want to center is an inline element, like a span,
    > you can center it by giving its parent the following style:
    >
    > text-align: center;
    >
    > If the element that you want to center is a block element, like a div, you
    > can center it with this:
    >
    > margin: auto;
    >


    Yea, I think I like it much better than tables.
    I used layers before for layouts, and liked them much better than tables. I
    never knew that they're so closely related to CSS.
    By default dreamweaver doesn't even give them a layer tag, it gives them a
    DIV tag and names it a 'layer'... and you can change it to span or a layer
    or

    well, here's what I don't like all that much... perhaps you know a way out
    of it...
    on the page.. http://www.socalolympians.org/about_us-c.asp
    my shot at redoing it in CSS...
    Right now the position of the whole thing is absolute... some 100 pixels off
    the left side of the page...
    Well, that's okay for people with resolutions over 800 or 900 (horizontal)
    (I forget what it adds up to all the way across)
    But if you resize the browser, the content/layers/ CSS blocks don't move
    with the resize...
    I started looking at how to do it, couldn't figure it out right away, so I
    went with absolute positioning, just to go on and try few other things in
    CSS and not get hung up on that detail.

    here's my CSS definitions: http://www.socalolympians.org/sco.css
    For example, BOX1
    I'm not sure what to change, which value, for BOX1 so that it moves as the
    browser is resized.
    I don't want the box to stretch left and right, just to move left and right
    so it stays in the middle of the page.

    I guess then the next question would be, how do I make the box2 (blue bar
    with the navbar in it) move with it, and staying to the left of it...
    Can the styles be inside one another, nested... so my box2 position is
    relative to the top left corner of box1 ?
    (I hope that makes sense)

    Do I make up a span and then nest the paragraphs inside of it? Would then a
    paragraph CSS defined position (if relative) be relative to the parent span?
    Then if a span moves, the paragraphs nested inside of it would move too?

    What is the difference between Margins and Padding? I'm still little unclear
    on that one.
    I know the difference between cell spacing and cell padding in tables...
    Does this relate in any way?
    DaKitty, Nov 22, 2004
    #5
  6. DaKitty

    DaKitty Guest

    "rf" <rf@.invalid> wrote in message
    news:nWeod.44535$...
    > DaKitty wrote:
    >
    > > http://www.socalolympians.org/about_us-c.asp

    >
    > <grin>
    > You are still stuck in that dreamweaver fireworks rut.
    > </grin>
    >
    > These products *assume* you have exactly 800 by 600 (or whatever) to play
    > with. They *assume* you want a fixed layout, not a fluid one. Indeed they
    > almost force you to have a fixed layout, when used the way you have.


    Actually, it's not them... it's me setting the box locations to absolute,
    because I couldn't figure out how to make a relative.

    > The images you are using and the names of them belie this. Your logo is

    made
    > up of two images, l2_r01_c2.gif and l2_r01_c4.gif. You also have lots of
    > others images, the pretty fade in the content box and loads of "shim"

    gifs.
    > These are the direct result of using fireworks to cut up an image that was
    > probably produced using fireworks "paint" utilities. That is, you paint

    onto
    > the firefox canvas, fixed size. You then cut up the image, ship it down to
    > the viewer and re-assemble it in a table. Fixed size. No chance of making

    it
    > liquid.


    yea, I know fireworks does that...
    I used the images that it sliced for this exercise, instead of taking time
    to make new ones.
    Just for this exercise purposes, I was more interested in figuring out CSS
    than taking the time to reassemble the images.
    Once I get a hang of how CSS works and comestogether, then I can sit back
    and figure out how to re-slice the images so they're little more logical.

    > The web does not work like that. Or, rather, it *should* not :)
    >
    > Stand back and look at what you have: A nice logo image up the top, a left
    > hand navigation bar and a content box.
    >
    > Lets rebuild the page...


    I just redid the whole thing in CSS. Not a single shim or a table in there!
    Hey, you didn't even take a peak at the code of my new page (revision C) !!!
    :( *sniffle* *sniffle* *sniffle*
    It looks very similar to yours!
    http://www.socalolympians.org/about_us-c.asp

    I's hoping you'd be proud of me!!!
    I did it all in my own, honest... I read about CSS stuff last nioght, and
    played with it today.
    Jusat couldn't figure out how to make it resizeable.


    > That logo and the way you have arranged the other stuff around. Hmmm.

    Place
    > the logo in the background.
    >
    > Now, the navigation. An ordered list floated left. Text links.


    The client on this project gave a firm NO to plain text links, so I'm not
    going to fight and argue with them.
    I showed them examples of text only, they still said no.
    You should see the sites that they gave me as examples of what they like...
    lot of examples of what not to do. I had a hard enough time getting them to
    go for this toned down version. Initially I suggested something clean and
    more 'dignified' but nooo, they loved this!!!
    They wanted to music too! [eyeroll] I got out of that by telling them that
    i don't have any royalty free or non-copyright infringement sound bytes.
    They wanted a flash intro as well... You can have a peak in
    alt.design.graphics to see how I slyly got out of doing that... ;)
    I mean I love tinkering in flash, but not so much as a torture device for
    unsuspecting people looking at websites. It' like watching a same bad
    commercial over and over and over again... Isn't that a bit of a cruel and
    unusual punishment? ;)
    The navbar stays though... Can't win them all, I guess.
    I did talk them out of using the 'cute miniature medal images' as navigation
    buttons.

    >If you want
    > to dress them up then use some CSS to change the background of the <a>
    > element to make them "look" like images. I had to wrap the list inside a

    div
    > so I could position it down a little bit. Probably not the best thing to

    do
    > but it's quick and dirty and it works.
    >
    > This navigation bar is *not* fixed width. Its width is determined by the
    > font size the viewer has chosen. (note I do not mention font size anywhere
    > in the CSS).
    >
    > The content. Another div That nice fading stuff? A background for this

    div.
    > The background image is a whopping 1600x1000 pixels but gif compress

    nicely.
    > It's only 8K. You could probably make it smaller by changing it to a jpeg

    or
    > something.


    My background image is a 8KB 251x224 pixels jpg named STAR2.gif, always has
    been. http://www.socalolympians.org/Images/STAR2.gif
    Not one of the firefox slices.
    100% jpg is bigger than the gif... 14K
    http://www.socalolympians.org/Images/STAR2a.jpg
    90% jpg is around 8K, but a lot worse looking.
    http://www.socalolympians.org/Images/STAR2b.jpg
    80% jpg is only 2K, bit so fuzzy it's unacceptable
    http://www.socalolympians.org/Images/STAR2c.jpg

    I know... it's a trick, my very strong side is graphics... sorry I didn't
    mention that.
    After trying out the few versions of the image, I decided to go with the
    gif. I was actually surprised that in this case gif gave me best
    size/quality. I fully expected it to be a jpg - it usually is. I could
    probably cut the color pallete on the gif some more, and push down the
    size... using only 2 or 5 color gave me some unexpected results. I've
    ditched those since. The original star was made in photoshop.

    > That's it. No messy javascript. No confusing tables. Just two main

    elements
    > and a bit of css to style them.
    >
    > http://users.bigpond.net.au/rf/sco/about.html
    >
    > While looking at this be sure to change your font size all the way from
    > smallest to largest and pick up a corner of your browser window and drag

    it
    > around to see what happens with different viewport sizes.
    >
    > This is what I was looking toward yesterday when I suggested re-creating

    the
    > page :)
    >
    > We can play a little more afterwards and perhaps put those nice stars back
    > in the background.


    Thanks a bunch for that sample... I copied over the css you made, and need
    to take a peak at how you made the boxes resizeable. THat's the part I
    couldn't figure out on the first try. I'm running out of time to do that
    tonight, and have to be somewhere all day tomorrow :( I'm dying to figure
    it out though!!!
    Is it possible for a navbar to still be a SSI, inside a CSS. I don't want to
    have 15 different navbars that need to be updated.

    Thanks! :)
    DaKitty, Nov 22, 2004
    #6
  7. DaKitty

    rf Guest

    DaKitty wrote

    > I just redid the whole thing in CSS. Not a single shim or a table in

    there!
    > Hey, you didn't even take a peak at the code of my new page (revision C)

    !!!
    > :( *sniffle* *sniffle* *sniffle*
    > It looks very similar to yours!
    > http://www.socalolympians.org/about_us-c.asp


    I have not seen that one yet.

    <looks/>

    Yep. Looks good. Now get rid of all the dreamweaver javascript :). That can
    be done with CSS quite easily and a lot more effectively.

    > Thanks a bunch for that sample... I copied over the css you made, and need
    > to take a peak at how you made the boxes resizeable.


    The boxes *are* resizable. You have to do something, like specify their
    width, to make them *not* resizable.

    > Is it possible for a navbar to still be a SSI, inside a CSS. I don't want

    to
    > have 15 different navbars that need to be updated.


    Yes, Totally feasable. However you would be better off using PHP or
    something and tailoring the menu to each page. For instance at the moment
    each page has a link to itself. This is sometimes confusing.

    --
    Cheers
    Richard.
    rf, Nov 22, 2004
    #7
  8. DaKitty

    DaKitty Guest

    "rf" <rf@.invalid> wrote in message
    news:prgod.44605$...
    > DaKitty wrote
    >
    > > I just redid the whole thing in CSS. Not a single shim or a table in

    > there!
    > > Hey, you didn't even take a peak at the code of my new page (revision C)

    > !!!
    > > :( *sniffle* *sniffle* *sniffle*
    > > It looks very similar to yours!
    > > http://www.socalolympians.org/about_us-c.asp

    >
    > I have not seen that one yet.
    >
    > <looks/>
    >
    > Yep. Looks good.


    Thanks :) Still things to tweak... May I say I'm kind of proud of my first
    try! ;)

    > Now get rid of all the dreamweaver javascript :). That can
    > be done with CSS quite easily and a lot more effectively.


    Yea.. that's the SSI and the navbar. I haven't done anything with that yet.

    > > Thanks a bunch for that sample... I copied over the css you made, and

    need
    > > to take a peak at how you made the boxes resizeable.

    >
    > The boxes *are* resizable. You have to do something, like specify their
    > width, to make them *not* resizable.


    I'll have to explore that some more... I'm missing something

    > > Is it possible for a navbar to still be a SSI, inside a CSS. I don't

    want
    > to
    > > have 15 different navbars that need to be updated.

    >
    > Yes, Totally feasable. However you would be better off using PHP or


    Need to learn php... that one is next, I think...

    > something and tailoring the menu to each page. For instance at the moment
    > each page has a link to itself. This is sometimes confusing.


    yea... I'm still undecided about how to handle that.
    I worked on pages before where I had separate navbar for each page, and I
    can tell you one thing, I really really suck when it comes to making sure
    all pages are updated correctly. I always get in a hurry and forget
    something on one or two pages.
    Another website I maintain at the moment is some 50 odd pages... Someone put
    it together before me, and did it in frames... I;m gearing up to revamp this
    one, and having individual navigation for each would be a bookkeeping
    nightmare, especially since there are relatively frequent changes.
    DaKitty, Nov 22, 2004
    #8
  9. DaKitty

    rf Guest

    DaKitty wrote:
    > "rf" <rf@.invalid> wrote in message


    > Thanks :) Still things to tweak... May I say I'm kind of proud of my

    first
    > try! ;)


    As you should be. <grin> except for the DW stuff </grin>

    > Need to learn php... that one is next, I think...


    Hmmm. Quick question. You don't know PHP yet your pages end in .asp?

    > > something and tailoring the menu to each page. For instance at the

    moment
    > > each page has a link to itself. This is sometimes confusing.

    >
    > yea... I'm still undecided about how to handle that.
    > I worked on pages before where I had separate navbar for each page, and I
    > can tell you one thing, I really really suck when it comes to making sure
    > all pages are updated correctly. I always get in a hurry and forget
    > something on one or two pages.


    Hang around for a day. I am currently rebuilding a PHP navbar include to do
    exactly what you want. When I finish it I will publish the relevant PHP
    code.

    > Another website I maintain at the moment is some 50 odd pages... Someone

    put
    > it together before me, and did it in frames...


    Oh my :-(

    > I;m gearing up to revamp this


    No frames?

    > one, and having individual navigation for each would be a bookkeeping
    > nightmare, especially since there are relatively frequent changes.


    See above

    --
    Cheers
    Richard.
    rf, Nov 22, 2004
    #9
  10. DaKitty

    Nik Coughin Guest

    DaKitty wrote:
    >
    > My background image is a 8KB 251x224 pixels jpg named STAR2.gif,
    > always has been. http://www.socalolympians.org/Images/STAR2.gif
    > Not one of the firefox slices.
    > 100% jpg is bigger than the gif... 14K
    > http://www.socalolympians.org/Images/STAR2a.jpg
    > 90% jpg is around 8K, but a lot worse looking.
    > http://www.socalolympians.org/Images/STAR2b.jpg
    > 80% jpg is only 2K, bit so fuzzy it's unacceptable
    > http://www.socalolympians.org/Images/STAR2c.jpg
    >


    3k :)
    http://www.nrkn.com/temp/star2.png
    Nik Coughin, Nov 22, 2004
    #10
  11. DaKitty

    Toby Inkster Guest

    DaKitty wrote:
    > rf <rf@.invalid> wrote:
    >> DaKitty wrote:
    >>
    >>> Thanks a bunch for that sample... I copied over the css you made, and
    >>> need to take a peak at how you made the boxes resizeable.

    >>
    >> The boxes *are* resizable. You have to do something, like specify their
    >> width, to make them *not* resizable.

    >
    > I'll have to explore that some more... I'm missing something


    You're not *missing* something. That's Richard's point -- you're *adding*
    something:

    <p style="width:100px">
    This paragraph is not resizable.
    </p>

    <p>
    This paragraph is resizable.
    </p>


    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Nov 22, 2004
    #11
  12. DaKitty

    Toby Inkster Guest

    Re: Am I closer... More on CSS

    DaKitty wrote:

    > What is the difference between Margins and Padding?


    Margin is a bit of spacing *outside* the border.

    Padding is a bit of spacing *inside* the border.

    mmmmmmm
    mBBBBBm
    mBpppBm
    mBpCpBm
    mBpppBm
    mBBBBBm
    mmmmmmm

    where
    m = margin
    B = border
    p = padding
    C = content

    Padding takes the same background colour as the content, margin is always
    transparent.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Nov 22, 2004
    #12
  13. DaKitty

    DaKitty Guest

    "rf" <rf@.invalid> wrote in message
    news:0ehod.44654$...
    > DaKitty wrote:
    > > "rf" <rf@.invalid> wrote in message

    >
    > > Thanks :) Still things to tweak... May I say I'm kind of proud of my

    > first
    > > try! ;)

    >
    > As you should be. <grin> except for the DW stuff </grin>
    >
    > > Need to learn php... that one is next, I think...

    >
    > Hmmm. Quick question. You don't know PHP yet your pages end in .asp?


    welll...
    I was trying to figure out how to do an SSI, and the server supports ASP, as
    a matter of fact, part of what will get included in the pages is a little
    database application, and host server needs them done in ASP and (I think
    MySql, or something similar)... that's what the database guy works in.
    So the only way I could figure out how to make that inclusion is to have
    both pages with asp extension...
    php wouldn't work, tried couple other ways, they wouldn't work... I
    don'tknow why. Likely user error.
    Not a super good reason for it, really.

    >
    > > > something and tailoring the menu to each page. For instance at the

    > moment
    > > > each page has a link to itself. This is sometimes confusing.

    > >
    > > yea... I'm still undecided about how to handle that.
    > > I worked on pages before where I had separate navbar for each page, and

    I
    > > can tell you one thing, I really really suck when it comes to making

    sure
    > > all pages are updated correctly. I always get in a hurry and forget
    > > something on one or two pages.

    >
    > Hang around for a day. I am currently rebuilding a PHP navbar include to

    do
    > exactly what you want. When I finish it I will publish the relevant PHP
    > code.


    Looking forward to that! :)

    > > Another website I maintain at the moment is some 50 odd pages... Someone

    > put
    > > it together before me, and did it in frames...

    >
    > Oh my :-(
    >
    > > I;m gearing up to revamp this

    >
    > No frames?


    Exactamundo!
    DaKitty, Nov 23, 2004
    #13
  14. DaKitty

    DaKitty Guest

    "Toby Inkster" <> wrote in message
    news:p...
    > DaKitty wrote:
    > > rf <rf@.invalid> wrote:
    > >> DaKitty wrote:
    > >>
    > >>> Thanks a bunch for that sample... I copied over the css you made, and
    > >>> need to take a peak at how you made the boxes resizeable.
    > >>
    > >> The boxes *are* resizable. You have to do something, like specify their
    > >> width, to make them *not* resizable.

    > >
    > > I'll have to explore that some more... I'm missing something

    >
    > You're not *missing* something. That's Richard's point -- you're *adding*
    > something:
    >
    > <p style="width:100px">
    > This paragraph is not resizable.
    > </p>
    >
    > <p>
    > This paragraph is resizable.
    > </p>


    I'll have to try it, something is still puzzling me... what I tried
    yesterday didn't work. Need to play around with it some more.
    DaKitty, Nov 23, 2004
    #14
  15. DaKitty

    DaKitty Guest

    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    news:Uyhod.8809$...
    > DaKitty wrote:
    > >
    > > My background image is a 8KB 251x224 pixels jpg named STAR2.gif,
    > > always has been. http://www.socalolympians.org/Images/STAR2.gif
    > > Not one of the firefox slices.
    > > 100% jpg is bigger than the gif... 14K
    > > http://www.socalolympians.org/Images/STAR2a.jpg
    > > 90% jpg is around 8K, but a lot worse looking.
    > > http://www.socalolympians.org/Images/STAR2b.jpg
    > > 80% jpg is only 2K, bit so fuzzy it's unacceptable
    > > http://www.socalolympians.org/Images/STAR2c.jpg
    > >

    >
    > 3k :)
    > http://www.nrkn.com/temp/star2.png
    >
    >

    Hey, that's nice! I haven't even thought about the png!
    For some reason I tend to underestimate png's
    DaKitty, Nov 23, 2004
    #15
  16. DaKitty

    rf Guest

    DaKitty wrote:
    > "rf" <rf@.invalid> wrote in message


    > > Hang around for a day. I am currently rebuilding a PHP navbar include to

    > do
    > > exactly what you want. When I finish it I will publish the relevant PHP
    > > code.

    >
    > Looking forward to that! :)


    Turned out to be an almost trivial exercise. Here is a cut down version of
    it:

    Your pages looks something like this: (probably has to be called eg
    page1.php)

    <html>
    <head>
    .... including a link to your .css file
    </head>
    <body>

    <!-- navigation -->
    <? require "navbar.php" ?>

    <!-- rest of content for this page -->
    <div class="content">
    ....
    </div>
    </body>
    <html>

    navbar.php looks like this:

    <?
    function menu($link,$text)
    {
    $llen = strlen($link);
    $tlen = strlen($_SERVER['PHP_SELF']);
    $t = substr($_SERVER['PHP_SELF'],$tlen - $llen,$llen);
    if ($t === $link)
    {
    echo '<li><span>' . $text . "</span></li>\n";
    }
    else
    {
    echo '<li><a href="' . $link . '">' . $text . "</a></li>\n";
    }
    }

    echo "<div class='nav'>\n";
    echo "<ul>\n";

    //insert menu calls for each nav link here. syntax is
    // menu (page to link to,text to go on the page);

    menu("page1.php","Page 1");
    menu("page2.php","Page 2");
    menu("page3.php","Page 3");

    echo "</ul>\n";
    echo "</div>\n";

    ?>

    The function menu looks at the path of the page in the "link". If it is the
    same as the last part of "this page" then a <span> gets output. If not then
    an <a> gets output. You style these elements to your liking in your .css
    file.

    You can see a very minimal version of this hapenning here:
    http://cueword.com.au/menu/page1.php

    --
    Cheers
    Richard.
    rf, Nov 23, 2004
    #16
  17. DaKitty

    Nik Coughin Guest

    DaKitty wrote:
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    > news:Uyhod.8809$...
    >> DaKitty wrote:
    >>>
    >>> My background image is a 8KB 251x224 pixels jpg named STAR2.gif,
    >>> always has been. http://www.socalolympians.org/Images/STAR2.gif
    >>> Not one of the firefox slices.
    >>> 100% jpg is bigger than the gif... 14K
    >>> http://www.socalolympians.org/Images/STAR2a.jpg
    >>> 90% jpg is around 8K, but a lot worse looking.
    >>> http://www.socalolympians.org/Images/STAR2b.jpg
    >>> 80% jpg is only 2K, bit so fuzzy it's unacceptable
    >>> http://www.socalolympians.org/Images/STAR2c.jpg
    >>>

    >>
    >> 3k :)
    >> http://www.nrkn.com/temp/star2.png
    >>
    >>

    > Hey, that's nice! I haven't even thought about the png!
    > For some reason I tend to underestimate png's


    IME they are always smaller than the same image as a gif.

    This is how I optimise graphics for the web:

    When I'm working with graphics (not photos, photos should pretty much always
    be jpeg) I start with a nice 16.7 million colour version. I save it as my
    master image. Then:

    Convert it to 256 colours. At this stage use nearest colour matching and
    avoid dithering/error diffusion if possible. This is because (a) it looks
    bad in low res and (b) both .gif and .png use algorithms that compress solid
    blocks of colour well. Dithered images do not compress well.

    If it looks crap in 256 (some images with gradients for example) then try
    these two steps, compare the file sizes from each, and pick the smaller of
    the two:
    1) Undo converting to 256 colour and save it as a jpeg with the highest
    compression you can get away with without it being noticeable. If *any*
    jpeg compression at all makes it look bad then save as a 16.7 million colour
    png. This is not very efficient but is OK for small images.
    2) Take it back to 16.7million colour, then once again convert to 256
    colours, this time *do* use a dithering/error diffusion algorithm. For
    certain images this is appropriate. You will get a feel for this quite
    quickly.

    If it looks fine in 256 colours then decrease colour depth to 128. If this
    looks fine, decrease to 64. Keep going down as far as you can go without it
    starting to look crap. I got yours down to 32 colours. Some images will
    get down to 16 or even 8.

    Save the 256-or-less colour image as a .png. You might notice that
    sometimes a png image will look like the colours are slightly out next to
    other things on your html page. This is a problem with the colour
    correction in some browsers. The solution to this is to use a gif for that
    image instead. There are probably other ways around the png colour
    correction problem, in fact I'm sure there are, but I haven't bothered
    looking. I always just do the lazy thing and use a gif when the colours
    look out. Most of the time the png will look fine though.
    Nik Coughin, Nov 23, 2004
    #17
  18. in alt.html, Nik Coughin wrote:

    > This is how I optimise graphics for the web:


    Adding for some stuff that is doesn't always pay off.

    > When I'm working with graphics (not photos, photos should pretty much always
    > be jpeg) I start with a nice 16.7 million colour version. I save it as my
    > master image. Then:
    >
    > Convert it to 256 colours. At this stage use nearest colour matching and
    > avoid dithering/error diffusion if possible.


    Or just get your hands dirty, and make palette of all necessary colors,
    and use that. Especially if you have some color slide somewhere, which
    will look bad easily when doing automatic color reducing.

    I did that today, as a logo was not looking very good on 256, and still
    took 14kB. Got it down to 6kB and better looking by selecting colors
    manually.

    > If it looks fine in 256 colours then decrease colour depth to 128. If this
    > looks fine, decrease to 64. Keep going down as far as you can go without it
    > starting to look crap. I got yours down to 32 colours. Some images will
    > get down to 16 or even 8.


    Or do same manually. And it is good to undo the last change, and apply
    new color reducion to the 16M colored one.

    2 color image with antialias often look OK even with 4 colors.

    > Save the 256-or-less colour image as a .png. You might notice that
    > sometimes a png image will look like the colours are slightly out next to
    > other things on your html page. This is a problem with the colour
    > correction in some browsers.


    I have seen this with 16bit display. Or maybe it is different thing?

    > The solution to this is to use a gif for that
    > image instead.


    Happens with gif too sometimes...

    > There are probably other ways around the png colour
    > correction problem, in fact I'm sure there are, but I haven't bothered
    > looking.


    Save no gamma information with png?


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Lauri Raittila, Nov 23, 2004
    #18
  19. DaKitty

    kchayka Guest

    DaKitty wrote:
    > With css and some other details?
    > http://www.socalolympians.org/about_us-c.asp


    Please don't use overflow:auto for the body text. Scrolling divs are a
    real usability problem. Just let regular scrollbars kick in as needed.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Nov 23, 2004
    #19
  20. DaKitty

    Nik Coughin Guest

    Lauri Raittila wrote:
    > in alt.html, Nik Coughin wrote:
    >
    >> This is how I optimise graphics for the web:

    >
    > get your hands dirty, and make palette of all necessary
    > colors, and use that. Especially if you have some color slide
    > somewhere, which will look bad easily when doing automatic color
    > reducing.


    I can't remember the last time I built a palette by hand :) Most of the
    software I use these days does pretty damn good colour reducing.

    I wrote a bunch of command line apps a long time ago to assist with building
    palettes, I wonder if I can dig them up. Might be worth playing with again.

    >
    >> If it looks fine in 256 colours then decrease colour depth to 128.
    >> If this looks fine, decrease to 64. Keep going down as far as you
    >> can go without it starting to look crap. I got yours down to 32
    >> colours. Some images will get down to 16 or even 8.

    >
    > Or do same manually. And it is good to undo the last change, and apply
    > new color reducion to the 16M colored one.


    Very true! I often just keep the 16m image open and work on a duplicate,
    referring back to the 16m whenever I want to try something new.

    >> Save the 256-or-less colour image as a .png. You might notice that
    >> sometimes a png image will look like the colours are slightly out
    >> next to other things on your html page. This is a problem with the
    >> colour correction in some browsers.

    >
    > I have seen this with 16bit display. Or maybe it is different thing?


    It's a different thing, but maybe related.

    >> The solution to this is to use a gif for that
    >> image instead.

    >
    > Happens with gif too sometimes...


    I haven't run into that, but it is probably the 16bit display thing?

    >> There are probably other ways around the png colour
    >> correction problem, in fact I'm sure there are, but I haven't
    >> bothered looking.

    >
    > Save no gamma information with png?


    That could be it. I actually followed a link from this newsgroup some time
    ago to an article about it. I should have bookmarked it.
    Nik Coughin, Nov 23, 2004
    #20
    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. fnord

    getting closer on the timer

    fnord, Aug 22, 2003, in forum: Perl
    Replies:
    1
    Views:
    938
    Eric Frazier
    Sep 12, 2003
  2. tshad
    Replies:
    0
    Views:
    397
    tshad
    Jun 22, 2007
  3. Adrienne Boswell

    Re: Stylesheet to make IE and FF closer?

    Adrienne Boswell, Feb 8, 2009, in forum: HTML
    Replies:
    4
    Views:
    352
    Adrienne Boswell
    Feb 8, 2009
  4. Forrest Chang
    Replies:
    6
    Views:
    152
    Romuald du Song
    Dec 17, 2005
  5. Zed Shaw
    Replies:
    0
    Views:
    110
    Zed Shaw
    Mar 28, 2006
Loading...

Share This Page