Your site looked nice until I looked at it in NS4.7, why did I check it in NS4.7? because it states on the page its XHTML strict and bobby approved, its not, doc tag is transitional, css and html has erros and major ones at bobby.
your site is viewed in a text based styled browser by most people with disablities, so NS4.7 is more than what some use. some screen readers can't read CSS (your not using tables so wont mention that part of it) turn CSS off and try view the page.
[rant over]
Opera6 (as opera6) has a couple of issues with your style sheets, mainly the backgrounds on the top left links (news, health, food, fitness) and the middle box sections (they are black in opera). The change font size doesnt work in Opera either.
and the top left and middle section dont line up in IE5. on using the back button the left section shrinks leaving a big gap. fixing the html and css errors should fix that.
I'm a little confused on whats the sites about, at first I thought it was for women in general, but after looking around it seems to be about one woman. maybe an about her or about the site section/page would help
Seems she lives an exciting life - I had one of those once
The Webmistress posted this at 08:01 — 27th November 2002.
I'm only looking at this in IE6 and I did actually look through the site when you first joined up and thought then it was a nice site but confusing at first. The general layout is fine and gives a very fresh, clean look but IMO the first page is far too long with the centre section scrolling on for ages past the rest. Maybe split the page up a bit with the first page being more of explaination of what the site is about, or more about Katherine. Once you click on a link again I find it somewhat confusing as you don't really know where you are or where to go next and I would suggest a 'back to top' link on the bottom of the pages as otherwise there is a lot of scrolling to do!
A well written site and it has a lot of good quality pictures and a clean design but I would do something stronger & bolder with the logo.
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
I definitely agree about the logo. It seems sort of lost up there with all the other things that are going on here. There are a lot of colours and a lot of text.
I think that you should start by re-organizing things. Give those lower sections on the front page on their own separate pages. Make sure there's a way to visiually differentiate internal and external links. With all of them on the same menu it's sometimes hard to know what to expect. It might even be better just to create a separate page for links. I also feel like the right side of the page, with the large photo and text, looks completely cut off from the rest of the design.
Overall I think that this could use some simplification. There seems to be too much going on, and a bit of ambiguity in terms of what to focus on. The other pages are a lot better.
Peter, if you're going to take code from my sites, have the decency to edit the damn stuff, would you? It's one thing to learn from someone else's code, but it's horribly unethical to just take it and misrepresent your skills with it.
Thanks for the comments so far, I'm looking over the site and keeping in mind what all of you have said.
Suzanne: as far as I can recall, the only code I've used from your site is the half-dozen links to the W3 validators. When I added that code, I started cleaning up the code on the rest of the page according to what the validators reported. Agreed that I should have gone on to reworked the links to be more in line with how my site files are organized. That sub-section of the left column has been re-worked and should be up momentarily. Sorry about that.
Busy: The site-checking links were not current, the results you saw were for an earlier version. On another forum I had a discussion about tables and CSS and was encouraged to leave tables behind. This does make things less pretty for those with really old browsers.
To correct Opera's inability to handle colored borders, I would need to use nested tables - an ugly hack. The font-size code will soon check and see if the browser is Opera, and not display that control. However, if you've set Opera to say that it's not Opera...
The left and center columns should now line up at the top in all browsers. It seemed that combining a DIV that had a graphic in the top corner along with P caused things to draw strangely sometimes.
Still can't figure out how to get the rounded-corner graphic to draw the first time a page comes up in Opera.
I agree that some sort of intro would help. I'll suggest something to Katherine.
The Webmistress: I've had the page length in the back of my mind for a while now, and it became more of a problem when I added a bunch of new News items. The Health/Fitness/Food sections were setups I originally worded to suggest possible articles, etc. These have been put on hold for the moment. There is a 'top' link at the start of each major section, it's a small blue arrow to the left of the title.
Thanks for your kind comments on the writing (I'll pass that on to Katherine), photos and design. Back to the drawing board for the logo!
Megan: I'll give some thought about internal vs external links.
P.S. main page broken in two, just under 3 screens at 1024x768 res. The left column sections that contain external sites have a multi-window icon to give you a 'heads up'. I might eventually remove the collapse button entirely, but it was just so cool when I put it in!
Don't worry about Opera 6 - Opera 7 is in Beta now and the site looks much better. No border around the content boxes there in the middle, but no black border either. Not a big deal IMO.
It does look better in Opera 7, but the missing border bugs me. I've recoded the page and CSS to display the colored border in any brower that supports CSS.
Quote: Originally posted by pmj7 Busy: The site-checking links were not current, the results you saw were for an earlier version.
Sorry, the links are valid, your code isn't valid. The CSS one may be wrong but the XHTML one is a refer link (no url included) so it sees whats there now. I looked at your code and don't need to validate it, I know it wont validate to XHTML Strict like you say it is, plus the fact your using transitional tags wouldn't help, not that it validates to that either.
see what happens when you steal peoples code and not know what its for
Looks better with the page not as long, but the second page is different to the first, can you not keep the same flow going?
I also noticed your using atomz search, they don't like left navigation set ups as they pick up the links before the content.
I did a search for "today" (minus quotes) and got no results, even thou I can see the word today on the first page (just under the weather thing).
Quote: I've recoded the page and CSS to display the colored border in any brower that supports CSS.
Quote: Your site looked nice until I looked at it in NS4.7, why did I check it in NS4.7? because it states on the page its XHTML strict and bobby approved, its not, doc tag is transitional, css and html has erros and major ones at bobby.
Where on my page do I say that it's strict and bobby approved? At one time there was a small icon saying that the CSS was checked (bottom right of page), and aside from a single warning, at the time it was. There is a Site Check section with some links to a few checkers, mainly to help me work on the site. It's a tool list, not a certification. You may have leaped to the conclusion that this implies that it's 100% certified, but I am aware that it's not. To avoid others from drawing the same conclusion, rest assured that each link now has an internal title of "Not yet certified". It wasn't my original intention to leave those links in permanently, but I may change my mind.
Quote: see what happens when you steal peoples code and not know what its for
This thread certainly seems to get a lot of mileage out of a half-dozen links to site-checking services.
I freely admit that this site is a work in progress. Lots of experimenting and learning is going on. It's also my first site that doesn't have extensive use of tables, and the first that uses a fair amount of CSS. I certainly have lots of opportunity for errors, as I use NotePad as my editor. Naturally I should get and work with something a little more helpful! The site currently has mistakes that I plan to fix, but the most important thing was to get it running reasonably well and get some content.
The second 'main page' is different because it doesn't have the list of external sites, and more importantly, it doesn't have the diary going down the right side. Since the diary will always fill a given page beyond capacity, it has to go elsewhere. To me, it seems awkward to have the diary flow from the main page to the next and then into the archive. Also, having it look too similar to the first 'main page' could confuse visitors. If most people feel that the diary should go down the right side, then I'll be happy to reconsider it.
I think the Atomz search service performs a scan of a given site weeklly, or on demand. "Today" has probably been added since the last site scan.
Does anyone know how to prevent Explorer from drawing the background blue overtop of some of the center column when scolling? Sometimes it happens, sometimes it doesn't. This does not happen in Opera, or Netscape (that I've noticed).
Quote: Originally posted by pmj7 Where on my page do I say that it's strict and bobby approved? At one time there was a small icon saying that the CSS was checked (bottom right of page), and aside from a single warning, at the time it was. There is a Site Check section with some links to a few checkers, mainly to help me work on the site. It's a tool list, not a certification. You may have leaped to the conclusion that this implies that it's 100% certified, but I am aware that it's not. To avoid others from drawing the same conclusion, rest assured that each link now has an internal title of "Not yet certified". It wasn't my original intention to leave those links in permanently, but I may change my mind.
At the bottom left of this is site is a sub heading "check site" under that you had XHTML 1.0 Strict (now change to trans), under that you have the "check css" and under that you have "Accessibility Check" with a link to "http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F% 2Fwww.supernaturalwoman.com% 2Findex.html&output=Submit&gl=wcag1-aaa" and now you have a title tag on the links saying "not yet certified" a bit like small print. and the last link "css file" isn't even on your server. Also before I brought this to your attention you had different titles on those links, things like "see easy peezy" or similar on the xhtml strict one. You state it's to "help you test" your site, if it was then you wouldn't have the css file on the css link would you, you have 5 style sheets, to be 100% valid all 5 have to validate. And you've said you've checked it in Opera, so just right click on the page and choose validate (on or offline) and remember this
Quote: Originally posted by pmj7 Suzanne: as far as I can recall, the only code I've used from your site is the half-dozen links to the W3 validators.
So if you took those links from her site, you changed the url's but didnt change the language (strict to trans) or test it, or comment it out like you have so much other content in there.
The only reason I brought this to your attention was because it was stated on the site it was valid and had good accessibility, To be honest I don't give two hoots about the valid bit but I do about the accessibility bit, disabled people look out for links and keywords like this so they can view the sites, your just offering false hopes
.
You code with notepad, so do many people, notepad is a good little program, can't blame that, update to editpad, free text editor with search and replace, undo's etc.
You've done a good job with the css layout, fix the errors and should be good layout (could be done with tables) here is one fix for you, up top when you import a style sheet use the url() bit, like so: @import url(filename.css);
You are correct about the 'title' being equivalent to fine print. To me a link title of 'XTHML Strict' is ambiguous (especially under a title of Site Check), 'XHTML Strict Certified', or using the service's small icon (with checkmark) is not. 'Accessibility Check' doesn't seem certain to me that it's valid, whereas 'Accessibility Certified' makes it clearer.
While the site is functional, it does not look as nice under Netscape 4.7. For those visitors the top of the page links to AListApart's explanation of why. Changes described below improve the experience.
Changes:
CSS files - all 5 displayed in Check Site section
Link to css on old server - (yes it was there to help me check out the site, the previous host updated files sluggishly) removed
XTHML trans - certified
nucss2 - certified
small - certified
big2 - certified
print - font size/spacing further adjusted, controls hidden, certified
Bobby - of the automated tests, 2 remaining issues (HTML lang="en", and links with just whitespace between them - not sure what to do about the left nav bar)
Left nav bar - now defined last in code so olders browsers and Atomz see content before links
@import url(nucss2.css); - changed
Notepad - replaced with NoteTab Light
Thanks Suzanne, the article is great! I was considering CSS to take out the list bullets, but nothing quite so fancy as this! Hmmm...
Bobby specifically asks for (html lang="en"), and I had that for a while until it caused other validation problems. Put onto the 'Later' pile for the moment.
The Webmistress: Better? Not "A shining example of how web pages should look!"? Oh well...
I commented out some code that my web host had stuck into the file when it was first put up - not sure what it did. Taking a closer look, it may be something to get around the Netscape - resize - redraw bug. I'll check into it later.
How can you set the width of a nested DIV to the fill width of the parent DIV? width: 100%; doesn't cut it.
How can you set the width of a nested DIV to the fill width of the parent DIV? width: 100%; doesn't cut it.
Nested div's are limited to the content width in some browsers, one way is to add a border to the nested div, border solid 1px and same background color of the parent div (so it's not seen), doesnt work on all of them (browsers) thou, another way is a fixed width nested div, not always workable. another way is if the parent div has a class attached (for shape and size) use similar or same in nested div.
People think HTML was bad with combatibilty issues, CSS can be worse, but there are more work around with CSS, including using tables
And thanks to Suzanne pointing out the AListApart article, I've redone the navigation for the site. Things don't validate perfectly at present, but they should within the next day or so.
I've been thinking about that as well. I like both.
For those who are interested, you can try both with the Skin: Old New control in the left column. It doesn't look exactly how it used to look, but it's close. The old navigation had to change anyway because the colorful sub-sections (health, fitness...) were a hint that they were all on that page. The new navigation probably could use some spacing between sections. In any case, it will be a lot easier to change, not that it's a collection of headers and unordered lists. I need to work out a plan for the orphan pages - Jigsaw, Lunar Phase, Health, etc, that don't easily fit under any of the main headings - like Words.
Each sub-page now has a link for validation as well. At the moment this is implemented by some javascript in a shared file so I can change it or remove it easily. Maybe it should even be in fine print!
I've corrected a flaw in the Taming Lists feature article of AListApart. Under my version of Netscape 7, there was a dividing line only between every other link. I've flipped the line (border) from the bottom to the top and now it works in Explorer/Netscape/Opera equally well. It looks better, and even smells better too!
I've also changed the link hover behavior from a solid background color to a 3-d style graphic. Graphic button rollovers and no JavaScript - cool! I've made small cleanups throughout the site.
Still haven't found a way to take care of the band of blue that spans the bottom of the screen when you first load the Health page. It's caused by a left-aligned img enclosed in a div. Dead tricky stuff. I thought I had a solution when I enclosed the content section in a table (don't tell anyone!), but found that the table width had to be set to different things depending on the browser.
P.S. Think I've resolved things. I looks like if you have too many nested divs then Explorer gets confused. Replaced a few with spans (it doesn't quite look as I'd like, but close enough) and things seem to display fine now.
Pretty good. The general design is nice and I like the user customization with the text size and language (not that I feel it was actually necessary) but the number one thing I find at first glance is clutter. Like I said, I think the design is nice in style and theme, but there's too much content on one page. There's no intuitive eye-flow to it so I'm likely to skip over a lot. I'd consider cutting the number of "news stories" in the center column by half with an archive link at the bottom. On the right column I'd remove the weather applet (which wasn't working for me anyway) and the lunar graphic so that it flows from the photo in the top right corner straight down to the diary. You have a separate Lunar Phase page in your navigation anyway. Considering that the diary entires are fairly good size each, I'd go with only the most recent entry and keep the archive link at the bottom.
You've got a lot of good content but I just think it's too much for one page. Let people click to see more of a particular type of content.
Oh, one other thing. It seems as though in the navigational menu along the left side, only the first section is within your site with the rest being links to other sites. I'd make a separate links page so your visitors don't get confused. Plus it'll help them not immediately go off to another site and leave yours too soon. If not, at least tell people that they're links ("Food Links", "Health Links")
I agree with most of what you've said. You gave a very helpful, constructive review.
Changes:
One more toy in the toolchest - hide menu. This is for people with very small screens running Explorer. It will use the navigation space to widen the center column on the Home page.
The weather and lunar calendar images have been moved to the lunar phase page. Fight the clutter!!
The navigation menu now has a graphic background.
Some of the initial thumbnails in the contact area have been reduced in size to make things look better.
The news articles no longer have a coloured border, they are separated by a coloured line. The coloured line is replaced with a standard HR in older browsers and when printing.
Printing is a little better now, no navigation menu as before, and fewer interactive controls show (hopefully none). Sophisticated browsers will show the actual URL address for links when printing - thanks ALA!
When printing, the large title graphic is replaced by a standard header with plain text, ditto old browsers.
I'm not sure the graphic behind the navigation is working that well, looks ok when you have at least 8 chunks of it but anything less and it looks odd IMO
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
I've done a bit of work tightening up the site with my screen set at 800x600 mode. A few surprises, but nothing too bad. It works quite well at 800x600 now. 640x480 better use Explorer and the 'hide menu' to read the first page, though!
Is there a CSS setting to set the minimum width of a resizeable column?
Yes, but it only works in Mozilla (I think...) min-width: 222px; (or whatever) or you can set a max-width. It might work in Opera, you'd have to test that.
What if I dropped a table in my div, say 222 pixels wide? If I'm going to use tables, I might as well abuse them!
Seriously, from what I've seen, content that is wider than the div just sticks out. Yuk.
Also, one unfortunate thing about left and right align for images is that there will always be at least one word on each text line beside the image. Not a problem usually, but if there isn't room it looks a bit strange.
I think it's actually a flaw in the Explorer layout engine. It would rather display a complete word, regardless of it's length, even if there's only space for a few characters. Expanding the margin won't help.
I've made changes to make things look a bit better, and give the visitor feedback when they move the mouse around. They include:
- revised 'search & translation controls' area, with graphic 'go' button and hover effects.
- 3-D border with hover around clickable images in main content areas, and touchup galleries
- coloured custom controls in touchup galleries
- reworked Love Leaves page to make poem easier to read
- fourth touchup photo gallery
Looks good in IE 6. I really like the links on the left; they say quality and style. I think the right column is too big and your center column should always be the biggest. (since I view pages at around a 900 x 900 browser width.)
I would also agree in that there is to much going on and you don't get the attention of the visitor immediately. I believe site design should complement what the site is focused on and you should know what the site / page you go to is about within 5 seconds of being there. Otherwise people will just leave and go somewhere else. You do have the initial paragraph at the top that says..
Quote: SNW is a web site divinely devoted to Health, Happiness and Healing. My goal is to co-create a conscious community.
But, it seems like this is a personal site for Katherine, and thus saying "personal site" or "Katherine's Site" in big, easy to see words at the top of the page would help.
Thanks! The center column is larger than the right column until you are at 800x600 or less. I don't want to make the right column too narrow or the diary text will have too few words per line.
Three new postcards have been added. While you are correct that so far the site is focused on Katherine, there will be content about food, fitness, etc. I thought we'd be there by now, after a month and a half, but since Katherine has been occupied up in Prince George for most of that time...
The new logo is better than the other one but still does nothing for me. It doesn't stand out and IMO does nothing to enchance the site but rather is just there!
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
pfeiffdog posted this at 02:42 — 19th December 2002.
The site looks nice but I think there was a problem with your design. It appeared that there where lines that were going through different sections of the design like it was breaking apart. Maybe it was just my browser or something but you should double check that. Good Luck!
At UcanfindFreelancers.com you will receive custom programming and webdesign at the price you choose to pay. Sign up now for free and post your project. http://www.ucanfindfreelancers.com
- New photo gallery "Halloween Ghost Train"
- Shorter main page (presently about 1 1/2 pages at 1024x768 res) to make it less overwhelming and faster loading
- Links page (lots of new links)
- Sub-page SNW title is now centered
- Sub-pages now have Next link
- A bit more work on how things print out
I want to thank those who have given feedback on this site, with a few exceptions I'm very pleased with how it's turned out so far.
Actually, the color is #666699, so it's a dark blue (the lines are just a touch darker). Given that I want to put white text on top of it, I can't make it too bright.
i like the menu and the girls..
consider making a new header..!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.
Busy posted this at 05:00 — 27th November 2002.
He has: 6,151 posts
Joined: May 2001
Your site looked nice until I looked at it in NS4.7, why did I check it in NS4.7? because it states on the page its XHTML strict and bobby approved, its not, doc tag is transitional, css and html has erros and major ones at bobby.
your site is viewed in a text based styled browser by most people with disablities, so NS4.7 is more than what some use. some screen readers can't read CSS (your not using tables so wont mention that part of it) turn CSS off and try view the page.
[rant over]
Opera6 (as opera6) has a couple of issues with your style sheets, mainly the backgrounds on the top left links (news, health, food, fitness) and the middle box sections (they are black in opera). The change font size doesnt work in Opera either.
and the top left and middle section dont line up in IE5. on using the back button the left section shrinks leaving a big gap. fixing the html and css errors should fix that.
I'm a little confused on whats the sites about, at first I thought it was for women in general, but after looking around it seems to be about one woman. maybe an about her or about the site section/page would help
Seems she lives an exciting life - I had one of those once
The Webmistress posted this at 08:01 — 27th November 2002.
She has: 5,586 posts
Joined: Feb 2001
I'm only looking at this in IE6 and I did actually look through the site when you first joined up and thought then it was a nice site but confusing at first. The general layout is fine and gives a very fresh, clean look but IMO the first page is far too long with the centre section scrolling on for ages past the rest. Maybe split the page up a bit with the first page being more of explaination of what the site is about, or more about Katherine. Once you click on a link again I find it somewhat confusing as you don't really know where you are or where to go next and I would suggest a 'back to top' link on the bottom of the pages as otherwise there is a lot of scrolling to do!
A well written site and it has a lot of good quality pictures and a clean design but I would do something stronger & bolder with the logo.
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
Megan posted this at 14:38 — 27th November 2002.
She has: 11,421 posts
Joined: Jun 1999
I definitely agree about the logo. It seems sort of lost up there with all the other things that are going on here. There are a lot of colours and a lot of text.
I think that you should start by re-organizing things. Give those lower sections on the front page on their own separate pages. Make sure there's a way to visiually differentiate internal and external links. With all of them on the same menu it's sometimes hard to know what to expect. It might even be better just to create a separate page for links. I also feel like the right side of the page, with the large photo and text, looks completely cut off from the rest of the design.
Overall I think that this could use some simplification. There seems to be too much going on, and a bit of ambiguity in terms of what to focus on. The other pages are a lot better.
Megan
Connect with us on Facebook!
Suzanne posted this at 14:51 — 27th November 2002.
She has: 5,507 posts
Joined: Feb 2000
Peter, if you're going to take code from my sites, have the decency to edit the damn stuff, would you? It's one thing to learn from someone else's code, but it's horribly unethical to just take it and misrepresent your skills with it.
pmj7 posted this at 15:23 — 27th November 2002.
He has: 234 posts
Joined: Nov 2002
Hi
Thanks for the comments so far, I'm looking over the site and keeping in mind what all of you have said.
Suzanne: as far as I can recall, the only code I've used from your site is the half-dozen links to the W3 validators. When I added that code, I started cleaning up the code on the rest of the page according to what the validators reported. Agreed that I should have gone on to reworked the links to be more in line with how my site files are organized. That sub-section of the left column has been re-worked and should be up momentarily. Sorry about that.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Suzanne posted this at 15:27 — 27th November 2002.
She has: 5,507 posts
Joined: Feb 2000
It doesn't matter if it's a sentence or a novel, it's unethical.
pmj7 posted this at 17:35 — 27th November 2002.
He has: 234 posts
Joined: Nov 2002
Busy: The site-checking links were not current, the results you saw were for an earlier version. On another forum I had a discussion about tables and CSS and was encouraged to leave tables behind. This does make things less pretty for those with really old browsers.
To correct Opera's inability to handle colored borders, I would need to use nested tables - an ugly hack. The font-size code will soon check and see if the browser is Opera, and not display that control. However, if you've set Opera to say that it's not Opera...
The left and center columns should now line up at the top in all browsers. It seemed that combining a DIV that had a graphic in the top corner along with P caused things to draw strangely sometimes.
Still can't figure out how to get the rounded-corner graphic to draw the first time a page comes up in Opera.
I agree that some sort of intro would help. I'll suggest something to Katherine.
The Webmistress: I've had the page length in the back of my mind for a while now, and it became more of a problem when I added a bunch of new News items. The Health/Fitness/Food sections were setups I originally worded to suggest possible articles, etc. These have been put on hold for the moment. There is a 'top' link at the start of each major section, it's a small blue arrow to the left of the title.
Thanks for your kind comments on the writing (I'll pass that on to Katherine), photos and design. Back to the drawing board for the logo!
Megan: I'll give some thought about internal vs external links.
P.S. main page broken in two, just under 3 screens at 1024x768 res. The left column sections that contain external sites have a multi-window icon to give you a 'heads up'. I might eventually remove the collapse button entirely, but it was just so cool when I put it in!
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Megan posted this at 17:41 — 27th November 2002.
She has: 11,421 posts
Joined: Jun 1999
Don't worry about Opera 6 - Opera 7 is in Beta now and the site looks much better. No border around the content boxes there in the middle, but no black border either. Not a big deal IMO.
Megan
Connect with us on Facebook!
pmj7 posted this at 19:10 — 27th November 2002.
He has: 234 posts
Joined: Nov 2002
It does look better in Opera 7, but the missing border bugs me. I've recoded the page and CSS to display the colored border in any brower that supports CSS.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Busy posted this at 21:23 — 27th November 2002.
He has: 6,151 posts
Joined: May 2001
Sorry, the links are valid, your code isn't valid. The CSS one may be wrong but the XHTML one is a refer link (no url included) so it sees whats there now. I looked at your code and don't need to validate it, I know it wont validate to XHTML Strict like you say it is, plus the fact your using transitional tags wouldn't help, not that it validates to that either.
see what happens when you steal peoples code and not know what its for
Looks better with the page not as long, but the second page is different to the first, can you not keep the same flow going?
I also noticed your using atomz search, they don't like left navigation set ups as they pick up the links before the content.
I did a search for "today" (minus quotes) and got no results, even thou I can see the word today on the first page (just under the weather thing).
NS4.7 supports CSS
pmj7 posted this at 22:21 — 27th November 2002.
He has: 234 posts
Joined: Nov 2002
Where on my page do I say that it's strict and bobby approved? At one time there was a small icon saying that the CSS was checked (bottom right of page), and aside from a single warning, at the time it was. There is a Site Check section with some links to a few checkers, mainly to help me work on the site. It's a tool list, not a certification. You may have leaped to the conclusion that this implies that it's 100% certified, but I am aware that it's not. To avoid others from drawing the same conclusion, rest assured that each link now has an internal title of "Not yet certified". It wasn't my original intention to leave those links in permanently, but I may change my mind.
This thread certainly seems to get a lot of mileage out of a half-dozen links to site-checking services.
I freely admit that this site is a work in progress. Lots of experimenting and learning is going on. It's also my first site that doesn't have extensive use of tables, and the first that uses a fair amount of CSS. I certainly have lots of opportunity for errors, as I use NotePad as my editor. Naturally I should get and work with something a little more helpful! The site currently has mistakes that I plan to fix, but the most important thing was to get it running reasonably well and get some content.
The second 'main page' is different because it doesn't have the list of external sites, and more importantly, it doesn't have the diary going down the right side. Since the diary will always fill a given page beyond capacity, it has to go elsewhere. To me, it seems awkward to have the diary flow from the main page to the next and then into the archive. Also, having it look too similar to the first 'main page' could confuse visitors. If most people feel that the diary should go down the right side, then I'll be happy to reconsider it.
I think the Atomz search service performs a scan of a given site weeklly, or on demand. "Today" has probably been added since the last site scan.
Does anyone know how to prevent Explorer from drawing the background blue overtop of some of the center column when scolling? Sometimes it happens, sometimes it doesn't. This does not happen in Opera, or Netscape (that I've noticed).
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Busy posted this at 06:41 — 28th November 2002.
He has: 6,151 posts
Joined: May 2001
At the bottom left of this is site is a sub heading "check site" under that you had XHTML 1.0 Strict (now change to trans), under that you have the "check css" and under that you have "Accessibility Check" with a link to "http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F% 2Fwww.supernaturalwoman.com% 2Findex.html&output=Submit&gl=wcag1-aaa" and now you have a title tag on the links saying "not yet certified" a bit like small print. and the last link "css file" isn't even on your server. Also before I brought this to your attention you had different titles on those links, things like "see easy peezy" or similar on the xhtml strict one. You state it's to "help you test" your site, if it was then you wouldn't have the css file on the css link would you, you have 5 style sheets, to be 100% valid all 5 have to validate. And you've said you've checked it in Opera, so just right click on the page and choose validate (on or offline) and remember this
So if you took those links from her site, you changed the url's but didnt change the language (strict to trans) or test it, or comment it out like you have so much other content in there.
The only reason I brought this to your attention was because it was stated on the site it was valid and had good accessibility, To be honest I don't give two hoots about the valid bit but I do about the accessibility bit, disabled people look out for links and keywords like this so they can view the sites, your just offering false hopes
.
You code with notepad, so do many people, notepad is a good little program, can't blame that, update to editpad, free text editor with search and replace, undo's etc.
You've done a good job with the css layout, fix the errors and should be good layout (could be done with tables) here is one fix for you, up top when you import a style sheet use the url() bit, like so: @import url(filename.css);
pmj7 posted this at 15:06 — 28th November 2002.
He has: 234 posts
Joined: Nov 2002
Thanks for taking the time to check things over.
You are correct about the 'title' being equivalent to fine print. To me a link title of 'XTHML Strict' is ambiguous (especially under a title of Site Check), 'XHTML Strict Certified', or using the service's small icon (with checkmark) is not. 'Accessibility Check' doesn't seem certain to me that it's valid, whereas 'Accessibility Certified' makes it clearer.
While the site is functional, it does not look as nice under Netscape 4.7. For those visitors the top of the page links to AListApart's explanation of why. Changes described below improve the experience.
Changes:
CSS files - all 5 displayed in Check Site section
Link to css on old server - (yes it was there to help me check out the site, the previous host updated files sluggishly) removed
XTHML trans - certified
nucss2 - certified
small - certified
big2 - certified
print - font size/spacing further adjusted, controls hidden, certified
Bobby - of the automated tests, 2 remaining issues (HTML lang="en", and links with just whitespace between them - not sure what to do about the left nav bar)
Left nav bar - now defined last in code so olders browsers and Atomz see content before links
@import url(nucss2.css); - changed
Notepad - replaced with NoteTab Light
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Suzanne posted this at 15:29 — 28th November 2002.
She has: 5,507 posts
Joined: Feb 2000
Since the links are a list of links, use a list.
See alistapart.com for Taming Lists for more information.
re: lang="en", use the xml:lang="en" as well or instead.
The Webmistress posted this at 16:05 — 28th November 2002.
She has: 5,586 posts
Joined: Feb 2001
Page is better shorter but I now get an error on the page:
Line: 861
Char: 60
Error: 'PrxOMUp' is undefined
Code: 0
pmj7 posted this at 16:44 — 28th November 2002.
He has: 234 posts
Joined: Nov 2002
Thanks Suzanne, the article is great! I was considering CSS to take out the list bullets, but nothing quite so fancy as this! Hmmm...
Bobby specifically asks for (html lang="en"), and I had that for a while until it caused other validation problems. Put onto the 'Later' pile for the moment.
The Webmistress: Better? Not "A shining example of how web pages should look!"? Oh well...
I commented out some code that my web host had stuck into the file when it was first put up - not sure what it did. Taking a closer look, it may be something to get around the Netscape - resize - redraw bug. I'll check into it later.
How can you set the width of a nested DIV to the fill width of the parent DIV? width: 100%; doesn't cut it.
Thanks!
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Busy posted this at 21:10 — 28th November 2002.
He has: 6,151 posts
Joined: May 2001
How can you set the width of a nested DIV to the fill width of the parent DIV? width: 100%; doesn't cut it.
Nested div's are limited to the content width in some browsers, one way is to add a border to the nested div, border solid 1px and same background color of the parent div (so it's not seen), doesnt work on all of them (browsers) thou, another way is a fixed width nested div, not always workable. another way is if the parent div has a class attached (for shape and size) use similar or same in nested div.
People think HTML was bad with combatibilty issues, CSS can be worse, but there are more work around with CSS, including using tables
pmj7 posted this at 00:15 — 29th November 2002.
He has: 234 posts
Joined: Nov 2002
Thanks, I've gone the fixed width route.
And thanks to Suzanne pointing out the AListApart article, I've redone the navigation for the site. Things don't validate perfectly at present, but they should within the next day or so.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
The Webmistress posted this at 08:24 — 29th November 2002.
She has: 5,586 posts
Joined: Feb 2001
I see you've changed the colour on the navigation. I think I preferred the more colourful look of the old version.
pmj7 posted this at 19:27 — 29th November 2002.
He has: 234 posts
Joined: Nov 2002
I've been thinking about that as well. I like both.
For those who are interested, you can try both with the Skin: Old New control in the left column. It doesn't look exactly how it used to look, but it's close. The old navigation had to change anyway because the colorful sub-sections (health, fitness...) were a hint that they were all on that page. The new navigation probably could use some spacing between sections. In any case, it will be a lot easier to change, not that it's a collection of headers and unordered lists. I need to work out a plan for the orphan pages - Jigsaw, Lunar Phase, Health, etc, that don't easily fit under any of the main headings - like Words.
I like how simple the navigation code looks:
(h4>Food
(ul>
(li>(a href="http://www.rawfamily.com" target="_blank">Raw Family(/a>(/li>
(li>(a href="http://www.greenspluscanada.com" target="_blank">Sam Graci(/a>(/li>
(/ul>
Each sub-page now has a link for validation as well. At the moment this is implemented by some javascript in a shared file so I can change it or remove it easily. Maybe it should even be in fine print!
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
pmj7 posted this at 17:23 — 30th November 2002.
He has: 234 posts
Joined: Nov 2002
I've corrected a flaw in the Taming Lists feature article of AListApart. Under my version of Netscape 7, there was a dividing line only between every other link. I've flipped the line (border) from the bottom to the top and now it works in Explorer/Netscape/Opera equally well. It looks better, and even smells better too!
I've also changed the link hover behavior from a solid background color to a 3-d style graphic. Graphic button rollovers and no JavaScript - cool! I've made small cleanups throughout the site.
Still haven't found a way to take care of the band of blue that spans the bottom of the screen when you first load the Health page. It's caused by a left-aligned img enclosed in a div. Dead tricky stuff. I thought I had a solution when I enclosed the content section in a table (don't tell anyone!), but found that the table width had to be set to different things depending on the browser.
P.S. Think I've resolved things. I looks like if you have too many nested divs then Explorer gets confused. Replaced a few with spans (it doesn't quite look as I'd like, but close enough) and things seem to display fine now.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
fifeclub posted this at 17:54 — 3rd December 2002.
He has: 688 posts
Joined: Feb 2001
Pretty good. The general design is nice and I like the user customization with the text size and language (not that I feel it was actually necessary) but the number one thing I find at first glance is clutter. Like I said, I think the design is nice in style and theme, but there's too much content on one page. There's no intuitive eye-flow to it so I'm likely to skip over a lot. I'd consider cutting the number of "news stories" in the center column by half with an archive link at the bottom. On the right column I'd remove the weather applet (which wasn't working for me anyway) and the lunar graphic so that it flows from the photo in the top right corner straight down to the diary. You have a separate Lunar Phase page in your navigation anyway. Considering that the diary entires are fairly good size each, I'd go with only the most recent entry and keep the archive link at the bottom.
You've got a lot of good content but I just think it's too much for one page. Let people click to see more of a particular type of content.
Oh, one other thing. It seems as though in the navigational menu along the left side, only the first section is within your site with the rest being links to other sites. I'd make a separate links page so your visitors don't get confused. Plus it'll help them not immediately go off to another site and leave yours too soon. If not, at least tell people that they're links ("Food Links", "Health Links")
pmj7 posted this at 03:46 — 5th December 2002.
He has: 234 posts
Joined: Nov 2002
I agree with most of what you've said. You gave a very helpful, constructive review.
Changes:
One more toy in the toolchest - hide menu. This is for people with very small screens running Explorer. It will use the navigation space to widen the center column on the Home page.
The weather and lunar calendar images have been moved to the lunar phase page. Fight the clutter!!
The navigation menu now has a graphic background.
Some of the initial thumbnails in the contact area have been reduced in size to make things look better.
The news articles no longer have a coloured border, they are separated by a coloured line. The coloured line is replaced with a standard HR in older browsers and when printing.
Printing is a little better now, no navigation menu as before, and fewer interactive controls show (hopefully none). Sophisticated browsers will show the actual URL address for links when printing - thanks ALA!
When printing, the large title graphic is replaced by a standard header with plain text, ditto old browsers.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
The Webmistress posted this at 08:26 — 5th December 2002.
She has: 5,586 posts
Joined: Feb 2001
I'm not sure the graphic behind the navigation is working that well, looks ok when you have at least 8 chunks of it but anything less and it looks odd IMO
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
pmj7 posted this at 04:14 — 6th December 2002.
He has: 234 posts
Joined: Nov 2002
I've done a bit of work tightening up the site with my screen set at 800x600 mode. A few surprises, but nothing too bad. It works quite well at 800x600 now. 640x480 better use Explorer and the 'hide menu' to read the first page, though!
Is there a CSS setting to set the minimum width of a resizeable column?
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Megan posted this at 14:59 — 6th December 2002.
She has: 11,421 posts
Joined: Jun 1999
Yes, but it only works in Mozilla (I think...) min-width: 222px; (or whatever) or you can set a max-width. It might work in Opera, you'd have to test that.
Megan
Connect with us on Facebook!
pmj7 posted this at 20:48 — 7th December 2002.
He has: 234 posts
Joined: Nov 2002
What if I dropped a table in my div, say 222 pixels wide? If I'm going to use tables, I might as well abuse them!
Seriously, from what I've seen, content that is wider than the div just sticks out. Yuk.
Also, one unfortunate thing about left and right align for images is that there will always be at least one word on each text line beside the image. Not a problem usually, but if there isn't room it looks a bit strange.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Busy posted this at 21:38 — 7th December 2002.
He has: 6,151 posts
Joined: May 2001
use margins or padding to keep the image/text seperate
pmj7 posted this at 22:11 — 7th December 2002.
He has: 234 posts
Joined: Nov 2002
I think it's actually a flaw in the Explorer layout engine. It would rather display a complete word, regardless of it's length, even if there's only space for a few characters. Expanding the margin won't help.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
pmj7 posted this at 03:41 — 12th December 2002.
He has: 234 posts
Joined: Nov 2002
I've made changes to make things look a bit better, and give the visitor feedback when they move the mouse around. They include:
- revised 'search & translation controls' area, with graphic 'go' button and hover effects.
- 3-D border with hover around clickable images in main content areas, and touchup galleries
- coloured custom controls in touchup galleries
- reworked Love Leaves page to make poem easier to read
- fourth touchup photo gallery
http://www.supernaturalwoman.com
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
ViZ posted this at 17:59 — 13th December 2002.
They have: 4 posts
Joined: Dec 2002
i dont care much for the logo or the purple stripe background but the rest is nice, i like the log on the right side
pmj7 posted this at 00:08 — 16th December 2002.
He has: 234 posts
Joined: Nov 2002
I agree that the logo should be replaced. I haven't thought up anything better yet.
I've added scans of a few postcards that Katherine sent from Prince George.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
JohnScott777 posted this at 06:12 — 16th December 2002.
They have: 14 posts
Joined: Dec 2002
I like the site look and layout. Nothing is scrunched together. Easy to navigate.
Rebies posted this at 07:24 — 16th December 2002.
They have: 14 posts
Joined: Dec 2002
Looks good in IE 6. I really like the links on the left; they say quality and style. I think the right column is too big and your center column should always be the biggest. (since I view pages at around a 900 x 900 browser width.)
I would also agree in that there is to much going on and you don't get the attention of the visitor immediately. I believe site design should complement what the site is focused on and you should know what the site / page you go to is about within 5 seconds of being there. Otherwise people will just leave and go somewhere else. You do have the initial paragraph at the top that says..
But, it seems like this is a personal site for Katherine, and thus saying "personal site" or "Katherine's Site" in big, easy to see words at the top of the page would help.
pmj7 posted this at 03:22 — 17th December 2002.
He has: 234 posts
Joined: Nov 2002
Thanks! The center column is larger than the right column until you are at 800x600 or less. I don't want to make the right column too narrow or the diary text will have too few words per line.
Three new postcards have been added. While you are correct that so far the site is focused on Katherine, there will be content about food, fitness, etc. I thought we'd be there by now, after a month and a half, but since Katherine has been occupied up in Prince George for most of that time...
How do you like the new Logo?
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
The Webmistress posted this at 08:24 — 17th December 2002.
She has: 5,586 posts
Joined: Feb 2001
The new logo is better than the other one but still does nothing for me. It doesn't stand out and IMO does nothing to enchance the site but rather is just there!
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
pfeiffdog posted this at 02:42 — 19th December 2002.
They have: 25 posts
Joined: Dec 2002
The site looks nice but I think there was a problem with your design. It appeared that there where lines that were going through different sections of the design like it was breaking apart. Maybe it was just my browser or something but you should double check that. Good Luck!
At UcanfindFreelancers.com you will receive custom programming and webdesign at the price you choose to pay. Sign up now for free and post your project. http://www.ucanfindfreelancers.com
pmj7 posted this at 03:07 — 19th December 2002.
He has: 234 posts
Joined: Nov 2002
I'm not quite sure what you are refering to, could you be a bit more specific? Better still, a link to a snapshot with the problem area circled?
Thanks!
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
pmj7 posted this at 17:57 — 23rd December 2002.
He has: 234 posts
Joined: Nov 2002
Season's Greetings!
I've done some work recently on the site:
- New photo gallery "Halloween Ghost Train"
- Shorter main page (presently about 1 1/2 pages at 1024x768 res) to make it less overwhelming and faster loading
- Links page (lots of new links)
- Sub-page SNW title is now centered
- Sub-pages now have Next link
- A bit more work on how things print out
I want to thank those who have given feedback on this site, with a few exceptions I'm very pleased with how it's turned out so far.
Merry Christmas!
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Cymark posted this at 04:35 — 24th December 2002.
They have: 4 posts
Joined: Nov 2002
Really liked the watermarked images behind the menu links.
ShoelessNet posted this at 05:41 — 24th December 2002.
They have: 8 posts
Joined: Dec 2002
The one thing I've never liked is the purple background. It just seems out of place with all the blues you use.
pmj7 posted this at 09:37 — 24th December 2002.
He has: 234 posts
Joined: Nov 2002
Actually, the color is #666699, so it's a dark blue (the lines are just a touch darker). Given that I want to put white text on top of it, I can't make it too bright.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
knocturner posted this at 01:42 — 25th December 2002.
They have: 17 posts
Joined: Dec 2002
There's no ALT Tag for teh pic on the right side...I do like the layout,font, and color.
pmj7 posted this at 21:04 — 3rd January 2003.
He has: 234 posts
Joined: Nov 2002
There's no IMG tag for the pic on the right side either!
Hmmm... not many visitors to the site as yet, I'll have to work on that, but the average visit is 5 minutes - which isn't too bad.
Peter
Touchup image processing applet
Pixel Development Web Design, Photography
Cibok posted this at 16:03 — 13th September 2003.
They have: 7 posts
Joined: Sep 2003
i like the menu and the girls..
consider making a new header..!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.