Help with My Website

Hi and good early morning:

It has been so long since I have been here last. I really do miss this place but have been away for a while as I have had to juggle working and increasingly deteriorating health.

Anyway, I have created a website as I would like to explore opening my business back up again. I have got the website done for the most part, however, I am running into some troubles. I am hoping that you all can help me, especially as it concerns visual look and feel since I am totally blind. Yes, blind people can lead normal lives, hold down jobs--I have two, raise families and do most anything else anyone can. It is just that we do some things differently is all. If you want to know anything about blindness and how it all works, YOu can feel free to ask me or look up some videos on YouTube or some articles on Google.

Back to what I am asking.

1. I cannot get my CSS for my navigation bar to work correctly. Because I am using lists to organize other content on the site, I wanted to style my navigation bar by using ID selectors. Unfortunately, something is going wrong, and I am not sure what. Can you please provide me some feedback on this?

2. Do you have any suggestions on font and color choices?

3. I am trying to figure out what I need to do for a logo. I am wondering if you have any ideas.

The website is at www.waldorf-pc.com

Thank you so much for all of your help. I truly appreciate you all and really hope that I can get the site launched and marketed after the first of the year.

 

What kind of screen reader software are you using, Jaws by any chance?

 

I am using NVDA which is Nonvisual Desktop Access. It is my favorite. But when I am testing for accessibility on the PC, I will use both scree readers along with IE, Edge, Firefox and Chrome as my evaluations have to be as thorough as possible. To insure that, I use a variety of tools.

 

1. Your .css file doesn't exist: http://www.waldorf-pc.com/waldorfpcstyles.css

Misspelled the linked? You need a working .css before anyone can see what the problem with the navigation is.

2. As far as the font family I'd choose Arial,sans-serif;

3. Why not order a nice logo on DP? https://forums.digitalpoint.com/forums/design-contests.94/

 

Specificity and order are doing you in. Instead of this,

#nav {…}

Code (markup):

, do this,

ul#nav {…}

Code (markup):

.

Since you're blind, you can't see how the partially sighted are affected by your present choices. Set your body's font size to the browser's default size, i.e. body{font-size: 100%;}, then set p{font-size:1em;}. Let your visitor determine the size by his browser's configuration.

Font common body text, use a sans-serif font as @quikad.com suggested above. For larger sized text, as for h1-3, use a serif font as it is more readable.

The pastel colors, especially the cyan in your menu, are difficult to read. Keep the contrast higher, e.g. black or very dark gray against a white or very light gray background.

gary

 

@kk5st, they're using an ID, what the blazes difference does it make if they say the tagname or not? Did you mean to point out they should be isolating the child LI only with the ID? I'd think the order of his CSS would be more important.

Really the OP's codebase has a lot of issues ranging from outdated rot, to just plain bad practices... so how about we start there.

1) It has no doctype. This means the box-model and sizing across different browsers is broken... and despite some wild claims to the contrary, many modern browsers -- including firefox -- behave differently when there's no DOCTYPE.

2) this is 2018 not 2010, you don't say type="text/css" anymore. Never did anything, no longer required as of HTML 5.

3) this is 2018 not 1997, where's your MEDIA attribute on your stylesheet LINK? Your screen media CSS is likely gibberish for print, speech, tty, etc. At bare minimum you should have media="screen" on that.

4) skipto links were always silly and pointless, even for screen reader users if you'd just build your document with a logical document structure -- aka "using numbered headings properly"

5) to that end, where's your numbered headings and rules to build the document structure? You're just dumping text in there willy-nilly. It is improper to even have CDATA before your H1 (singular) since THE (singular) H1 is THE (singular) heading on a SITE (the whole site) that everything is a subsection of. An H2 indicates the start of a major subsection of the page, with the first H2 being the start of the main content. An H3 means the start of a subsection of the H2 preceding it. H4 means the start of a subsection of the H3 before it... care to take a wild guess what H5 and H6 mean? Even HR means "a change in topic or section where heading text is unwanted or unwarranted". THEY DO NOT MEAN CHANGES IN FONT-SIZE, FONT-WEIGHT, OR DRAW A LINE ACROSS THE SCREEN!!! -- that is just their default appearance, and a dearly departed member of this site used to say:

"If you choose any of your HTML based on what you want things to look like, you're choosing all the wrong tags for all the wrong reasons!"

This is why screen readers, braille readers, and the like allow you to navigate a page by the headings. It's part of building a logical document structure.

It's also why pairing a H1+h2 together for a heading and tagline is ignorant nonsense, and skipping over heading levels going "up" in number and/or starting the page with anything but a H1 is incompetent bullshit. Google "Bootstrap Examples" for live examples of such asshat ignorance and incompetence in action.

6) You've got perfectly good paragraphs, what's with the excess breaks? Breaks are for a break in the train of thought or between inlines as dividers, not "I want more space between these". Don't use markup to do CSS' job!

7) BR are completely invalid as siblings to LI / direct children of UL. You cannot even put BR where you have BR inside that latter UL!

8) Upper case tag names was considered invalid in HTML 4, and is bad practice in HTML 5. Even though it is now allowed, just don't do it.

9) You can lose the XML style closures on "empty" tags like BR. That was a hack for XML compatibility we never actually needed.

10) Even though HTML 5 allows it, it's still bad practice to wrap block-level tags in anchors. It's very unpredictable cross browser and was invalid in HTML 4. It's often also easier to nab them on tags like H1 for different styling.

11) rather than going ape on linefeeds, how about properly tabbing your block level wraps on the menu?

12) you never properly closed your second UL, and are missing a /LI

13) This is 2018, not 1997, there's no such thing as a BORDER attribute.

So... first step, let's re-arrange your document to make sense and give it a logical document structure.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="waldorf.screen.css"
	media="screen,projection,tv"
>
<title>
	Waldorf PC
</title>
</head><body>

<h1>
	<a href="/">
		Waldorf PC<span>:</span>
		<small>Where Quality Is a Number One Priority</small>
	</a>
</h1>

<ul id="mainMenu">
	<li><a href="index.htm">Home</a> </li>
	<li><a href="searchengineoptimizationservices.htm">SEO</a></li>
	<li><a href="contentproductionservices.htm">Content Production</a></li> 
	<li><a href="training.htm">Training</a></li>
	<li><a href="technicalconsulting.htm">Technical Consulting</a></li>
	<li><a href="accessibilityconsulting.htm">Accessibility Consulting</a></li>
	<li><a href="contact.htm">Contact</a> </li>
	<li><a href="about.htm">About</a></li>
</ul>

<div id="content">
	<h2>
		Waldorf PC is your number one resource for attaining guaranteed success hands down.
	</h2>
	<p>
		We are a multipurpose company seeking to meet a wide range of needs, making it so business people can come to one place and find all the tools they need in order to achieve their goals.
	</p>
	<ul>
		<li>
			We produce top quality content that will totally enhance your professional image, as our content is one hundred percent unique, error free, and engaging to readers. <a href="contentproductionservices.htm">Place your order with us and receive content that will contribute to you gaining massive exposure.</a>
		</li><li>
			We provide top-of-the-line search engine optimization and search engine marketing services to clients in numerous industries. <a href="searchengineoptimizationservices.htm">Work with us today and receive a guaranteed, number one ranking in return.</a>
		</li><li>
			We host trainings on a wide array of subjects to prepare you for success. <a href="training.htm">Check our training page to see if there is a course or seminar that peaks your interest.</a>
		</li><li>
		<li>
			We consult with businesses regarding how they can make their sites, web applications, mobile applications, desktop applications and digital documents accessible for individuals with disabilities and make profits soar as a result. <a href="accessibilityconsulting.htm">Talk with us about how you can achieve your accessibility goals and unleash your potential to make loads of cash by expanding your target market to millions more people worldwide who are just waiting to do business with you.</a>
		</li><li>
			We offer technical consulting services to help businesses find solutions that will enable them to stay connected and maintain a strong presence in their respective industries. <a href="technicalconsulting.htm">Consult with us today to see what technological solutions your business can benefit from to insure you achieve optimal success.</a>
		</li>
	</ul>
	<p>
		We are always adding more services, so you will want to check back often. Waldorf PC is devoted to keeping up with the latest online business trends, facilitating us to provide services that will allow you to always be ahead of your competition.
	</p><p>
		We look forward to working with you and helping you to take the web by storm.
	</p>
<!-- #content --></div>
	
<div id="footer">
	<hr><!-- says this is not part of the text / H2 preceding it -->
	&#169;2007-2018, Waldorf PC<br>
	<a href="http://www.copyscape.com/originality-check/">
		<img
			src="http://banners.copyscape.com/images/cs-wh-3d-120x60.gif"
			alt="Protected by Copyscape Originality Check"
			title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page."
			 width="120" height="60"
		>
	</a>
<!-- #footer --></div>
	
</body></html>

Code (markup):

Everything else you're doing goes in the stylesheet. I added a couple more DIV to isolate things like the content for group-styling and/or things like a max-width. Max-widths are important so long lines of text don't become unweidly and hard to follow. Also notice how I condense the DOCTYPE through to the charset meta to a single line, as well as the HEAD closure/body open and BODY close and HTML close to a single line? That's not so much to save a few bytes as it is a gentle reminder those tags MUST appear in that order with nothing else pasted between them. Since it's always the same and usually fits nicely on a line, it's just good practice to put them that way so you don't accidentally cock-up and paste something around/between them that doesn't belong there.

Pulling a fast fade, but I'll revisit this later (If I remember) to toss together a quick stylesheet, and go over your actual questions... but until you have proper semantics and document structure you really shouldn't be playing with style.

 

I obviously had a brain fart.

gary

 

I think firstly you should focus on your color scheme. I visited your's website and I felt that color combination is too poor.