-
Posts
12 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Edward
-
-
ТС, используй :after, :before для соседнего элемента для задания одного только фона, сам так часто поступаю. А вообще не вижу ничего плохого в использовании пустого <div>, может быть потому, что верстаю в основном лендинги, в которых к чистоте HTML кода не предъявляют обычно требований. А в целом нужно как всегда искать баланс между уместностью использования пустого <div> и избыточностью кода.
-
Сразу в глаза бросаются кнопки, они какие-то не живые, не вдавливаются (эффект нажатия), при ховере ничего не происходит. Ну а в целом, на первый взгляд вроде не плохо.
Оффтоп: Маркелов зарабатывает в ВК?
Спасибо.
По поводу кнопок так я делаю по PSD, если дизайнер и заказчик не предусмотрели положение hover для элемента, так я и не дергаюсь. А то было, что хотелось как лучше, а получалось как всегда
На счет Маркелова не знаю, к контенту лендинга не имею отношения
xzarxzes, спасибо.
-
Здравствуйте. Ссылка: http://whosmm.com/
Прошу оценить качество верстки в целом, а так же степень избыточности CSS кода. Указать на неэффективные решения при верстке того или иного блока. Мб какие - то CSS свойства целесообразнее было бы заменить другими.
Заранее благодарен всем отписавшимся.
-
Всем спасибо, проблему решил.
-
Надо для body прописать min-width.
Вообще что вы пишите - потренировались бы сначала на бесплатных макетах - и тут бы их на критику выложили.
margin: auto;
overflow: visible;
width: auto;
Вот это все лишнее, кроме margin: 0 auto; по сути
Также как и *, body {
border: 0;
margin: 0;
padding: 0;
}
боди через запятую избыточно - универсальный селектор * - применяет оформление ко всем тегам и к боди в том числе
Прописал min-width. В итоге полоса прокрутки стала сильно больше, и страница начинается с левого края. Нужно как то сделать, что б броузер не учитывал ширины боди. Код:
* { border: 0; margin: 0; padding: 0;}body { font: 20px Arial; min-width: 1920px;}header { background: url('../img/header_bg.jpg') no-repeat center top; min-height: 1241px; margin: auto;}header .inner_header { width: 1200px; min-height: 1241px; margin: auto;}header .inner_header_top { min-height: 215px; background: RGBA(58, 58, 116, .8); margin: auto; padding: 45px 0 0 0; overflow: visible;}header .inner_header_top .inner { margin: auto; width: 1200px; color: #fff;}header .inner_header_top .inner a.logo { display: block; float: left; color: inherit; text-decoration: none; font-size: 14px; text-transform: uppercase; text-align: center; width: 290px; line-height: 16px;}header .inner_header_top .inner a.logo span { display: block; font-size: 36px; font-weight: bold; padding: 0 0 7px 0;}header .inner_header_top .inner p.phone { display: block; float: right;}header .inner_header_top .inner a.phone span { display: block; font-size: 39px;}
Скрин:
-
Ха! Узнаю этот макет с фриланса! А как же то, что его надо сверстать адаптивно под все виды устройств и разрешений?)...
а он напишет, что "сверстал под все"
Нет, не скажу, заказчик знает, что будет на выходе. Мне главно эту проблему решить, поэтому попрошу обратить внимание на стартпост, и помочь советом
overflow: visible - это значение по умолчанию. Что прописываешь его, что нет - эффект одинаковый.
У заказчика возникнет вопрос - прокрутка на ноуте - это первое, что он спросит, когда будет рабочий макет. Спроси - его вообще устраивает, что прокрутка меньше 1200 пикселей будет?
Да устраивает. К тому же макет такой.
-
Ха! Узнаю этот макет с фриланса!
А как же то, что его надо сверстать адаптивно под все виды устройств и разрешений?)...
Мы поговорили с заказчиком. Под "адаптивно под все виды устройств и разрешений" он понимает просто кроссбраузерная верстка, которая во всех броузерах одинакова. Макет у него тоже 1, нету макетов под планшет, или моб. устройства.
-
CSS
*, body { border: 0; margin: 0; padding: 0;}body { font: 20px Arial;}header { background: url('../img/header_bg.jpg') no-repeat center top; min-height: 1241px; margin: auto; overflow: visible; width: auto; }header .inner_header_top { width: 1200px; min-height: 215px; background: RGBA(58, 58, 116, .8); margin: auto; padding: 45px 0 0 0; overflow: visible;}header .inner_header_top .inner { margin: auto; width: 1200px; color: #fff;}header .inner_header_top .inner a.logo { display: block; float: left; color: inherit; text-decoration: none; font-size: 14px; text-transform: uppercase; text-align: center; width: 290px; line-height: 16px;}header .inner_header_top .inner a.logo span { display: block; font-size: 36px; font-weight: bold; padding: 0 0 7px 0;}header .inner_header_top .inner p.phone { display: block; float: right;}header .inner_header_top .inner a.phone span { display: block; font-size: 39px;}
HTML
<body><header> <div class="inner_header_top"> <div class="inner"> <a href="/" title="" class="logo"><span>Animalhoods</span>Меховые зверошапки с доставкой по России и СНГ</a> <p class="phone"><span>8 (499) 390-85-71</span>Г. Москва, ул. Прянишникова, 23А</p> </div> <!-- END INNER --> </div> <!-- END INNER_HEADER_TOP --></header></body>
Привел полный вариант кода.
-
Здравствуйте. Верстаю макет сайта. У самого монитор в ширину 1024px. Размер макета в ширину 1200px. Для таких мониторов, как у меня должна появляться горизонтальная полоса прокрутки. Она появляется. Но в от в чем проблема. Есть общий блок footer.
header {
background: url('../img/header_bg.jpg') no-repeat center top;
min-height: 1241px;
margin: auto;
overflow: visible;
width: auto;
}который служит просто подкладкой и в котором есть фоновое изображение. Его ширина 1 920px. Оно отображается, приведу скрин:Но когда прокручу вправо:фоновое изображение тупо обрезается. Если менять масштаб, то обрезанная область появляется. overflow: visible; не помогает. В первый раз с таким сталкиваюсь, помогите пожаулйста решить.
-
Здравствуйте, подскажите пожалуйста. Область, выделенная красным - это отдельный div, как можно сделать, что б при наведении на пункт меню "Главная страница", div, выделенный красным менял свой background ?
Главное меню задается так:
<ul><div class="left"></div>
<li class="firstl" ><a href="/">Главная страница</a></li>
<li class="act3"><a href="/price/">Прайс</a></li>
<li ><a href="/stat-nashim-klientom/">Стать нашим клиентом</a></li
><li ><a href="/dlya-postavshikov/">Для поставщиков</a></li>
<li ><a href="/feedback/">Обратная связь</a></li>
<li style="background: none;" ><a href="/contact/">Контакты</a></li>
</ul> -
Ну дык margin: 0 2px; ?
Спасибо, помогло, а то уже засиделся, ничего в голову не лезет, а я с background-position колдовал
-
Здравствуйте, меня интересует такая возможность. На картинке приведен пункт меню в положении hover, в этом положении для пункта меню задается background-image повторяющаяся вдоль координаты X.
Повторяющейся картинкой заполняется полностью пункт меню от левого края до правого, как можно сделать так, что б по ширине заполнялся не полностью, а от левого края до правого, не доходя 1-2 пикселя до правого края ?
"Помогите мне с ..." — Как правильно оформить вопрос/проблему
in HTML Coding
Posted
В 3-м пункте правил опечатка.