Помощь с моим сайтом

Привет и доброе утро: Прошло так много времени с тех пор, как я был здесь в последний раз.

Я действительно скучаю по этому месту, но какое-то время отсутствовал, так как мне приходилось совмещать работу и все более ухудшающееся здоровье. В любом случае, я создал веб-сайт, так как хотел бы снова открыть свой бизнес.

Большую часть веб-сайта я сделал, однако у меня возникли некоторые проблемы.

Я надеюсь, что вы все сможете мне помочь, особенно в том, что касается внешнего вида и ощущений, поскольку я полностью слеп.

Да, слепые люди могут вести нормальную жизнь, сохранять работу (у меня их две), воспитывать семьи и делать почти все, что может любой другой.

Просто некоторые вещи мы делаем по-другому, вот и все.

Если вы хотите узнать что-нибудь о слепоте и о том, как все это работает, ВЫ можете спросить меня или поискать видео на YouTube или статьи в Google. Вернемся к тому, о чем я спрашиваю. 1. Я не могу заставить CSS для панели навигации работать правильно.

Поскольку я использую списки для организации другого контента на сайте, я хотел стилизовать свою панель навигации с помощью селекторов идентификаторов.

К сожалению, что-то идет не так, и я не знаю, что именно.

Можете ли вы дать мне несколько отзывов по этому поводу? 2. Есть ли у вас предложения по выбору шрифта и цвета? 3. Я пытаюсь придумать, что мне нужно сделать для логотипа.

Мне интересно, есть ли у вас какие-нибудь идеи. Сайт находится по адресу www.waldorf-pc.com

Большое вам спасибо за вашу помощь. Я искренне ценю вас всех и очень надеюсь, что смогу запустить и продать сайт после первого года.

1. Ваш файл .css не существует: http://www.waldorf-pc.com/waldorfpcstyles.css

Ссылку написал с ошибкой? Вам нужен рабочий .css, прежде чем кто-либо сможет увидеть, в чем проблема с навигацией. 2. Что касается семейства шрифтов, которое я бы выбрал Ариал, без засечек; 3. Почему бы не заказать красивый логотип на ДП? https://forums.digitalpoint.com/forums/design-contests.94/

@kk5st, они используют идентификатор, какая разница, произносят они тэг или нет? Вы хотели указать, что ребенка LI следует изолировать только с помощью удостоверения личности? Я думаю, порядок его CSS будет более важным.

На самом деле в кодовой базе ОП есть много проблем, начиная от устаревшей гнили и заканчивая просто плохими практиками.

так что как насчет того, чтобы начать с этого? 1) У него нет типа документа.

Это означает, что блочная модель и размеры в разных браузерах нарушены.

и, несмотря на некоторые дикие заявления об обратном, многие современные браузеры, включая Firefox, ведут себя по-разному, когда нет DOCTYPE.

2) сейчас 2018, а не 2010 год, вы больше не говорите type="text/css". Никогда ничего не делал, начиная с HTML 5 больше не требуется.

3) сейчас 2018, а не 1997 год, где ваш атрибут MEDIA в вашей таблице стилей LINK? CSS вашего экранного мультимедиа, скорее всего, является тарабарщиной для печати, речи, tty и т. д. Как минимум, у вас должен быть media="screen" для этого.

4) ссылки Skipto всегда были глупыми и бессмысленными, даже для пользователей программ чтения с экрана, если вы просто создавали свой документ с логической структурой документа - иначе говоря, «правильно используя нумерованные заголовки».

5) с этой целью, где ваши пронумерованные заголовки и правила построения структуры документа? Вы просто вбрасываете туда текст волей-неволей.

Неправильно иметь CDATA даже до вашего H1. (единственное число) с тех пор (единственное число) H1 - это (единственное число) заголовок на САЙТЕ (весь сайт) что все является подразделом.

H2 указывает на начало основного подраздела страницы, причем первый H2 является началом основного контента.

H3 означает начало подраздела предшествующего ему H2. H4 означает начало подраздела H3 перед ним.

угадайте, что означают H5 и H6? Даже HR означает «изменение темы или раздела, где текст заголовка нежелателен или неоправдан». ОНИ НЕ ОЗНАЧАЮТ ИЗМЕНЕНИЯ РАЗМЕРА, ВЕСА ШРИФТА ИЛИ ПРОВЕДЕНИЯ ЛИНИИ ПО ЭКРАНУ!!! -- это всего лишь их внешний вид по умолчанию, и один покойный участник этого сайта говорил: «Если вы выбираете какой-либо HTML-код на основе того, как вы хотите, чтобы все выглядело, вы выбираете неправильные теги по совершенно неправильным причинам!» Вот почему программы чтения с экрана, устройства чтения Брайля и т.п. позволяют перемещаться по странице по заголовкам. Это часть построения логической структуры документа. Именно поэтому объединение H1+h2 вместе для заголовка и слогана — это невежественная ерунда, а пропуск уровней заголовков, увеличивающихся в количестве, и/или начало страницы с чего-либо, кроме H1, — некомпетентная чушь.

Погуглите «Примеры начальной загрузки», чтобы найти живые примеры такого чертового невежества и некомпетентности в действии.

6) У вас отличные абзацы, а что за лишние перерывы? Перерывы предназначены для перерыва в ходе мыслей или между строками в качестве разделителей, а не для того, чтобы «я хочу больше места между ними». Не используйте разметку для выполнения работы CSS!

7) BR совершенно недействительны как братья и сестры LI/прямые дочерние элементы UL. Вы даже не можете разместить BR там, где у вас есть BR, внутри этого последнего UL!

8) Имена тегов в верхнем регистре считались недопустимыми в HTML 4 и являются плохой практикой в HTML 5. Хотя теперь это разрешено, просто не делайте этого.

9) Вы можете потерять замыкания стиля XML в «пустых» тегах, таких как BR. Это был трюк для совместимости с XML, который нам никогда не был нужен.

10) Несмотря на то, что HTML 5 позволяет это, по-прежнему плохая практика заключать теги уровня блока в привязки.

Это очень непредсказуемый кроссбраузерный вариант, и он был недействителен в HTML 4. Зачастую их проще использовать в тегах типа H1 для разных стилей.

11) вместо того, чтобы бездумно переводить строки, как насчет того, чтобы правильно разместить переносы на уровне блоков в меню?

12) вы никогда должным образом не закрывали свой второй UL и вам не хватает /LI.

13) Сейчас 2018 год, а не 1997 год, атрибута BORDER не существует.

Итак.

первый шаг: давайте изменим ваш документ, чтобы он имел смысл, и придадим ему логическую структуру.

 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
name="viewport"
content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 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="[URL='https://lumtu.com/yti/ajVVjay9odHRwOi8vY29weXNjYXBlLmNvbS9vcmlnaW5hbGl0eS1jaGj1S']http://www.copyscape.com/originality-check/[/URL]">
<img
src="[URL='https://lumtu.com/yti/awZZwaWZodHRwOi8vYmFubmVycy5jb3B5c2NhcGUuY29tL2ltYWdlcy9jcy13aC0zZC0xMjB4NjAujN4']http://banners.copyscape.com/images/cs-wh-3d-120x60.gif[/URL]"
alt="Защищено проверкой оригинальности Copyscape"
title="Защищено средством проверки на плагиат Copyscape. Не копируйте содержимое этой страницы."
 width="120" height="60"
>
</a>
<!-- #footer --></div>

</body></html>

Код (разметка): все остальное, что вы делаете, записывается в таблицу стилей.

Я добавил еще пару DIV, чтобы изолировать такие вещи, как контент для группового оформления и/или такие вещи, как максимальная ширина.

Максимальная ширина важна, чтобы длинные строки текста не становились громоздкими и трудными для понимания.

Также обратите внимание, как я сжимаю DOCTYPE до мета-кодировки в одну строку, а также закрываю/тело HEAD и закрываю BODY, а HTML закрываю в одну строку? Это не столько для экономии нескольких байтов, сколько для мягкого напоминания о том, что теги ДОЛЖНЫ располагаться в таком порядке, и между ними больше ничего не вставлено.

Поскольку они всегда одинаковы и обычно хорошо вписываются в линию, рекомендуется располагать их таким образом, чтобы вы случайно не накосячили и не вставили вокруг или между ними что-то, что им не принадлежит.

Делаю быстрое затухание, но я вернусь к этому позже (если вспомню), чтобы составить быструю таблицу стилей и ответить на ваши актуальные вопросы.

но пока у вас не будет правильной семантики и структуры документа, вам действительно не следует играть с стиль.

Я использую NVDA, который представляет собой невизуальный доступ к рабочему столу.

Это мой любимый.

Но когда я проверяю доступность на ПК, я буду использовать обе программы чтения, а также IE, Edge, Firefox и Chrome, поскольку мои оценки должны быть максимально тщательными.

Для этого я использую различные инструменты.

Поскольку вы слепы, вы не можете видеть, как ваш нынешний выбор влияет на слабовидящих.

Установите размер шрифта body равный размеру браузера по умолчанию, т. е. body{font-size: 100%;}, затем установите p{font-size:1em;}. Позвольте вашему посетителю определить размер по конфигурации своего браузера.

Используйте общий основной текст, используйте шрифт без засечек, как предложено выше @quikad.com.

Для текста большего размера, например h1-3, используйте шрифт с засечками, поскольку он более читабельен. Пастельные цвета, особенно голубой в вашем меню, трудно читать.

Поддерживайте более высокий контраст, например.

черный или очень темно-серый на белом или очень светло-сером фоне. Гэри