Am I closer to being on the right track here?

[DaKitty]

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]

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!

 

[Nik Coughin]

DaKitty wrote:

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;

 

[rf]

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.

 

[DaKitty]

DaKitty wrote:


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]

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

 

[rf]

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.

 

[DaKitty]

DaKitty wrote


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.

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

want

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.

 

[rf]

"rf" <[email protected]> wrote in message

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

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

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

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

 

[Nik Coughin]

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

 

[Toby Inkster]

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 Inkster]

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.

 

[DaKitty]

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.

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!

Oh my :-(


No frames?

Exactamundo!

 

[DaKitty]

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]

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

 

[rf]

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

 

[Nik Coughin]

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.

 

[Lauri Raittila]

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?

 

[kchayka]

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.

 

[Nik Coughin]

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.

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.

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

It's a different thing, but maybe related.

Happens with gif too sometimes...

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

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.