Site Ratings & Reviews - Draft Photography Website Advice Needed

Author

Draft Photography Website Advice Needed

ste©

2004-09-13, 7:18 pm

Hi there,

I'm trying to create myself a photography website using a CSS based layout.
I'd normally create a website using tables, so this is a first for me.

The link to my website is here: http://tinyurl.com/4focd

The content on this site is so far very low (so not all the links work yet),
but before I spend too much time in the design and coding of this (by
coding, all I know is HTML and
CSS, so nothing fancy going on here I'm afraid), I'd appreciate it if you
could have a look at what's there already, and give me some feedback on the
design, and also some pointers on how I'm doing the CSS.

I realise that the layout only seems to work as I intend in Internet
Explorer 6, and this is how it should look: http://tinyurl.com/64epj If you
have any tips or hacks that you know of that will make the site work well in
most popular browsers, that'd be really helpful.

One more thing, as I only know HTML and CSS, I've been struggling to find a
quick way of adding photos to the Gallery section, without manually creating
a popup page for each image! I can just make the link for each image open
in a popup window on it's own, but I preper the HTML popup window (see the
second photo from the left for an example of the HTML popup window). Does
anyone have any tips for doing this in a more efficient way at all? Any
time saving advice will be appreciated, especially when I hope to add
several hundred photos to this website, once all the galleries are added.

Thanks for any help or advice, it's appreciated.

Regards,

Stephen

Rick Pasotto

2004-09-13, 7:18 pm

On Tue, 07 Sep 2004 12:28:25 GMT in alt.html.critique, rf wrote:
> Rick Pasotto wrote:
>
>
> [post intentionally untrimmed for clarity, or in my case unclarity]
>
> What has all of this to do with the cargo cult
>
> 
</script>

What you refer to as 'cargo cult' is actually quite useful *today*.

I did make one error though. I should have referenced validator.w3.org
rather than jigsaw.w3.org.

--
"Life's greatest happiness is to be convinced we are loved."
-- Victor Hugo, poet, novelist, and dramatist (1802-1885)
Rick Pasotto rick@niof.net http://www.niof.net

2004-09-13, 7:18 pm

Rick Pasotto wrote:

> You have a reading comprehension problem. Evidently *some* people need
> to be told every little detail.
>
> This does not validate:
>
> <script type="text/javascript">
> document.write('<link rel="stylesheet" href="extra.css">');
> </script>
>
> This *does* validate:
>
> <script type="text/javascript">
> 
> </script>
>
> What you refer to as 'cargo cult' is actually quite useful *today*.
>
> I did make one error though. I should have referenced validator.w3.org
> rather than jigsaw.w3.org.

Hmmm. A validator that recognises, indeed insists on, cargo cult nonsense?
How amusing.

I will leave this thread now. The other regulars here will no doubt tear
strips off you :-)

--
Cheers
Richard.

2004-09-13, 7:18 pm

ste© wrote:

> Thanks for the reply Richard.

Cheers and thanks for your most detailed reply to my critique.

But... it's about 11:30 here, way past my bedtime :-)

Promise: I will reply to all of your points in the morning, after a quiet
coffee :-)

However all of those Yanks will have had their say by then :-)

--
Cheers
Richard.

ste©

2004-09-13, 7:18 pm

"rf" <rf@.invalid> wrote in message
news:f2g%c.22452$D7.14731@news-server.bigpond.net.au...
> ste© wrote:

Thanks for the reply Richard.

<snip>

> Nice look :-)
>
> Is there supposed to be a black line through the splash picture?

Yes and No. Yes, because I know about it and am putting up with it, and no
because I want to get rid of it! :-) But I don't know how to get the div
with the main image tight to the div containing the blurred and darker
image! :-( What's I'd like to do is to have text or images put over the top
of the blurred image with latest updates to the website, to actually give my
home page some function, rather than just be a splash page. Any ideas why I
can't get the images fitting tight next to each other? The padding is set
to 0px, but it just won't get rid of that black line. :-(

> You are using images of text for your navigation. Don't. Those images are
> not resizable.
>
> I assume you are doing this to achieve the rollover effects. This can
*all*
> be done with pure text/HTML/CSS. No images required. Makes it *much*
faster
> as well, no pesky images to download and *no* need for all that
javascript.
> You also then get to use a different colour for visited links.

Yes, it's the rollover buttons that I'm trying to achieve. If I can get rid
of JavaScript, then all the better! But I didn't realise I could use CSS to
create the identical rollover button effect? I don't want to create a poor
alternative just because I *can* use css to do something *similar* but not
quite as nice looking, so can I definitely create the exact same look and
effect? If so, do you have any links to websites that show me how to do
this, or is there a search term that will easily enable me to find what I'm
looking for? The problem is that I'm ignorant to this at the moment, so I
probably wouldn't even know if I'd found what you mentioned if I did find
it! :-)

> The HTML:
>
> <script language=JavaScript>
>
> Should be <script type="text.javascript>
>
> 
<html>
<head>


<link rel="stylesheet" href="css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="css/linkstyles.css" media="screen"
type="text/css">
<link rel="shortcut icon" href="favicon.ico">
</head>

<body>
<div id="bordertop">
</div>
<div id="header">

</div>
<div id="blackbar">
</div>
<div id="content" class="contenthome">

</div>
<div id="strap">

</div>
<div id="footer">

</div>
</body>
</html>

> The CSS:
>
> Why is *everything* positioned relative? Do you know exactly what position
> relative means? If not then you should not be using it.

I created the site using trial and error, and it seemed to work. Using
position relative meant that the different sections of the page simply
followed on from the previous one. I didn't want to use position absolute
because that wouldn't have worked with my attempt to make a fully fluid
website, as I wouldn't have known where things would appear absolutely at
different resolutions. ...or maybe I'm just not understanding this
properly?

> The CSS is way to verbose. You don't need all those rules. Utilize
> inheritance. You seem to be specifying a rule for each element in your
HTML
> document.

I'll have a look at it and try and make it more efficient, but I thought
that those rules were needed because I want things in different sections
styled in different ways.

> Do *NOT* fiddle with my UA. This is my browser, I like my scroll bars nice
> and blue, like I set them up to be.

I do apologise for fiddling with your UA Richard (that sounds rude!), but I
noticed the effect on some other websites and thought it looked quite cool.
I guess this is a 50/50 personal preference thing, some people like it, some
people don't. Unless there is a technical reason that causes the website to
not work correctly, then I'm inclined to keep it as it's part of the website
style. However, I did notice that these bits of css didn't validate
either...

> The gallery:
>
> The grey on black navigation bar is almost impossible to read

Ahh, good point, thanks. I will play with the colours of these and either
make them light grey (like the footer) or white.

> Nothing happened when I clicked a thumbnail. Oh hang on, I just got an
error
> message. My popup blocker has stopped you from opening a new window. Why
do
> you think that I need another window to look at your images? The one I
> already have open is fine for me.

I take your point about this, but I'd say it's another 50/50 personal
preference thing. I don't like advertising popups, but when viewing website
image galleries, I like the images to popup in a seperate window, rather
than open an image and be taken away from the main page I was viewing.

> Contact:
>
> You are aware that mailto does not work, are you not? Hint - I am in a
> public library. Do you think a public library has an email client
installed?
> Hint - I use hotmail. I do hot *have* an email client.

Thanks, I will create a proper form on this page using a CGI script provided
by my ISP, so this won't rely on the mailto command.

> Other:
>
> The font size is not fixed. It is, however, a bit too small at 80%. I
> immediately enlarged it back to what I like. Why not simply leave font
size
> out altogether. You will then get a font size that your viewer likes.

I did this because I just thought it looked a bit cooler than a larger font,
so just a style thing. I used to specify fonts using points, so I thought I
was doing negotiating really well by keeping them as percentages. :-)

> The fluid width is a big plus :-)

Hey, it's fluid width *and* height! ;-) It's a bit of a nuisance though
because I'm working in percentages all the time, so can't position certain
things exactly where I want to.

> Cheers
> Richard.

Thanks Richard,

Stephen

2004-09-13, 7:18 pm

Rick Pasotto wrote:

> On Tue, 07 Sep 2004 10:27:23 GMT in alt.html.critique, rf wrote:
this[color=darkred]
>
> I'm not so sure of that. I have some pages that have two <div>s that I
> want one or the other displayed but not both at the same time. So I set
> one of them to display:none and the other to display:block and offer a
> button that calls some javascript to toggle between them. Wanting the
> full page to be accessible when javascript is turned off I got the
> suggestion to put the above css in a separate file and then put in the
> <head>:
>
> <script type="text/javascript">
> document.write('<link rel="stylesheet" href="extra.css">');
> </script>
>
> This does exactly what I want but jigsaw doesn't validate it. Adding the
> html quoting doesn't affect the operation but it allows it to validate.
>
> You can see how I use it at <http://www.afclt.org>.

[post intentionally untrimmed for clarity, or in my case unclarity]

What has all of this to do with the cargo cult

<!-- Hide script from old browsers

I mentioned above?

Do you have a case of bad snippage?

--
Cheers
Richard.

kchayka

2004-09-13, 7:18 pm

Rick Pasotto wrote:
>
> This does not validate:
>
> <script type="text/javascript">
> document.write('<link rel="stylesheet" href="extra.css">');
> </script>
>
> This *does* validate:
>
> <script type="text/javascript">
> 
> </script>
>
> What you refer to as 'cargo cult' is actually quite useful *today*.

No, it's cargo cult. If you read the W3C validator Help/FAQ, you would
know why your code fails and what to do about it. It has nothing to do
with putting it within HTML comments.
<URL:http://validator.w3.org/docs/help.html#faq-javascript>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

kchayka

2004-09-13, 7:18 pm

Neal wrote:

> On Tue, 07 Sep 2004 11:13:07 -0500, kchayka <usenet@c-net.us> wrote:
>
>
> ... which just refers you to
>
> http://www.htmlhelp.com/tools/valid...ems.html#script

Yeah, perhaps I should have pointed that out myself. My point was more
or less if you're using the W3C validation service, their help/faq
should be the first place you look when it spits out an error,
particularly if you don't understand why it's an error. It was fairly
obvious (to me, anyway) that the poster didn't do that.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Neal

2004-09-13, 7:18 pm

On Tue, 7 Sep 2004 15:45:40 -0400, Rick Pasotto
<rickpasotto@chi.news.speakeasy.net> wrote:

> On Tue, 07 Sep 2004 12:54:30 -0500 in alt.html.critique, kchayka wrote:
> Neither of those pages deals with the specific code that I posted.
>
> The *fact* is that the code I posted does *not* validate without the html
> comments and *does* validate with them. Whether the validator is at
> fault or not is irrelevant. That is what happens. *Today*. Live with it.

So... you contend that

<script type="text/javascript">
document.write('<link rel="stylesheet" href="extra.css">');
</script>

won't validate? I just put it - exactly as I quoted it - in a page and
validated it. It went fine. See for yourself.

http://users.rcn.com/neal413/script.html

http://validator.w3.org/check?uri=h...3%2Fscript.html

So what ARE you arguing??

Rick Pasotto

2004-09-13, 7:18 pm

On Tue, 07 Sep 2004 12:54:30 -0500 in alt.html.critique, kchayka wrote:
> Neal wrote:
>
>
> Yeah, perhaps I should have pointed that out myself. My point was more
> or less if you're using the W3C validation service, their help/faq
> should be the first place you look when it spits out an error,
> particularly if you don't understand why it's an error. It was fairly
> obvious (to me, anyway) that the poster didn't do that.

It's fairly obvious to me that you are full of it. You really shouldn't
make assumptions, particularly such assinine ones.

Neither of those pages deals with the specific code that I posted.

The *fact* is that the code I posted does *not* validate without the html
comments and *does* validate with them. Whether the validator is at
fault or not is irrelevant. That is what happens. *Today*. Live with it.

I asked no questions. I made no complaint. I didn't ask for any help.

I pointed out a *fact*.

It is becoming more and more apparent that the regular posters are here
more to *criticize* (ie, to be assholes) than to *critique* (ie, to be
helpful).

I suggest they pay more attention to the name of the newsgroup.

--
"To wish to be well is a part of becoming well." -- Seneca
Rick Pasotto rick@niof.net http://www.niof.net

Rick Pasotto

2004-09-13, 7:18 pm

On Tue, 07 Sep 2004 16:06:51 -0400 in alt.html.critique, Neal wrote:
> On Tue, 7 Sep 2004 15:45:40 -0400, Rick Pasotto
> <rickpasotto@chi.news.speakeasy.net> wrote:
>
>
> So... you contend that
>
> <script type="text/javascript">
> document.write('<link rel="stylesheet" href="extra.css">');
> </script>
>
> won't validate? I just put it - exactly as I quoted it - in a page and
> validated it. It went fine. See for yourself.
>
> http://users.rcn.com/neal413/script.html
>
> http://validator.w3.org/check?uri=h...3%2Fscript.html
>
> So what ARE you arguing??

Well, for one thing that you shouldn't make assumptions. Try using an
XHTML doctype.

I changed the doctype and added a closing slash to the <meta> tag:

<http://niof.net/script1.html> does *not* validate.
<http://niof.net/script2.html> *does* validate.

If you'd bothered to look at the page I gave as an example you might
have picked up on that. (BTW, don't bother to look now because I've
found a different way to accomplish the task. Or maybe you *should* look
and learn something.)

--
"He is a hard man who is only just, and a sad one who is only wise."
-- Voltaire, philosopher (1694-1778)
Rick Pasotto rick@niof.net http://www.niof.net

Neal

2004-09-13, 7:18 pm

On Tue, 7 Sep 2004 17:29:48 -0400, Rick Pasotto
<rickpasotto@chi.news.speakeasy.net> wrote:

> Well, for one thing that you shouldn't make assumptions. Try using an
> XHTML doctype.

Ok.

> I changed the doctype and added a closing slash to the <meta> tag:
>
> <http://niof.net/script1.html> does *not* validate.
> <http://niof.net/script2.html> *does* validate.
>
> If you'd bothered to look at the page I gave as an example you might
> have picked up on that. (BTW, don't bother to look now because I've
> found a different way to accomplish the task. Or maybe you *should* look
> and learn something.)

Read http://www.w3.org/TR/2002/REC-xhtml1-20020801/#h-4.8 - it describes
how XHTML has issues with this, and the proper way to "escape" the script.

<script type="text/javascript">
<![CDATA[
document.write('<link rel="stylesheet" href="extra.css" />');
]]>
</script>

http://users.rcn.com/neal413/xscript.html

http://validator.w3.org/check?uri=h...%2Fxscript.html

Rick Pasotto

2004-09-13, 7:18 pm

On Tue, 07 Sep 2004 16:05:55 -0500 in alt.html.critique, kchayka wrote:
> Rick Pasotto wrote:
>
> <sigh>
>
> When someone tries to spread dung as truth,

I regret you find the truth to be dung.

> it is the responsibility of those with more knowledge or experience to
> enlighten the uninformed (or misinformed).

If you or someone else had written 'yes, that happens to work but there
is a better, more standards compliant way' then I would have gladly
thanked you for the info.

> Sorry if I offended you.

More of your assumptions. I was not offended. I was annoyed at your
inability to read and at your refusal to face facts.

> Next time, you should put on your flame-proof, teflon suit before
> posting.

No flame-proof suit would be necessary if the flame-throwers weren't so
ready to start a fire.

--
"He is a hard man who is only just, and a sad one who is only wise."
-- Voltaire, philosopher (1694-1778)
Rick Pasotto rick@niof.net http://www.niof.net

Ben Measures

2004-09-13, 7:18 pm

Rick Pasotto wrote:
> kchayka wrote:
>
> I regret you find the truth to be dung.

You erroneously corrected him, what you said was not the truth.

--
Ben M.

Neal

2004-09-13, 7:18 pm

On Tue, 7 Sep 2004 20:14:19 -0400, Rick Pasotto
<rickpasotto@chi.news.speakeasy.net> wrote:

> No flame-proof suit would be necessary if the flame-throwers weren't so
> ready to start a fire.

Welcome to Usenet.

Ben Measures

2004-09-13, 7:18 pm

Rick Pasotto wrote:
> Ben Measures wrote:
>
> I made no mention of the script *execution*. Stick to what I actually
> wrote. The (X)HTML snippet I posted *does* validate. That is *all* that
> I said.

If the script does not execute then the point is moot. You may as well
have written:



Like your script, this validates but may not do what you intended. Hence
the "getting colder".

--
Ben M.

ste©

2004-09-15, 12:17 pm

"Chris Beall" <Chris_Beall@prodigy.net> wrote in message
news:CJj%c.8676$ZC7.5989@newssvr19.news.prodigy.com...
| ste© wrote:
| > Hi there,
| >
| > I'm trying to create myself a photography website using a CSS based
layout.
| > I'd normally create a website using tables, so this is a first for me.
| >
| > The link to my website is here: http://tinyurl.com/4focd
| (snip)

Thanks for the reply Chris.

| Stephen,
|
| On the home page you have two panoramic photos.
|
| Using Netscape 7.1, if I make my browser window wide but short or narrow
| but tall, it distorts the aspect ratio of these photos. The effect isn't
| bad for landscapes, but would be grotesque for faces. Perhaps you can
| remove height="100%" from the two img tags to maintain the aspect ratio
| as screen size changes.

I'll have a go at changing this and see how it goes. Worse comes to worse
though, and I'll take your advice and just stick with landscape images.

| On the gallery page navigation: absracts -> abstracts.
|
| Netscape 7.1, at 600 X 800 full-screen, doesn't like it:
| - On the Home page, the nav links are about 1px down into the black
| area below them. The upper div, including your name, the nav, and the
| upper photo, are offset to the left of where you expect them, so there's
| a jog between them and the lower photo.
| - On the About page, the black area at the bottom of the screen
| ("strap") covers the last paragraph of text. There are also offsets
| similar to the Home page. Reducing screen width moves the text downward
| until it starts to appear below the footer. If the window width is
| reduced, the main nav links overlay your logo.
| - On the Gallery page, in addition to problems described above, if the
| window width is reduced, the sub-nav links (landscapes, nature, etc.)
| start to disappear from the right end. I suspect they have slid downward
| and are hidden by the white area below them.
| - On the News page the first two news items are covered by the black
| bar ("strap") and the footer text.
|
| Net: You need to test with something other than IE. I suspect Firefox
| will show the same problems and would be a good choice to start with.

Boy, that's quite a list there Chris! If only everyone used IE6! :-) I'm
going to tidy up all my code and see what I can learn from Richard's sample
website, and I'll then put this through a selection of other browsers before
I finish it off. Sometimes I think I might have been better off using
tables instead! Good old tables eh, never had a problem with them! :-)

| Chris Beall

Thanks,

Stephen

2004-09-15, 7:18 pm

ste© wrote:
>
> "rf" <rf@.invalid> wrote in message
>
> | Alternatively, in this case, why not just one image.
>
> One reason is that I thought that two smaller images might load quicker
than
> 1 big image.

Nope. Common fallicy.

Two images may *appear* to load more quickly because things are hapenning,
the first image gets there in just over half the time. There is something
happening to distract the viewer.

However:

Two images are invariably bigger than one image, unless you are cutting up
the image into a small detailed jpeg and a large almost monochrome gif.

Two images are two round trips back to the server. From where I am
(Australia) your site is 400ms away. Yep, almost half a second simply to get
there and back. Two images imply an extra 400ms to get the data. Now, if you
were to slice the image up into 100 bits... Yeah, 40 seconds overhead :-)
Well, not exactly, probably something like 25 as the browser does do a
couple of gets at the same time.

> Another reason is that I wanted the two images to represent two sections -
> the main image is to be left as it is. But the idea of the blurred image
is
> that I want the option of adding some text over the top of it, like latest
> news, latest images, etc. I had a quick try at adding some text in, but
the
> text went below the blurred image rather than over it - do you know how I
> can add text over the image at all? If it was a table cell, I think
there's
> a line of HTML to add a background image to a cell, but with CSS layouts,
I
> wasn't so sure.

Hmmm. Tricky.

If you did not want those images to stretch across the screen I would simply
say use them as a background on something. However you can not stretch a
background.

One solution is to put the stretched image in a div (the div must be
position: relative. Read up on containing elements in the spec). Also inside
that div is an absolutely positioned div containing some text. This div will
be absolutely positioned within and relative to the first div. The text will
live over the top of the image, at top:, left:.

http://users.bigpond.net.au/rf/ste/index2.html

I also corrected a mistake, a missing </div> at the end of the document.

> | > > There is some redundancy:
>
> Thanks for the overview of this, I'll go through my style-sheets and try
and
> tidy them up.

I have always found the "start again" approach better. It's easier to insert
something you *know* you need than to delete something you are not really
sure about. Besides the CSS should not be *that* big. A rewrite should only
take half an hour or so.

> Having already skipped below to your sample website, it's
> quite scary to see that there's only a handful of CSS elements

rules

> in your
> website, yet mine has loads! Obviously I'm not doing things as
efficiently
> as I could be...

I tend to use an outside-in approach. Get the content done first then work
from the outside, the body element, and apply styles, many of which will
trickle down (inherit) to children elements. At each stage only apply styles
that are required at that level to change the appearence to what you want.
If you ever find yourself using the same property in two style rules then
back up, outwards, and find a common parent element where you can apply the
style.

The alternative approach, taken by many who know HTML but are learning CSS,
is the inside out approach. Look at a single, lowest level element, a <p>
for instance, and apply every style that is required to make that <p> work.
Do this in a style rule that selects only that <p>. Now, move on to the next
element and repeat the process. You end up with a style rule for every
element on the page, with properties repeated everywhere. This defeats one
of the purposes of CSS, that is, inheritance. What if I want to change the
font-family? Inside-out I have to find every rule that sepecifies a
font-family for and element on the page and I *will* miss one. Outside-in I
only have to find the body {...} rule :-)

> I'll have to come clean here, what's a UA? :-) I'm guessing it's
something
> to do with the standard user interface or something.

Sorry, jargon. User Agent. The thing that is reading and parsing your web
page. Most usually it is a browser but it could be, for example, a search
engine spider, or the validator, or a nice person who is trying to find why
your images are not joining up.

[opening new windows]

> I've done this myself so I know what you mean. My only gripe now is that
I
> don't want a user to open a jpeg image directly, but rather a html page
with
> an image in it.

http://cueword.com.au/mulubinba/

The "source" is some very high resolution images stored on my local file
system, with the captions burnt into the images as a "description" field in
the jpeg.

The entire site (apart from the index or TOC page, and the CSS) was
constructed by a program I wrote to take these jpeg and build a thumbnail, a
web-resolution image (the correct size) and all the supporting HTML for the
400 or so pages. Add an image to the "source", run "build", upload changes
to web site.

Of course I would do it differently now. I would have two PHP processes, one
for the thumbnail pages and another for the image pages, with a chapter or
an image-id passed to the PHP.

[font size]

> I know what you're saying here, but there needs to be a line drawn between
> the designer designing the website, and a user viewing the website.

We will have to agree to differ here, and at this point in time :-)

If you like it like that then I am resigned to having to Ctrl-roll my mouse
wheel to view your site. Don't worry. All the other lemmings out there do it
as well, I am by now used to rolling my wheel :-)

Of course I still like to beat my drum...

> | Most of the professionals here will reply that it is
> | the *users* option to change the font size, just as it is the option of
> the
> | listener to change the music volume and not the radio station.
>
> Oh gosh, I haven't got any time to get involved in flame wars! Expecially
> when the users are all lemmings anyway, who get what they get and should
be
> happy with it and not complain! ;-) ;-)

<humour>
What?!
That is simply Not Good Enough.
You are supposed to rant and rave and call everybody within range bad and
nasty names. You are supposed to Join In!
Now, go and get your tinfoil hat and prepare thyself!
</humour>

> | Fluid width is the plus. All sites are of course fluid hieght. The
browser
> | insists on that. That is unless the author goes to extreme lengths to
> | confuse the browser.

> When I read this bit yesterday I felt a bit silly after claiming the page
> had fluid height. ...however, in work, I use a 19" monitor with a higher
> screen resolution, so when I loaded the websites up on that monitor, my
own
> website filled the screen with both height and width, but your sample
below
> only filled about half the screen with height. I do prefer the fluid
> height, but understand that this may have knock-on effects when lots of
> content is added too.

I did notice your "fluid height" and dismissed it in what I did.

People are *used* to a vertical scroll bar. If there is any need to make the
document longer, so as to "fill up" the viewport, then IMHO the document is
not long enough. The web is not about screenfulls of information, it is
about documents accessed via a viewport. Yes, don't have a site consisting
of one enourmously long document. But, don't split it into less than mouth
sized chunks.

For example, there are hundreds of FAQ sites out there. The ones that annoy
me are the ones with a page of Q's pointing to hundreds of little A's, each
one three lines long and on a different page. The better ones put all of the
A's after the Q's on one reasonably long page. I can still access the A'a
randomly. However, I can also simply scroll down and read the entire FAQ as
a, if you like, novel, without having to back and mouse to the next Q and
click.

> Another problem with having a big splash image and fluid height and widths
> is that I need to have a suitably large image so the image doesn't look
too
> poor quality when stretched beyond a certain point.

Apart from the fact that I consider splash pages redundant (merely another
barrier for the viewer to negotiate to get to your content) I don't like the
idea of stretching images at all. Browsers do a very bad job of it. And what
are you stretching it to? The viewport. See above :-)

A nice discreet image, say 400x400, surrounded by nice black text that
explains succinctly what the site is all about is IMHO a far better "entry"
page. Give me something to read. Now. Gain my interest Right Up Front.
Imediately. You only have 11 seconds to do so, before I hit the back button
on my mouse.

> | What do you have? A logo, some navigation, a big picture and a copyright
> | notice. Lets just simply plonk them on a page without any styling at all
> | (except for width and height on that image):
> |
> | http://users.bigpond.net.au/rf/ste/index1.html
>
> Hey, is that all I've got? :-) Simple eh! :-)

<grin/> Yep.

Consider a web page to be a montage. You have a bunch of images you have cut
out of a magazine. You have a bunch of text that you have written on a long
piece of ribbon. Just plonk it all on a page. The browser will take care of
the initial layout.

You use a judicious amount of CSS to suggest to the browser that you might
like it to look a little bit differrent. Not a lot, just a little. As I said
elsewhere today don't go overboard by insisting that the page look exactly
like your back of the envelope sketch. If you can't achieve your design
easily and simply then... <horror> change the design </horror> :-)

> Wow Richard, my very own CSS buttons! :-)

Yep. It's real hard to grok the first time but after that it's just a matter
of roughly reproducing that sketch :-)

> But wait a minute, where's that
> stylish black line gone from between my image and blurred bottom image?
:-)

Oops.

> This is really good Richard, thanks for showing me this. I've saved the
> file now, so I just need to go through it, compare what I did to what
you've
> done, and basically learn from it.

Some of it you will *not* understand, not even with reference to the spec.
All of the browsers have quirks and it is now such a habbit to stick the
relevent bits in to cater to those quirks that it is a subconcious act. For
example, why specify height: 2.2em for that .nav rule? Well, it is there to
cause mozilla based browsers to behave. Today I found I had to say:

..nav li {background-color: blue; border: solid 1px blue:}

Why? To make IE behave in a particular circumstance.

Then again that is why this group is here. Build your page. When it doesn't
work, ask. Someone will state:
<img ...><img
....>

> On quick comment I have though is that
> you've used 'em' rather than 'px.' When I entered 'px' and different
> numbers for the nav buttons, I couldn't get them set up right (as you have
> them). Obviously some more reading and testing is needed before I
> understand this, but I'll get to the bottom of it before long.

px means exactly that. A number of pixels. Most of the reasons a page breaks
is because somebody has use px somewhere and has forgotten that a font is
not a number of pixels, but an em. (traditionally em means the height and/or
width (they are usually the same in this case) of a capital M in the
particular font)

Specifying sizes in ems causes the entire construct (in this case the nav
bar) to resize as a whole when the font size is changed. Use px and bits of
the nav bar resize without the others. Use px for font-size and IE will not
allow the user to change the font size (by default that is) but Mozilla
*will*. Carefully construct your page using px for everything, including the
layout of the text (usually so it fits into some "graphic designed"
background) and the page *will* break;

> I'd also like to have a random splash image load each time
> the website loads or is refreshed, but I don't want to use JavaScript if I
> can help it

Wise choice. However for something so unimportant (read _not_ mission
critical) javascript is OK.

> so might just do this manually each week.

Consider a server side process.

--
Cheers
Richard.

Andrew D

2004-09-16, 6:32 am

In article <1vy%c.23348$D7.6689@news-server.bigpond.net.au>, "rf"
<rf@.invalid> wrote:

[snip]

> Most of the professionals here will reply that it is
> the *users* option to change the font size, just as it is the option of the
> listener to change the music volume and not the radio station.

That's the best explanation I've seen as to why the designer shouldn't try
to control the experience too much. I just imagined my life with every
third song on the radio belting out at three times normal volume because
the recording group "thought it sounded better that way".

The problem in the case of browsers seems to relate to software companies
choosing an unusually large default size paired with the
possibility/probability that a large number (majority?) of users don't
know how to change it with the result that *they* think the site design is
awful when in fact, it may just be user-friendly. I assume the vast
majority of radio owners know how to use the volume knob though.

>
> Fluid width is the plus. All sites are of course fluid hieght. The browser
> insists on that. That is unless the author goes to extreme lengths to
> confuse the browser.

This site really is fluid height - it stretches top to bottom. Most sites
either fit or scroll (the word "most" is used here without reference to
any empirical data). Your sample below, for example, isn't vertically
fluid in the same way.

> The "below" bit.
> http://users.bigpond.net.au/rf/ste/index1.html

--
Andy D.
http://members.westnet.com.au/andydolphin/
Fine art gallery - online, Western Australia
Landscapes, seascapes and still life paintings in oils.