Sheila Computer Tutor - Rebuilt

Replies to This Discussion

Permalink Reply by Sheila Pritchard on February 16, 2010 at 16:52

Hello Tony

Thank you very much for the reassurance that we are using this forum in the manner that it was intended. I was becoming concerned that was monopolising your time. However the useful information and advice is so very welcome and I am thoroughly enjoying listening to everyone's opinions and will definetly try to apply these. Hopefully then within time I shall be able to build a super website and help to show others how to do the same.

I think one one of the most difficult things to do is to keep up to date with the quickly changing technology. I do read computer magazines to try

Permalink Reply by Sheila Pritchard on February 17, 2010 at 11:45

Hello again Tony

I am sorry but it seems that the last sentence of my previous note is missing, how strange. Anyway I wanted to say that you havent confused me further but instead given me practical solutions. I love the spoon.net/browsers and agree with you that for some of the much older browsers it is a lot of effort that can outweigh the advantages.

Kind regards
Sheila

Tony Rolfe said:

Hi Shelia and all,

I have been reading through this discussion and am really pleased that everyone is using the Exchange Community as we intended.

I am going to give you a website now that well both help you and maybe annoy you as well :)

Whilst downloading the newest versions of all browsers is great, you still need to remember that many people do not upgrade their browsers as often as they should. Not because they are being difficult but just because they don't know how. You would be surprised how many people that still use IE6!
As you know, once you have installed a browser you can only view that version unless you have a few old computers with old browsers on that you can use which is not very practical.

A way round this is to use the following website:

http://spoon.net/browsers/

You install a little plug-in and then you can view any site in that browser and a few previous versions.

Although there are just some issues in previous browsers that you cannot fix as they do not support certain CSS aspects. This is where you would need to apply different CSS sheets for different browsers - it does start get to get a bit confusing now, so I have included a link below to help explain this further. It is an old link, but you can get the gist of what you need to do:

http://www.thesitewizard.com/css/excludecss.shtml

The only thing you need to ask yourself is that is the issue in a previous version of a browser really worth the hassle fixing? It could be a form field that isn't formatting correctly or a background colour that isn't showing correctly. If it doesn't affect the usability of the site, then ask yourself if it is necessary to make the changes for a browser that is 2 versions old.

I hope this has been of some benefit and has offered you some more food for thought and not confused you even more. But if you adopt these measures when you create a new site, then that should set you in good stead for creating a site that is viewable in almost any browser and version.

Regards

Tony

Permalink Reply by Sheila Pritchard on February 24, 2010 at 21:35

Hello Harvey

I am sorry for the delay in my reply to your note but I have been hampered by not just a slow Internet connection I have been having problems trying to get my site to center using CSS. I have now resolved the Internet problem by upgrading to a larger width broadband!

However, the big issue for me is the CSS for centering. I followed Dave Cooper's advice and used not only the W3 tutorials but anything else I could find on the Internet. Whatever I read the advice seems to be the same and that is for the container to have margin-left:auto and margin-right:auto with the text-align:left and then in the body text-align:center; The advice is to make the container a percentage rather than an absolute size. What should happen is that the body's text should show as left aligned even though the css states center. But this does not happen despite trying so many options I now despair and have written the code below. This gives me the left text align but the site itself is on the left in IE8 although it appears to be center in Firefox, Opera and Chrome! Because I do not have a widescreen monitor I cannot check if it is now central for widescreen users. Also the left Nav right border and the body padding-right is now only showing in IE8.

#container {
margin-right:auto;
margin-left:auto;
width:80%;
background-color:#FFFFCC;
border:5px solid grey;
text-align:left;
}


#header {
width:100%;
height:100px;
}


#leftnav {

float: left;
width: 110px;
height: 500px;
border-right: 5px solid grey:
background-color: #FFFFCC;
padding-right:25px;

}


#body {
text-align:left;
max-width:100%;
height: 500px;
background-color: #FFFFCC;
font-family: Verdana;
font-H1: 14px;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
padding-left:25px;

}


#footer {
width: 100%;
background-color: #FFFFCC;
font-family: Verdana;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
text-align: center;
clear: both;
}

Harvey I do feel embarrassed that I had centered the text because I should have known better! One of the first things that I learnt was that people read differently on the Internet and tend to read in an "F" like fashion. I also learnt that one of the best font styles is Verdana and as such always use the font family Verdana, Arial and Helvecta. Is this still the case or has it changed to include Geneva and not Verdana?

I have taken your advice and widened the left hand navigation as well as incorporating all of the elements in one table in each HTML page. I wasnt sure if or how I could do this in CSS.

I also added a border between the navigation and main text area but as stated above for some strange reason it is no longer showing in Firefox, Opera or Chrome.

I have really tried to resolve these issues myself but there are times when it is best to admit defeat and put one's hand up and ask for advice. The time is now and I suspect you will take one look at my code and it will be obvious to you!

Well, I am keeping my fingers crossed that the solution will be obvious to you!
Kind regards
Sheila

Harvey Raybould said:

Hi Sheila,

I have been reading this discussion over the last few days with interest and thought I would try and just give a little bit of different advice, as opposed to CSS and different browsers, as I think the advice you have been given on this is excellent already.

Firstly though congratulations on all of the improvements you have made, I think you are really moving forward well.

1) In the browsers I am using IEv8 and Firefox 3.5.7 the site is not centered in the middle, it is more over to the left side, personally I think it would be better if the site were centered fully. Personally I just find sites easier to read if they are in the middle of the screen, especially with today’s large wide screen monitors.

2) There have been hundreds of web usability books written, surveys carried out and one of the main questions/conclusions asked. “ How do users read on the Web?” and the answer is "They don’t". This has been proved many times, we don’t read on the web, we scan.

So It is our aim as web designers to give people the information they need quickly and easily. This is a very complicated subject so I am just going to detail some expert recommendations regarding “legibility”

a) Font styles – use sans serif fonts such as Arial, Helvetica or Geneva
b) Font sizes – Use 10 – 12 point fonts for most body text.
c) Font consistency – do not use a wide range of font styles, colours or sizes.
d) Underlines – do not use underlines in regular text, only on hyperlinks.
e) Justification – do not justify paragraphs. Always use left-justified text. Do not center body text – especially bullet lists of varying line lengths.
f) All-caps – avoid using text in all capital letters
g) Line Length – blocks of text over 50 characters wide are harder to read
h) Contrast – high contrast between text and background increases legibility

There are many more, but I think these are the most important for you to worry about. I think on the whole your site handles these very well, but I would recommend that you have a think about point (e). You have all of your text centered, and this has been proven over many years to make the content harder to read.

3) So, I would try to make the left hand navigation a little wider, so the blue images are further away from the left border, may be try to put a border between the navigation and main text area, this could just be a slightly darker or lighter shade of the main background. Then have a look at the text, change it from center to left justify, and add some more spacing between the elements particularly on the contact form.

4) As Chris indicated, I also think it would be a good idea to keep all of the navigation elements on all pages, rather than them disappearing, as it makes the site look a little in consistent.

I hope these points help you and please do not hesitate to let me know if you need any help with anything.

Take care

Regards

Harvey

Permalink Reply by Dave Cooper on February 25, 2010 at 14:37

Hi Sheila,
I got a bit confused reading your css until I realised that you've done something a bit unconventional: usually in css you set properties for body {......} which has all the defaults for your web page: fonts, background colour, whatever. You haven't set any properties at all for body (dunno what effect that has), but you do have a div id="body" with a lot of the stuff one would expect to be in body {...} in it! (Oh dear, that looks even more confusing!). If it was me, I'd definitely set the defaults in body and re-name that div id="body" to div id="main_text" (or something) (on seconds thoughts, I'd rename it to class="main-text". If you use id you can only use it once per page, and quite often it's convenient to separate up the divs)
The css has a couple of bloopers (according to W3C's css checker :) ). It doesn't like 'grey', probably prefers 'gray', and there's a : instead of a ; at the end of 'border-right...' in the #leftnav statement.
Because browsers are fault-tolerant, it's easy to miss small errors like this, but because they don't all handle errors the same way it's worth sorting them out before going any further, otherwise you can spend hours trying to fix some problem, only to discover that the browser has given up on the statement (and isn't even reading the code you're desperately punching in!) because of an error higher up!
Dave

Permalink Reply by Harvey Raybould on February 25, 2010 at 16:44

Hi Sheila

Please don't worry, I totally understand your frustration, honestly I learn different things myself everyday, still now.

Please try to look at a stylesheet as a Heirarchy

BODY > #CONTAINER > #HEADER > #LEFTNAV > #CONTENT > #FOOTER

Dave is absolutely correct regarding the body and it would be better to use this. Body (no # sign) which includes elements for the whole site, i.e. page background colour, font type, etc etc

body{
background-color: #ffffcc;
}

#container{
width: 942px; or width: 80%;
margin: 0 auto;
}

In CSS if you add this line to the container element it will center the whole content for you

margin: 0 auto;

You do not need these now in the container:

margin-right:auto;
margin-left:auto;

I would recommend as Dave does to change #body may be to #content and then under #content have a class called main-text. And under this have your text selections. But again this is not really necessary, as it could just go in the new body (no # sign) as above.

#content .main-text{

Please also note Dave's great spot re the leftnav syntax error, which will definitely fix your border issue.

border-right: 5px solid grey:

Should be

border-right: 5px solid gray;

I hope this helps

Regards

Harvey

Permalink Reply by Sheila Pritchard on March 3, 2010 at 18:36

Thank you Harvey, Dave, Tony and Chris for all your practical help. I have tried to incorporate all of this into my site albeit I am still struggling with the centering in IE8! However, as a result of listening to your advice I have started from scratch in learning how to build web sites. I am currently working my way through the W3c school doing the online HTML and CSS training. I have also been to the library and could have done with a wheel barrow to cart home all the books I borrowed on web programming with HTML, XHTML, CSS etc. The only problem with these books is that most of them were written no later than 2005 which means they are out of date. Even with my limited experience I spotted code that is being discontinued by the W3C. Although there is a lot of information that may well still be valid.

I am sure that I read somewhere on this forum some suggested reading from Harvey but I cannot find it now, maybe I dreamed it?

So, if anyone can recommend any up to date HTML, XHTML, CSS books to buy that would be great.

Thanks again everyone.
Kind regards
Sheila

Harvey Raybould said:

Hi Sheila

Please don't worry, I totally understand your frustration, honestly I learn different things myself everyday, still now.

Please try to look at a stylesheet as a Heirarchy

BODY > #CONTAINER > #HEADER > #LEFTNAV > #CONTENT > #FOOTER

Dave is absolutely correct regarding the body and it would be better to use this. Body (no # sign) which includes elements for the whole site, i.e. page background colour, font type, etc etc

body{
background-color: #ffffcc;
}

#container{
width: 942px; or width: 80%;
margin: 0 auto;
}

In CSS if you add this line to the container element it will center the whole content for you

margin: 0 auto;

You do not need these now in the container:

margin-right:auto;
margin-left:auto;

I would recommend as Dave does to change #body may be to #content and then under #content have a class called main-text. And under this have your text selections. But again this is not really necessary, as it could just go in the new body (no # sign) as above.

#content .main-text{

Please also note Dave's great spot re the leftnav syntax error, which will definitely fix your border issue.

border-right: 5px solid grey:

Should be

border-right: 5px solid gray;

I hope this helps

Regards

Harvey

Permalink Reply by Harvey Raybould on March 4, 2010 at 10:52

Hi Sheila

Good luck with all of the learning and new web site.

The link to the books is below for you, although it might just be a good idea to have a look on Amazon for web design etc and read the ratings and reviews.

http://www.webdesigndev.com/web-development/15-books-for-beginners-...

Regards

Harvey

• ‹ Previous
• 1
• 2
• Next ›
• Page