Прежде всего, если вы знаете, что собираетесь написать плохой код, по крайней мере, сообщите об этом браузеру заранее. Используйте более снисходительный doctype, чем strict (технически это не особо помогает, но я думаю, что каждый бит помогает)
Далее, в отличие от большинства других языков, сеточные инфраструктуры и подобные средства на самом деле лучше для средних и продвинутых пользователей. Те, кто плохо знаком с CSS, с большей вероятностью будут смущены ими. (Это субъективно, я знаю, но это мнение, выражаемое многими, и мы даем здесь советы, не так ли?)
Теперь для логотипа сайта. Я полагаю, это вопрос личных предпочтений, но обычно логотипы помечаются как h1 s. Есть несколько способов достижения того, чего вы хотите здесь, я просто дам тот, который я обычно использую:
HTML:
<h1>
<a href="#">Site Name</a>
</h1>
CSS:
h1 {
float: left;
overflow: hidden;
}
h1 a {
display: block;
background: url('path/to/logo.png') no-repeat;
width: 100px;
height: 100px;
text-indent: -9999px;
}
Ваши URL неверны: ~/Home/ComingSoon и file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png могут работать локально, но вам нужно использовать относительные пути, если вы собираетесь разместить их на сервере (при условии, что вы не собираетесь использовать серверные скрипты для генерации этих URL)
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
Объявления min-height и min-width бесполезны: они полезны, только если вы не объявляете фиксированные width и height. Свойства min-height и max-height и их аналоги по ширине используются для гибких макетов, когда разработчик предоставляет браузеру определенную степень гибкости для адаптации к разным размерам экрана и другим неконтролируемым факторам.
Объявление display: table-cell также немного подозрительно: если вы хотите, чтобы встроенный элемент a расширился до размера его родительского элемента div, вы можете просто использовать display: block
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
Кроме проблемы с URL, цвет фона также не должен быть повторно объявлен - элементы HTML по умолчанию имеют прозрачный цвет фона. Объявление display: block здесь также не нужно - div s являются элементами уровня блока.
О, и я действительно действительно извините, если вы чувствуете обиду этим комментарием. Я действительно. Считайте, что я это компенсирую, хорошо?