AlexZaw

Как ни странно понимает. Я сам не понимаю почему, но работает. У html вообще не задавать высоту, для body задать высоту 100%

Вы маленько не так поняли, ну или я не так выразился. Я имел ввиду селектор html, body т.е. у body высоту в 100% можно задать, тогда футер прижмется к низу. А вот у html ее нужно убрать.

Уберите height:100% из стилей html,body

Хоть бы под спойлер убрали.. Но не суть, я имел ввиду код на котором можно воспроизвести ситуацию. На одном css этого не сделать. Выложите код в песочницу (https://jsfiddle.net или https://codepen.io) или дайте ссылку на сайт.

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

Про dl маленько не так выразился, он может содержать в себе один или больше элементов dt за которыми следуют один или больше элементов dd А вот элементы dt и dd могут содержать в себе элементы ul. Ваш код должен выглядет как то так: <dl> <dt>Web дизайн</dt> <dd>Java Script и библиотека jQuery <ul> <li> Начальный уровень </li> <li> Продвинутый уровень </li> </ul> </dd> <dd>3D MAX <ol> <li> Начальный уровень </li> <li> Продвинутый уровень </li> </ol> </dd> </dl> Вот здесь https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html расписано какой у кого может быть контент

Можно. А вот этот код уже неправильный. Не смотря на то что браузер отрабатывает нормально, валидацию такой код не пройдет. По спецификации внутри тегов ul, ol, и menu могут находиться только теги li, так же, как и внутри dl могут назодиться только теги dt

Если добавить fixed, то как раз наоборот оно будет зафиксировано на месте. Ваш код, кстати, прекрсано работает так как вам нужно, значит ошибка где-то в другом месте

html покажите. Вообще <ol> прекрасно нумерует список как положено.

Бывает ? Иногда случается что не замечаешь очевидной ошибки и не можешь понять почему же код котороый обязан работать ведет себя не так как полагается. А нужно лишь внимательно присмотреться к участку кода, пройтись по шагам и понять что он делает. CSS селекторы читаются справа налево, хотя в данном случае это не критично для понимания ваш селектор header ul li a:last-child (для удобства прочитаем его слева направо) означает: ищем header, в нем выбираем ul, дальше li, в li выбираем последнюю ссылку. Так как ссылка у нас одна, и она же является последней то и бордер убирался у всех ссылок. Если бы ссылок в li было несколько, то бордер убирался только у последней. Причем если бы между a и :last-child стоял пробел, то стили бы применялись уже не к последней ссылке, а к последнему ребенку ссылки, например если бы у вас в ссылке использовались span или какие-то другие теги, стили бы применялись к последнему из них.

header ul li:last-child a { border-right: none; }

Как вариант: <div class="wrap"> Наука <div class="square"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt obcaecati rem quasi saepe tenetur illo exercitationem dicta explicabo laudantium cumque, expedita voluptate repudiandae perspiciatis culpa suscipit? Necessitatibus nisi qui quaerat! </div> </div> </div> .square{ position: relative; border-left: 1px solid #000; } .square:before, .square:after{ content: ''; position: absolute; width: 100px; height: 1px; background: #000; left: 0; } .square:before{ top: 0; } .square:after{ bottom: 0; } .text{ position: relative; padding: 30px 0 30px 20px; } .text:before, .text:after{ content: ''; position: absolute; height: 20px; width: 1px; background: #000; left: 100px; } .text:before{ top: 0; } .text:after{ bottom: 0px; }

Уже лучше. Только для top-menu я бы все-таки не задавал ширину, тем более фиксированную, оно ведь может как увеличится, так и уменьшиться, да и использовать margin-left c таким значением тоже не есть гуд, лучше уж использовать float:right; и отодвинуть меню с помощью margin-right, тоже в принципе относится и к остальным элементам с такими отступами. Для ul с классом buttons_location_menu можно убрать фиксированную ширину, сделать обертку, задать обертке display:inlline-block; и задать для menu-header text-align:center; тогда список будет по центру. Если вам нужно ограничить какой то элемент по ширине - старайтесь использовать max-width и паддинги, либо задавать ширину в процентах, это облегчит последующую адаптацию страницы. На беглый взгляд замечаний больше нет. Почитайте про адаптив, что это, с чем его едят, как он делается. В дальнейшем пригодится, да и даже если вы пока не готовы замахнуться на адаптивность, все-равно будет полезно знать, хотя бы для того, что-бы не привыкать к фиксированным величинам и абсолютному позиционированию. зы. Все мои советы являются не больше чем именно советами, а отнюдь не рекомендацией к действию, это то, как бы сделал я, но все, опять же, зависит от конкретной ситуации и собственных привычек/предпочтений. В верстке нет единственно правильного подхода ?

Было бы лучше, если бы вы исправленную версию файла стилей внедрили бы на сайт, а не просто выложили сюда

min-height уже получше, если вы уверены что элемент не будет меньше указанного размера. Какие-либо родительские элементы лучше вообще не ограничивать в размерах ни в максимальных ни в минимальных, пусть они зависят от контента. А недостающие размеры можно добить паддингами и/или маржинами Есть конечно случаи когда можно и нужно задавать размеры, но они не так часто встречаются.

В блоке columns можно было сделать justify-content:space-around; и добавить паддинги, а не сдвигать элементы позиционированием. Избегайте использовать фиксированную высоту. Что будет с версткой если изменятся размеры или количество внутренних элементов? Не используйте абсолютное позиционирование там где это не нужно всю вашу страницу можно было сверстать вообще без использования позиционирования. Если вы планируете дальше изучать адаптивную верстку то эту страничку будет очень тяжело адаптировать.

<progress max='100' value='25'></progress> При формировании страницы с помощью пхп получаем кол-во зарегестрированных пользователей из базы и меняем значение value.

Это называется табы. А по поводу оригинальности - уточните, что вы имели ввиду?

https://www.searchengines.ru/pravilnyj-pereezd-na-https.html

Можно задать класс для "фоновой" картинки и позиционировать именно ее, а не все картинки. Да ничего мудреного на самом деле нет, дойдете до изучения псевдоэлементов и все будет ясно ?

Убедили ? тогда вот так: <table cellpadding="0" cellspacing="0" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td class="im"></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> td{ width: 100px; height: 50px; } .im{ position: relative; } .im:before{ position: absolute; width: 20px; height: 20px; background: url(http://placekitten.com/g/20); content: ''; right: 0; top: 50%; transform: translate(50%, -50%); z-index: -1; }

Так никакой проблемы нет, картинка спозиционирована абсолютно и остальные элементы ее не видят Интересное решение, но зачем?

Фон в любом случае будет либо обрезаться, либо повторяться для каждой ячейки, либо будет только в одной ячейке в зависимости от браузера. Firefox,по моему, единственный кто работает с фоном подобным образом, ну и, возможно, другие браузеры на движке Gecko. Хотя, опять же IMHO, вариант рендера фона для tr у лисы наиболее правильный.

Можно так: <table cellpadding="0" cellspacing="0" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td class="im"><img src="http://placekitten.com/g/20" alt=""></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> td{ width: 100px; height: 50px; } .im{ position: relative; } .im img{ position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); }