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"
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:
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 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;
DaKitty wrote:
> http://www.socalolympians.org/about_us-c.asp
You are still stuck in that dreamweaver fireworks rut.
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
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.
"Nik Coughin"
news:xseod.8752$9A.192033@news.xtra.co.nz...
> 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;
>
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?
"rf"
news:nWeod.44535$K7.1725@news-server.bigpond.net.au...
> DaKitty wrote:
>
> > http://www.socalolympians.org/about_us-c.asp
>
>
> You are still stuck in that dreamweaver fireworks rut.
>
>
> 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
> 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 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.
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"
news:Prgod.44605$K7.38155@news-server.bigpond.net.au...
> 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.
>
>
>
> 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 wrote:
> "rf"
> Thanks :) Still things to tweak... May I say I'm kind of proud of my
first
> try! ;)
As you should be.
> 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.
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
DaKitty wrote:
> rf
>> 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:
This paragraph is not resizable.
This paragraph is resizable.
--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
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
"rf"
news:0ehod.44654$K7.42083@news-server.bigpond.net.au...
> DaKitty wrote:
> > "rf"
>
> > Thanks :) Still things to tweak... May I say I'm kind of proud of my
> first
> > try! ;)
>
> As you should be.
>
> > 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!
"Toby Inkster"
news:pan.2004.11.22.08.50.46.957204@tobyinkster.co.uk...
> DaKitty wrote:
> > rf
> >> 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:
>
>
> This paragraph is not resizable.
>
>
>
> This paragraph is resizable.
>
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.
"Nik Coughin"
news:Uyhod.8809$9A.194298@news.xtra.co.nz...
> 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 wrote:
> "rf"
> > 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)
.... including a link to your .css file
....
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 '
}
else
{
echo '\n";
}
}
echo "\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 gets output. If not then
an 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.
DaKitty wrote:
> "Nik Coughin"
> news:Uyhod.8809$9A.194298@news.xtra.co.nz...
>> 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.
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
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.
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.
in alt.html, Nik Coughin wrote:
> 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.
You can sometimes get much better results when you hand pick. Of course,
you need to know what you are doing, and it is not woth effort often.
> 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.
I was disappointed in GIMP2 palette thing, or maybe I just didn't know
how to use it. (It was maybe 5years since I hava done it last time...
used PhotoShop or PSP then...)
(Took me about 15minutes to build palette, most of the time used on
movin mouse around)
> I haven't run into that, but it is probably the 16bit display thing?
Is there any way to know 16bit colors used? So called "websafe colors"
don't help...
--
Lauri Raittila
Lauri Raittila wrote:
> in alt.html, Nik Coughin wrote:
>
>> 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.
>
> I was disappointed in GIMP2 palette thing, or maybe I just didn't know
> how to use it. (It was maybe 5years since I hava done it last time...
> used PhotoShop or PSP then...)
>
> (Took me about 15minutes to build palette, most of the time used on
> movin mouse around)
I haven't tried doing it like that, I've always just made my own .pal files.
Nice easy format, text file; header, number of colours, rows with an integer
for red, green and blue on each row seperated with spaces. Easy to
manipulate with a wide range of tools. Easy to read in and out of a custom
app. Easy to build a number of partial palettes and concatenate them into
one. I must try the GUI approach some time :)
>> I haven't run into that, but it is probably the 16bit display thing?
>
> Is there any way to know 16bit colors used? So called "websafe colors"
> don't help...
Don't know sorry.
"rf"
news:p9yod.45398$K7.386@news-server.bigpond.net.au...
> DaKitty wrote:
> > "rf"
>
> > > 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)
>
>
>
> ... including a link to your .css file
>
>
>
>
>
>
>
>
> ...
>
>
>
>
> 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 '
> }
> else
> {
> echo '\n";
> }
> }
>
> echo "\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 gets output. If not
then
> an 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
>
oh, neat!
Thanks for that. I saved the post and will look at it in more detail in
couple of days when I have time for some more of this... Real work getting
in the way! Pffft!
While sitting in a puddle DaKitty scribbled in the mud:
>> You can see a very minimal version of this hapenning here:
>> http://cueword.com.au/menu/page1.php
>>
> oh, neat!
> Thanks for that. I saved the post and will look at it in more detail in
> couple of days when I have time for some more of this... Real work getting
> in the way! Pffft!
I like mine better. Seems easier to use for me.
http://wipkip.us/menunav.phps
In use here,
http://wipkip.biz/index.php
--
Avoid reality at all costs.
While sitting in a puddle Duende scribbled in the mud:
> While sitting in a puddle DaKitty scribbled in the mud:
>
>>> You can see a very minimal version of this hapenning here:
>>> http://cueword.com.au/menu/page1.php
>>>
>> oh, neat!
>> Thanks for that. I saved the post and will look at it in more detail in
>> couple of days when I have time for some more of this... Real work getting
>> in the way! Pffft!
>
> I like mine better. Seems easier to use for me.
> http://wipkip.us/menunav.phps
> In use here,
> http://wipkip.biz/index.php
>
Ok, I just tried Cheers Richard's menu code and it is as good as mine.
--
Avoid reality at all costs.
Duende wrote:
> Ok, I just tried Cheers Richard's menu code and it is as good as mine.
I also notice that you might just get lost with those arrays of yours if
they get much larger, you know, having one out of sync with the other.
It may be better to initialize a two dimensional arrary, or at least an
arrary of two element arrays. That way you can have the target and the text
on one source line in the PHP, sort of like my function calls.
My example is also minimal. The real one does many more things, like adding
submenus if the menu item refers to the current page and adding other links
here and there, sometimes depending on stuff in the $_GET array.
--
Cheers
Richard.
While sitting in a puddle rf scribbled in the mud:
> Duende wrote:
>
>> Ok, I just tried Cheers Richard's menu code and it is as good as mine.
>
>
>
> I also notice that you might just get lost with those arrays of yours if
> they get much larger, you know, having one out of sync with the other.
I know that! I also had a $title = array in there but that got to be to
much trouble.
> It may be better to initialize a two dimensional arrary, or at least an
> arrary of two element arrays. That way you can have the target and the
> text on one source line in the PHP, sort of like my function calls.
>
> My example is also minimal. The real one does many more things, like
> adding submenus if the menu item refers to the current page and adding
> other links here and there, sometimes depending on stuff in the $_GET
> array.
>
So lets see your "real" one. I got to learn thes stuff somewhere.
--
Avoid reality at all costs.