This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Site Ratings & Reviews > September 2004 > Draft Photography Website Advice Needed
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Draft Photography Website Advice Needed
|
|
|
| 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-08, 7:18 pm |
| Reply-To: rick at niof dot net
Message-ID: <slrncjtkg9.u1s.rickpasotto@tc.niof.net>
User-Agent: slrn/0.9.8.0 (Linux)
Date: Wed, 8 Sep 2004 05:34:01 -0400
Lines: 30
NNTP-Posting-Host: 66.93.248.169
X-Trace: sv3-TwIIgJOgqF7Mym0WoBHxk3o7M//KkJ5VDemWrpYa5q4pMSJlZuDwNJK7M60TOIfq2a/jI9+MaSLi82z!SHW2kaeHhLuyPIWjw/5XPRi/k9fJpmQADkwkxESTzlFM4duyaveFaIAc3hbTwOKai4Cs8eHDHLaq!yxAkKHYX6Ma5u/OvhkNft76eZT0=
X-Complaints-To: abuse@speakeasy.net
X-DMCA-Complaints-To: abuse@speakeasy.net
X-Abuse-and-DMCA-Info: Please be sure to forward a copy of ALL headers
X-Abuse-and-DMCA-Info: Otherwise we will be unable to process your complaint properly
X-Postfilter: 1.3.13
Xref: newsfeed-west.nntpserver.com alt.html.critique:52716
On Wed, 08 Sep 2004 02:39:50 GMT in alt.html.critique, Ben Measures
wrote:
> Rick Pasotto wrote:
>
> You erroneously corrected him, what you said was not the truth.
You are wrong.
What statement did I make that you believe to be in error? Post the
article ID, quote the statement, and explain *why* it was wrong.
Learn to deal with *facts* instead of unsubstantiated assertions.
--
"Knowing others is intelligence; knowing yourself is true wisdom.
Mastering others is strength, mastering yourself is true power."
-- Lao-Tzu, philosopher (6th century B.C.)
Rick Pasotto rick@niof.net http://www.niof.net
| |
| Rick Pasotto 2004-09-08, 7:18 pm |
| On Tue, 07 Sep 2004 22:57:27 -0400 in alt.html.critique, Neal wrote:
> On Tue, 7 Sep 2004 20:14:19 -0400, Rick Pasotto
> <rickpasotto@chi.news.speakeasy.net> wrote:
>
>
> Welcome to Usenet.
Fool.
I've been dealing with usenet since long before the internet existed.
Your attitude serves merely to perpetuate and compound the incivility.
--
"Reason often makes mistakes, but conscience never does."
-- Josh Billings, columnist and humorist (1818-1885)
Rick Pasotto rick@niof.net http://www.niof.net
| |
| Ben Measures 2004-09-08, 7:18 pm |
| Rick Pasotto wrote:
> Ben Measures wrote:
>
> What statement did I make that you believe to be in error? Post the
> article ID, quote the statement, and explain *why* it was wrong.
kchayka wrote:
> <!-- 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.
Rick Pasotto wrote:
> I'm not so sure of that.
True.
> This does not validate:
>
> <script type="text/javascript">
> document.write('<link rel="stylesheet" href="extra.css">');
> </script>
True.
> This *does* validate:
>
> <script type="text/javascript">
> <!--
> document.write('<link rel="stylesheet" href="extra.css">');
> -->
> </script>
Getting colder. The result of the script execution will not validate (as
XHTML). Then again, the script may not even execute
http://www.w3.org/TR/xhtml1/#C_4 .
> What you refer to as 'cargo cult' is actually quite useful *today*.
Wrong. Brought about because your supporting code was not correct for
XHTML and not correct for the OP's doctype.
The reason for using HTML comments in script tags is exactly as kchayka
described.
http://www.w3.org/TR/html4/types.html#h-6.14
> Script data ( %Script; in the DTD) can be the content of the SCRIPT
> element and the value of intrinsic event attributes. User agents must
> not evaluate script data as HTML markup but instead must pass it on as
> data to a script engine.
http://www.w3.org/TR/html4/interact/scripts.html#h-18.3
> User agents that don't recognize the SCRIPT element will likely render
> that element's contents as text. Some scripting engines allow the script
> statements to be enclosed in an SGML comment. User agents that don't
> recognize the SCRIPT element will thus ignore the comment while smart
> scripting engines will understand that the script in comments should be
> executed.
Thus /all/ conforming browsers will not render script contents. AFAIK
the only browsers that do this are pre-NN2.
So kchayka was right and you were wrong. Be a man and apologise for
spreading muck on kchayka's truth.
--
Ben M.
| |
|
| Ben Measures wrote
[color=darkred]
> kchayka wrote:
this[color=darkred]
Ahem. I refer you to the second post in this thread wherein *I* wrote that
:-)
--
Cheers
Richard.
| |
| Ben Measures 2004-09-08, 7:18 pm |
| rf wrote:
> Ben Measures wrote
>
>
> Ahem. I refer you to the second post in this thread wherein *I* wrote that
> :-)
Oops, my apologies. For some reason I got you two mixed up, now noted. ;)
--
Ben M.
| |
| Ben Measures 2004-09-08, 7:18 pm |
| Ben Measures wrote:[color=darkred]
>
> kchayka wrote:
>
Ooops, wrong attribution - that should be "rf wrote:".
Redirect all your apologies that way ;)
--
Ben M.
| |
| Rick Pasotto 2004-09-08, 11:17 pm |
| On Wed, 08 Sep 2004 11:12:16 GMT in alt.html.critique, Ben Measures wrote:
> Rick Pasotto wrote:
>
> kchayka wrote:
>
> Rick Pasotto wrote:
>
> True.
>
>
> True.
>
>
> Getting colder.
Does the code snippet validate or not. That is the *only* question.
There is no 'colder'.
> The result of the script execution will not validate (as
> XHTML). Then again, the script may not even execute
> http://www.w3.org/TR/xhtml1/#C_4 .
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.
>
> Wrong. Brought about because your supporting code was not correct for
> XHTML and not correct for the OP's doctype.
All I claimed was that using HTML comments resulted in the code passing
the w3c validator. Perhaps you don't consider that useful. I do. Perhaps
the validator is in error. Could be. My statement still stands.
> The reason for using HTML comments in script tags is exactly as kchayka
> described.
That may be the *official* reason but I pointed out an instance where
they could be used otherwise.
> http://www.w3.org/TR/html4/types.html#h-6.14
>
> http://www.w3.org/TR/html4/interact/scripts.html#h-18.3
>
> Thus /all/ conforming browsers will not render script contents. AFAIK
> the only browsers that do this are pre-NN2.
>
>
> So kchayka was right and you were wrong. Be a man and apologise for
> spreading muck on kchayka's truth.
Why don't you deal with what I *actually* wrote instead of what you
imagine I wrote.
Look, I didn't say it was a good idea. I didn't say it should be done.
I didn't say it conformed to anything at all. I merely said that it
resulted in the code passing the validator. Stop trying to pretend I
said anything else.
--
"Reason often makes mistakes, but conscience never does."
-- Josh Billings, columnist and humorist (1818-1885)
Rick Pasotto rick@niof.net http://www.niof.net
| |
|
|
"rf" <rf@.invalid> wrote in message
news:1vy%c.23348$D7.6689@news-server.bigpond.net.au...
<snip>
| The "below" bit.
|
| I stole your stuff and had a quick play. The home page.
|
| 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
|
| This is really very close to what you want. A tiny bit of CSS will fix up
| things:
|
| http://users.bigpond.net.au/rf/ste/index2.html
|
| Ok, it's not exactly that tiny but this will be used of course on every
| other page of the site.
|
| --
| Cheers
| Richard.
Hi Richard,
I've been up since 5am after an early start for a work meeting at the other
end of the country, so I'm just about to collapse into bed because I'm so
tired now! So this is just a quick reply to thanks for the response, and
I'll be back to you either tonight (after a cat nap!), or more likely
tomorrow about this time.
But I just wanted to say this about the site you did - wow, those buttons!
I'm impressed that this can be done is CSS! :-) I thought you were talking
about some naff-looking buttons that were nothing like my image rollover
buttons! Just please do me a favour and keep that site online for a good
several days please, as I'd like a chance to go through it and see how it
was all done - I've got some learning to do!
Thanks Richard,
Stephen
| |
| Ben Measures 2004-09-09, 7:22 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:
<!--
<script type="text/javascript">
document.write('<link rel="stylesheet" href="extra.css">');
</script>
-->
Like your script, this validates but may not do what you intended. Hence
the "getting colder".
--
Ben M.
| |
| Andrew D 2004-09-09, 7:23 pm |
| 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.
| |
| Rick Pasotto 2004-09-09, 11:15 pm |
| On Tue, 07 Sep 2004 10:27:23 GMT in alt.html.critique, rf wrote:
>
> <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.
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>.
--
"One's reach must exceed their grasp, or what's a heaven for?"
-- Robert Browning
Rick Pasotto rick@niof.net http://www.niof.net
| |
|
|
"rf" <rf@.invalid> wrote in message
news:1vy%c.23348$D7.6689@news-server.bigpond.net.au...
| steŠ wrote
<snip>
| > > 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! :-)
|
| <img ...>
| <img ...>
|
| bad. The newline is incorrectly treated as white space by certain
browsers.
|
| <img ...>< img
| ...>
|
| good.
Thanks for that Richard - I didn't realise that the line breaks affected the
HTML, and there was me just trying to keep my code neat and tidy! :-)
| 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. Neither of them are optimised at the moment, but they will be
when the site is ready.
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.
<snip>
| > > There is some redundancy:
|
| > 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.
|
| Ah I see. Don't use id. Use class.
|
| <p class="footer footerstyle"> ...
|
| > Is it better to put these all into the same bit then? I'm still getting
| > mixed up with id's and classes,
|
| If in doubt or unless you have a specific reason use class. Id means other
| things as well as being able to be selected easily by a style rule. Class
| was designed specifically to be selectable by a style rule, and nothing
| else. It also does a better job than id can (class="footer footerstyle")
Thanks for the overview of this, I'll go through my style-sheets and try and
tidy them up. Having already skipped below to your sample website, it's
quite scary to see that there's only a handful of CSS elements in your
website, yet mine has loads! Obviously I'm not doing things as efficiently
as I could be...
| > > Why are you serving up your pages as .shtml? I see nothing that needs
a
| > > secure connection here.
|
| My bad here. I was thinking of secure connections at the [late] time which
| is of course HTTPS://..., not ...shtml :-)
It's okay, you're forgiven I suppose! ;-)
<snip>
| > > 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.
|
| Don't be a lemming :-)
Hey, I'd only be a lemming if I removed my 'stylish' scroll-bar colours just
because you told me to! ;-)
| Just about all of the sites out there specify font size in pixels and a
very
| small number of them. That is not correct either.
Maybe I'm half a lemming then! :-)
| > I guess this is a 50/50 personal preference thing, some people like it,
| some
| > people don't.
|
| Can you cite some studies? Some people here can. It has been demonstrated
| that if the scroll bars are unnaturally coloured then people fail to
| register them as part of the UA and therefore fail to be able to use them.
|
| What if we suddenly decided to colour traffic lights green/yellow/cyan.
| Nobody would ever stop at a set of traffic lights again :-)
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. I don't have any case
study examples though, as I was just 'guessing' it was a 50/50 personal
preference thing! :-)
| > I did notice that these bits of css didn't validate
| > either...
|
| Of course not. It's a microsoft invention.
I'll do you a deal, when the site is all ready and working in most browsers,
I'll review this again! :-)
| > > 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.
|
| Once again people have mentioned studies here where a viewer has the
browser
| maximized and a new window opens, invisibly as far as the viewer is
| concerned. Suddenly the back button is broken. The viewer assumes the site
| is broken, types in google.com and proceeds to search elsewhere. Only when
| they close *their* browser do they find your site still underneath.
| Muttering darkly: "where did that bloody come from" they close the browser
| down and go off down to the pub.
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. But I want this html page to be styled properly to fit into
the rest of my website, together with a 'back' button so they don't lose
their place in the galleries or wherever - so I'm just trying to figure out
the best way to create a stand photo page that takes the least time to set
up. I'll probably use SSI's to create standard headers and footers for
these pages, but any other advice on efficient ways of adding lots of images
to a website would be appreciated!
| > > 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.
|
| If *you* think the text is cooler a little bit smaller then change *your*
| settings on *your* browser. Don't attemp to change *my* settings, you just
| annoy me when I have to change my settings *up* to compensate for your
| settings and to put the text back to what *I* like.
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. I feel
as though this line is drawn between resizable fonts (for the user), and the
default fonts sized by the designer. After all, if we keep thinking about
these damn users, we'll all be creating plain text websites and letting
users use their own style-sheets, and every website will look the same! :-)
| > I used to specify fonts using points, so I thought I
| > was doing negotiating really well by keeping them as percentages. :-)
|
| You are doing extrordinarily well by specifying %. Just use 100 of them
| (except for your "supposed to be unreadable" copyright notice) which you
may
| drop to 90 or so.
|
| Note, when we talk about this here a flame war usually erupts with every
| wanabe web dresigner chirping in about *control* and *force the viewer*
and
| other such nonsense. 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! ;-) ;-)
| > > 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.
|
| 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.
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. Usually, I wouldn't
upload images more than about 650 pixels wide, but the image on the splash
page is about 920 pixels wide, and could probably do with being a bit larger
if I wanted to cover 1600 x 1200 resolutions, for example (but I'll leave
this for now).
| The "below" bit.
|
| I stole your stuff and had a quick play. The home page.
Thanks for taking the time to do this, you're too kind! ;-)
| 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! :-)
| This is really very close to what you want. A tiny bit of CSS will fix up
| things:
|
| http://users.bigpond.net.au/rf/ste/index2.html
|
| Ok, it's not exactly that tiny but this will be used of course on every
| other page of the site.
Wow Richard, my very own CSS buttons! :-) I saw this yesterday and was
half-expecting some naff CSS buttons, so imaging my pleasant suprise to see
them looking just like my image buttons. But wait a minute, where's that
stylish black line gone from between my image and blurred bottom image? :-)
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. 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.
I'll get back to you in the next few days with a revised website or more
questions! :-) 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 so might just do this manually each week.
| --
| Cheers
| Richard.
Thanks,
Stephen
| |
|
|
"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
| |
|
| 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.
| |
|
| 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-10, 12:17 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">
> <!--
> 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.
| |
| Chris Beall 2004-09-11, 4:17 am |
| 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)
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.
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.
Chris Beall
| |
| Rick Pasotto 2004-09-11, 4:17 am |
| 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
| |
|
| steŠ wrote
>
> "rf" <rf@.invalid> wrote in message
> news:f2g%c.22452$D7.14731@news-server.bigpond.net.au...
>
>
> 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! :-)
<img ...>
<img ...>
bad. The newline is incorrectly treated as white space by certain browsers.
<img ...>< img
....>
good.
Alternatively, in this case, why not just one image.
are[color=darkred]
> *all*
> faster
> javascript.
>
> 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?
See below.
[color=darkred]
> 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.
Ah I see. Don't use id. Use class.
<p class="footer footerstyle"> ...
> Is it better to put these all into the same bit then? I'm still getting
> mixed up with id's and classes,
If in doubt or unless you have a specific reason use class. Id means other
things as well as being able to be selected easily by a style rule. Class
was designed specifically to be selectable by a style rule, and nothing
else. It also does a better job than id can (class="footer footerstyle")
My bad here. I was thinking of secure connections at the [late] time which
is of course HTTPS://..., not ...shtml :-)
[color=darkred]
position[color=darkred]
>
> 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.
They do anyway. Position relative is only used if you want to move an
element away from where it would normally be, for example to achieve a
superscript or something.
> I didn't want to use position absolute
> because that wouldn't have worked with my attempt to make a fully fluid
> website,
Wise choice. So many absolutely positioned sites fall apart when the font
size is changed.
> as I wouldn't have known where things would appear absolutely at
> different resolutions. ...or maybe I'm just not understanding this
> properly?
It's not too bad however simply omit position completely. The browser by
default flows elements after each other.
> HTML
>
> 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.
See below.
nice[color=darkred]
>
> 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.
Don't be a lemming :-)
Just about all of the sites out there specify font size in pixels and a very
small number of them. That is not correct either.
> I guess this is a 50/50 personal preference thing, some people like it,
some
> people don't.
Can you cite some studies? Some people here can. It has been demonstrated
that if the scroll bars are unnaturally coloured then people fail to
register them as part of the UA and therefore fail to be able to use them.
What if we suddenly decided to colour traffic lights green/yellow/cyan.
Nobody would ever stop at a set of traffic lights again :-)
> I did notice that these bits of css didn't validate
> either...
Of course not. It's a microsoft invention.
> error
> do
>
> I take your point about this, but I'd say it's another 50/50 personal
> preference thing.
Once again people have mentioned studies here where a viewer has the browser
maximized and a new window opens, invisibly as far as the viewer is
concerned. Suddenly the back button is broken. The viewer assumes the site
is broken, types in google.com and proceeds to search elsewhere. Only when
they close *their* browser do they find your site still underneath.
Muttering darkly: "where did that bloody come from" they close the browser
down and go off down to the pub.
> size
>
> I did this because I just thought it looked a bit cooler than a larger
font,
> so just a style thing.
If *you* think the text is cooler a little bit smaller then change *your*
settings on *your* browser. Don't attemp to change *my* settings, you just
annoy me when I have to change my settings *up* to compensate for your
settings and to put the text back to what *I* like.
> I used to specify fonts using points, so I thought I
> was doing negotiating really well by keeping them as percentages. :-)
You are doing extrordinarily well by specifying %. Just use 100 of them
(except for your "supposed to be unreadable" copyright notice) which you may
drop to 90 or so.
Note, when we talk about this here a flame war usually erupts with every
wanabe web dresigner chirping in about *control* and *force the viewer* and
other such nonsense. 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.
>
> 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.
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.
The "below" bit.
I stole your stuff and had a quick play. The home page.
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
This is really very close to what you want. A tiny bit of CSS will fix up
things:
http://users.bigpond.net.au/rf/ste/index2.html
Ok, it's not exactly that tiny but this will be used of course on every
other page of the site.
--
Cheers
Richard.
| |
|
|
| Rick Pasotto 2004-09-11, 12:17 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-11, 11:16 pm |
| On Tue, 07 Sep 2004 22:57:27 -0400 in alt.html.critique, Neal wrote:
> On Tue, 7 Sep 2004 20:14:19 -0400, Rick Pasotto
> <rickpasotto@chi.news.speakeasy.net> wrote:
>
>
> Welcome to Usenet.
Fool.
I've been dealing with usenet since long before the internet existed.
Your attitude serves merely to perpetuate and compound the incivility.
--
"Reason often makes mistakes, but conscience never does."
-- Josh Billings, columnist and humorist (1818-1885)
Rick Pasotto rick@niof.net http://www.niof.net
| |
|
| Ben Measures wrote
[color=darkred]
> kchayka wrote:
this[color=darkred]
Ahem. I refer you to the second post in this thread wherein *I* wrote that
:-)
--
Cheers
Richard.
| |
| Ben Measures 2004-09-11, 11:16 pm |
| rf wrote:
> Ben Measures wrote
>
>
> Ahem. I refer you to the second post in this thread wherein *I* wrote that
> :-)
Oops, my apologies. For some reason I got you two mixed up, now noted. ;)
--
Ben M.
| |
| Ben Measures 2004-09-11, 11:16 pm |
| Ben Measures wrote:[color=darkred]
>
> kchayka wrote:
>
Ooops, wrong attribution - that should be "rf wrote:".
Redirect all your apologies that way ;)
--
Ben M.
| |
|
|
"rf" <rf@.invalid> wrote in message
news:1vy%c.23348$D7.6689@news-server.bigpond.net.au...
<snip>
| The "below" bit.
|
| I stole your stuff and had a quick play. The home page.
|
| 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
|
| This is really very close to what you want. A tiny bit of CSS will fix up
| things:
|
| http://users.bigpond.net.au/rf/ste/index2.html
|
| Ok, it's not exactly that tiny but this will be used of course on every
| other page of the site.
|
| --
| Cheers
| Richard.
Hi Richard,
I've been up since 5am after an early start for a work meeting at the other
end of the country, so I'm just about to collapse into bed because I'm so
tired now! So this is just a quick reply to thanks for the response, and
I'll be back to you either tonight (after a cat nap!), or more likely
tomorrow about this time.
But I just wanted to say this about the site you did - wow, those buttons!
I'm impressed that this can be done is CSS! :-) I thought you were talking
about some naff-looking buttons that were nothing like my image rollover
buttons! Just please do me a favour and keep that site online for a good
several days please, as I'd like a chance to go through it and see how it
was all done - I've got some learning to do!
Thanks Richard,
Stephen
| |
| Rick Pasotto 2004-09-12, 4:16 am |
| Reply-To: rick at niof dot net
Message-ID: <slrncjtkg9.u1s.rickpasotto@tc.niof.net>
User-Agent: slrn/0.9.8.0 (Linux)
Date: Wed, 8 Sep 2004 05:34:01 -0400
Lines: 30
NNTP-Posting-Host: 66.93.248.169
X-Trace: sv3-TwIIgJOgqF7Mym0WoBHxk3o7M//KkJ5VDemWrpYa5q4pMSJlZuDwNJK7M60TOIfq2a/jI9+MaSLi82z!SHW2kaeHhLuyPIWjw/5XPRi/k9fJpmQADkwkxESTzlFM4duyaveFaIAc3hbTwOKai4Cs8eHDHLaq!yxAkKHYX6Ma5u/OvhkNft76eZT0=
X-Complaints-To: abuse@speakeasy.net
X-DMCA-Complaints-To: abuse@speakeasy.net
X-Abuse-and-DMCA-Info: Please be sure to forward a copy of ALL headers
X-Abuse-and-DMCA-Info: Otherwise we will be unable to process your complaint properly
X-Postfilter: 1.3.13
Xref: newsfeed-west.nntpserver.com alt.html.critique:52869
On Wed, 08 Sep 2004 02:39:50 GMT in alt.html.critique, Ben Measures
wrote:
> Rick Pasotto wrote:
>
> You erroneously corrected him, what you said was not the truth.
You are wrong.
What statement did I make that you believe to be in error? Post the
article ID, quote the statement, and explain *why* it was wrong.
Learn to deal with *facts* instead of unsubstantiated assertions.
--
"Knowing others is intelligence; knowing yourself is true wisdom.
Mastering others is strength, mastering yourself is true power."
-- Lao-Tzu, philosopher (6th century B.C.)
Rick Pasotto rick@niof.net http://www.niof.net
| |
| Ben Measures 2004-09-12, 7:15 am |
| Rick Pasotto wrote:
> Ben Measures wrote:
>
> What statement did I make that you believe to be in error? Post the
> article ID, quote the statement, and explain *why* it was wrong.
kchayka wrote:
> <!-- 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.
Rick Pasotto wrote:
> I'm not so sure of that.
True.
> This does not validate:
>
> <script type="text/javascript">
> document.write('<link rel="stylesheet" href="extra.css">');
> </script>
True.
> This *does* validate:
>
> <script type="text/javascript">
> <!--
> document.write('<link rel="stylesheet" href="extra.css">');
> -->
> </script>
Getting colder. The result of the script execution will not validate (as
XHTML). Then again, the script may not even execute
http://www.w3.org/TR/xhtml1/#C_4 .
> What you refer to as 'cargo cult' is actually quite useful *today*.
Wrong. Brought about because your supporting code was not correct for
XHTML and not correct for the OP's doctype.
The reason for using HTML comments in script tags is exactly as kchayka
described.
http://www.w3.org/TR/html4/types.html#h-6.14
> Script data ( %Script; in the DTD) can be the content of the SCRIPT
> element and the value of intrinsic event attributes. User agents must
> not evaluate script data as HTML markup but instead must pass it on as
> data to a script engine.
http://www.w3.org/TR/html4/interact/scripts.html#h-18.3
> User agents that don't recognize the SCRIPT element will likely render
> that element's contents as text. Some scripting engines allow the script
> statements to be enclosed in an SGML comment. User agents that don't
> recognize the SCRIPT element will thus ignore the comment while smart
> scripting engines will understand that the script in comments should be
> executed.
Thus /all/ conforming browsers will not render script contents. AFAIK
the only browsers that do this are pre-NN2.
So kchayka was right and you were wrong. Be a man and apologise for
spreading muck on kchayka's truth.
--
Ben M.
| |
| Andrew D 2004-09-12, 12:17 pm |
| In article <4140fa95$0$22754$db0fefd9@news.zen.co.uk>, "steŠ"
<ContactMeUsingTheContactForm@sm9.co.uk> wrote:
> "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.
Since you're selling photography, I'd be concerned about uncontrollably
distorted images. I found the "squishing" somewhat weird in Mozilla
Firefox too. The problem here (for you) is that if I load the page into an
already tall, skinny browser window - and if I don't play with the window
- then I'd just assume you think tall, skinny, squished landscapes look
cool - and that might lead me to question your validity as a photographer
which would be a shame because in reality the images look great.
I had a play with rf's redesign of your page (I know less about css than
you apparently do by the way) to see what happened when I changed numbers.
I found that if I took the "height" parameter off the *image* (in the
html), it shrunk and grew in proportion as the browser window changed.
Whether this is a solution or not is for you to decide or others to advise
though :)
--
Andy D.
http://members.westnet.com.au/andydolphin/
Fine art gallery - online, Western Australia
Landscapes, seascapes and still life paintings in oils.
| |
|
| steŠ wrote:
Your handle is copyright?
> Hi there,
Er, G'day.
http://tinyurl.com/4focd
Don't provide a tinyurl. Provide the real one. Those tiny things expire and
make the archive useless.
Nice look :-)
Is there supposed to be a black line through the splash picture?
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.
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.
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.
Why are you serving up your pages as .shtml? I see nothing that needs a
secure connection here.
The CSS:
Why is *everything* positioned relative? Do you know exactly what position
relative means? If not then you should not be using it.
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.
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.
The gallery:
The grey on black navigation bar is almost impossible to read
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.
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.
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.
The fluid width is a big plus :-)
--
Cheers
Richard.
| |
| Steve R. 2004-09-12, 12:17 pm |
| steŠ wrote in message ...
> Thanks for any help or advice, it's appreciated.
A photographer who doesn't know how to use 'Photoshop' D'oh.
Thumbnails at 12K which should be no more than 2K maximum.
No wonder the galleries take so long to load on dial-up lines. (More than
60% of all users)
| |
| kchayka 2004-09-12, 7:16 pm |
| Rick Pasotto wrote:
>
> 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).
<sigh>
When someone tries to spread dung as truth, it is the responsibility of
those with more knowledge or experience to enlighten the uninformed (or
misinformed). Sorry if I offended you. Next time, you should put on your
flame-proof, teflon suit before posting.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
| Rick Pasotto 2004-09-12, 7:16 pm |
| On Tue, 07 Sep 2004 10:27:23 GMT in alt.html.critique, rf wrote:
>
> <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.
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>.
--
"One's reach must exceed their grasp, or what's a heaven for?"
-- Robert Browning
Rick Pasotto rick@niof.net http://www.niof.net
| |
|
|
"Steve R." <stevie_ritchieNOSPAM@hotmail.com> wrote in message
news:LMg%c.2179$_z3.23004362@news-text.cableinet.net...
> steŠ wrote in message ...
>
> A photographer who doesn't know how to use 'Photoshop' D'oh.
Is that an introduction of yourself as you begin your critique, or did you
miss the word "draft" in the subject line, or did you miss this paragraph:
"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."
Don't get me wrong, you've got a valid point, but as this is version 0.1 of
my website, if you like, I'm not too worried about this type of thing just
yet. But don't worry, I'll be back when the site is 'ready' for a final
critique! ;-)
> Thumbnails at 12K which should be no more than 2K maximum.
It's a "draft" site, and before I waste my time finishing and perfecting it,
I'm trying to see what I've done wrong with the design and coding, and how I
can improve it. I'm trying to get the foundation built properly so I can
then build everything onto the top of it.
> No wonder the galleries take so long to load on dial-up lines. (More than
> 60% of all users)
"Draft!" :-P
So then Steve, where are the rest of your comments? I'm waiting! ;-)
Thanks,
Stephen
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|