@Rokis прав, что flex-box, вероятно, ваш лучший выбор - хотя на самом деле от этого пахнет вычурной концепцией макета, которая вообще не имеет никакого чертового бизнеса на веб-сайте. Я бы выбросил всю эту концепцию макета в мусорную корзину и начал бы с чего-то более простого, например, с плоского списка... или полностью исключил бы цвета фона.
В противном случае вы столкнетесь как с раздуванием кода, так и с кошмаром доступности.
Хотя с фиксированными метрическими шрифтами и конфликтующими объявлениями размеров, 62,5% [b[LIE[/b]
(это переопределяется еще худшими 13 пикселями), статический стиль в разметке, статический скриптинг в разметке, бесконечные бессмысленные отдельные скрипты и таблицы стилей, отсутствие медиа-целей, бесконечные бессмысленные DIV просто так, бесконечные бессмысленные классы просто так, полное отсутствие чего-либо, отдаленно напоминающего правильную семантику - если вы привели что мне, как клиенту, я бы посоветовал вам выбросить всю крушение поезда из-за некомпетентности разработчиков в мусор и начать все сначала!
О чем свидетельствуют 19,4 тыс. HTML для доставки 2,19 тыс. открытого текста и изображений с нулевым содержанием СОДЕРЖИМОГО. (то есть изображения должны быть в CSS, а не в разметке!) — по сути, в три-пять раз больше необходимого HTML!
Конечно, некомпетентность и невежество разработчиков до такой степени, что тот, кто создал сайт, даже не имеет квалификации для создания веб-сайта, в значительной степени является обычным явлением в тот момент, когда вы его нажимаете, а тем более отупляющая идиотская полоумная ерунда, которая является бутдерьмом, участвует в мочеиспускании. повсюду.
Следовательно, почему для этого НЕТ законной причины:
Код:
<body>
<div id="top">
<h1><a href="/">Transcripts Austrailia</a></h1>
<input type="checkbox" id="showHideMainMenu">
<label for="showHideMainMenu"></label>
<ul id="mainMenu">
<li><a href="/" class="current">Home</a></li>
<li><a href="/starthere">Start Here</a></li>
</ul>
<!-- #top --></div>
Код (разметка): Должно быть значительно больше:
<body data-rsssl=1 class="home page-template-default page page-id-79 wp-custom-logo layout-fixed pre-header-style2 header-style1 header-logooverflow header-sticky"> <div id="body-core" class="hfeed site"> <header> <div id="site-header"> <div id="pre-header"> <div class="wrap-safari"> <div id="pre-header-core" class="main-navigation"> </div> </div> </div> <!-- #pre-header --> <div id="header"> <div id="header-core"> <div id="logo"> <a href="[URL='https://wmlogs.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]" class="custom-logo-link" rel="home" itemprop="url"><img width="314" height="165" src="[URL='https://wmlogs.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL]" class="custom-logo" alt="СтенограммыАвстралия" itemprop="logo" srcset="[URL='https://wmlogs.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL] 314w, [URL='https://wmlogs.com/yti/bAccAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xLTMwMHgxNTguTNx']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1-300x158.png[/URL] 300w" sizes="(max-width: 314px) 100vw, 314px" /></a></div> <div id="header-links" class="main-navigation"> <div id="header-links-inner" class="header-links"> <ul class="menu"> <li class="current_page_item"><a href="[URL='https://wmlogs.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]">Home</a></li><li id="menu-item-2" class=""><a href="[URL='https://wmlogs.com/yti/ZgccgZS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS9zdGFydGhlGdy']https://transcriptsaustralia.com.au/starthere/[/URL]"><span>Start Here</span></a></li> </ul> </div> </div> <!-- #header-links .main-navigation --> <div id="header-nav"><a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a></div> </div> </div> <!-- #header --> <div id="header-responsive"><div id="header-responsive-inner" class="responsive-links nav-collapse collapse"><ul><li class="page_item page-item-79 current_page_item"><a href="[URL='https://wmlogs.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]">Home</a></li> <li class="page_item page-item-2"><a href="[URL='https://wmlogs.com/yti/ZgccgZS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS9zdGFydGhlGdy']https://transcriptsaustralia.com.au/starthere/[/URL]">Start Here</a></li> </ul></div></div> <div id="header-sticky"> <div id="header-sticky-core"> <div id="logo-sticky"> <a href="[URL='https://wmlogs.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]" class="custom-logo-link" rel="home" itemprop="url"><img width="314" height="165" src="[URL='https://wmlogs.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL]" class="custom-logo" alt="СтенограммыАвстралия" itemprop="logo" srcset="[URL='https://wmlogs.com/yti/bAnnAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xL0Sb']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png[/URL] 314w, [URL='https://wmlogs.com/yti/bAccAbmdodHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9jcm9wcGVkLVNjcmVlbi1TaG90LTIwMTctMDYtMjgtYXQtNC4yMS4xMy1wbS0xLTMwMHgxNTguTNx']https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1-300x158.png[/URL] 300w" sizes="(max-width: 314px) 100vw, 314px" /></a></div> <div id="header-sticky-links" class="main-navigation"> <div id="header-sticky-links-inner" class="header-links"> <ul class="menu"> <li class="current_page_item"><a href="[URL='https://wmlogs.com/yti/dh55hdS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbSvNm']https://transcriptsaustralia.com.au/[/URL]">Home</a></li><li id="menu-item-2" class=""><a href="[URL='https://wmlogs.com/yti/ZgccgZS9odHRwczovL3RyYW5zY3JpcHRzYXVzdHJhbGlhLmNvbS5hdS9zdGFydGhlGdy']https://transcriptsaustralia.com.au/starthere/[/URL]"><span>Start Here</span></a></li> </ul> </div> </div><div class="clearboth"></div> <!-- #header-sticky-links .main-navigation --> </div> </div> <!-- #header-sticky --> </div> </header> Код (разметка): ... если не считать абсолютной и полной некомпетентности и невежества со стороны тех, кто готовит эту катастрофу любым старым способом, не обращая внимания на правильное использование HTML или CSS, не говоря уже о соблюдении минимумов доступности!
Оттащите его за дровяной сарай с пистолетом .30-06, прижмите ствол к уху и обработайте его, как Старый Йеллер. Из этого беспорядка нет НИЧЕГО, что стоило бы даже попытаться спасти.
Это вдвойне верно, если вы поймете, что там есть тег , что это за 1997 год?
