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

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
>
> <!-- Hide script from old browsers
>
> I mentioned above?
>
> Do you have a case of bad snippage?

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">
<!--
document.write('<link rel="stylesheet" href="extra.css">');
-->
</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

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">
> <!--
> document.write('<link rel="stylesheet" href="extra.css">');
> -->
> </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.

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.

"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>
>
> <!-- Hide script from old browsers
>
> The only browser you are hiding anything from is Netscape release 2 and
> other similar things. These are now totally obsolete. You don't need this
> cargo cult stuff any more.

Good stuff, and if I can create some CSS 'rollover buttons,' there will be
no need for it anyway! :-)


> The image preloads: see above.
>
> There is some redundancy:
>
> <div id="footer">
> <p class="footerstyle">
>
> Why not just apply all the styles to the p containing the copyright
notice.
> There is no need for an enclosing div. Same for many other bits. You don't
> need the divs. Just apply the styles to the elements inside the divs.

I've just kept my 'table rows' and font styles seperate.  Is this not good
practice?  So the id=footer relates to the size and position of that 'table
row' in the css layout, and the id=footerstyle relates to the font styles.
Is it better to put these all into the same bit then?  I'm still getting
mixed up with id's and classes, but thought that id's could only appear once
on a page, yet classes could appear as often as I wanted.  I guess my idea
then was to create styles that could be re-used over and over on a page, but
in practice, I've only used them in once place, oh well. :-)


> Why are you serving up your pages as .shtml? I see nothing that needs a
> secure connection here.

There's nothing nothing secure, but just Server Side Includes (SSI's).  I
don't know ASP or PHP (I wish I did!), so my only method of creating pages
that use the same elements is to use the includes and the *.shtml extension
so the web server knows there are other files to include.  For example, my
index page (before a user opens it) looks like this:

<!--#include virtual="/photography/includes/doctype.htm"-->
<html>
<head>
<!--#include virtual="/photography/includes/title.htm"-->
<!--#include virtual="/photography/includes/meta.htm"-->
<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>
<!--#include virtual="/photography/includes/rolloverscript.htm"-->
<body>
<div id="bordertop">
</div>
<div id="header">
<!--#include virtual="/photography/includes/buttons.htm"-->
</div>
<div id="blackbar">
</div>
<div id="content" class="contenthome">
<!--#include virtual="/photography/includes/homeimages.htm"-->
</div>
<div id="strap">
<!--#include virtual="/photography/includes/content/strap.htm"-->
</div>
<div id="footer">
<!--#include virtual="/photography/includes/content/footertext.htm"-->
</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

Rick Pasotto wrote:

> On Tue, 07 Sep 2004 10:27:23 GMT in alt.html.critique, rf wrote: 
this 
>
> 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.

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">
> <!--
> document.write('<link rel="stylesheet" href="extra.css">');
> -->
> </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.

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.

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...pt.ht
ml

So what ARE you arguing??

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