1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with My Website

Discussion in 'HTML & Website Design' started by WaldorfPC, Dec 23, 2018.

  1. #1
    Hi and good early morning:
    SEMrush
    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.
     
    WaldorfPC, Dec 23, 2018 IP
    SEMrush
  2. Spoiltdiva

    Spoiltdiva Prominent Member

    Messages:
    5,911
    Likes Received:
    1,549
    Best Answers:
    46
    Trophy Points:
    395
    #2
    What kind of screen reader software are you using, Jaws by any chance?
     
    Spoiltdiva, Dec 23, 2018 IP
  3. WaldorfPC

    WaldorfPC Member

    Messages:
    46
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    48
    #3
    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.
     
    WaldorfPC, Dec 23, 2018 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,635
    Likes Received:
    1,046
    Best Answers:
    20
    Trophy Points:
    400
    #4
    qwikad.com, Dec 23, 2018 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,425
    Likes Received:
    354
    Best Answers:
    28
    Trophy Points:
    335
    #5
    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, Dec 24, 2018 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,683
    Likes Received:
    1,564
    Best Answers:
    226
    Trophy Points:
    515
    #6
    @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.
     
    deathshadow, Dec 26, 2018 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,425
    Likes Received:
    354
    Best Answers:
    28
    Trophy Points:
    335
    #7
    I obviously had a brain fart.

    gary
     
    kk5st, Dec 30, 2018 IP
  8. Ella_Brown

    Ella_Brown Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    I think firstly you should focus on your color scheme. I visited your's website and I felt that color combination is too poor.
     
    Ella_Brown, Jan 1, 2019 IP