serg_life
-
Posts
16 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by serg_life
-
-
Ну как бы преимущество в оптимизации. Лучше для поисковых систем.
Ну если футер нравиться то пусть будет
Я б еще рекомендовал что то придумать там где вход и форма поиска. Слева от входа много пустоты а форма поиска на мой взгляд великовата. Попробуй форму поиска уменьшить и поместить слева от входа. Думаю если помудрить можно будет картинку Осенняя распродажа выровнять по одной лини с картинками слева. Это мелочи но на глаз будет легче, и читаемость сайта улучшиться.
-
- Содержание по маркам: очень сжат, сверху и снизу какой то отступ нужен, да и текст (Лада Гранта, Лада Калина,Лада Калина 2, Лада Ларгус, Лада Приора, Нива) цвет не тот вообще. Сильно выделяется.- Почему не использовал header section nav ? Если начел верстать в html 5- В форме с опросом там радио кнопки нужно улучшать. Они не выровнены и без отступа.- footer Если честно такое чувство что на него просто забили. Дизайн footer очень слабый. Можно было еще поработать подобрать лучший фон. Копи слева иконки справа. Думаю был бы лучше вид.
-
scroll появляется при 1210px это плохо нужно уменьшать или адаптировать. В главных новостях у тя второй блок немного упал. Картинки должны быть на уровне по верху. А то как то одна выше вторая ниже. Там padding лишний сверху.
-
реально наложить...
Ну не придирайся к словам. Хотя что-то смешное есть
-
Однако, простота - сестра таланта
Мы не ищем легких путей когда учимся
) -
По большей степени пользуюсь таким методом если нужно по вертикали.display: table;display: table-cell;vertical-align: middle;По горизонталиtext-align: center;
margin: 0 auto;Все зависит от конкретной ситуации. Много где нужна ширина или высота конкретная, так же могут пригодится дополнительный div. -
Header должен унаследовать ширину body
да
следовательно фон должен размножаться до конца независимо появляется прокрутка или нета у body родитель - окно браузера
Это я уже понял
) -
Хоть я и считаю что header должен был размножаться до конца.
Т.е вы хотели, чтобы он наследовал свойства дочернего элемента(div), а не родителя(body)?
Нет с точность да наоборот. Header должен унаследовать ширину body, следовательно фон должен размножаться до конца независимо появляется прокрутка или нет.
-
Действительно - не понял
Но объяснять и разжевывать ничего не буду)) учитесь сами
хотя... http://joxi.ru/GrqMx7jia3pOrz
Ну вот теперь ясно
) Я просто width 100% не указывал. -
Так для header и не задана мин. ширина
Да ты прав, проблема решилась. Хоть я и считаю что header должен был размножаться до конца.
Я как то эксперементировал) и выяснилось, что если задать html display: table, то
html будет брать размеры не от экрана, а растянется на всю область)) я считаю это костылем
Не думаю что понял твое решение, но проблему не решило. Когда ставлю html display: table так все смещается влево и принимает ширину 1000px. Вообще не тот эффект что нужен был.
-
Пробывал, Без результата.
Наверняка не туда стили применял. Нужно именно на тег header, а не div с id #header. Это не баг, а нормальное поведение и фон повторяется до конца. На тег header повешен background, но ему не задана ширина, поэтому ширина подстраивается под его родителя body, который в свою очередь подстраивается под html. А html подстраивается под что? Html подстраивается под область просмотра, т.е. под окно браузера. Когда окно браузера становится меньше 1000px, то и тег header становится меньше 1000px, а div#header со своими 1000px выпирает за пределы тега header.
Я так и не понял с сообщения как ошибку исправить.
Вот самый простой пример кода.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>тест</title>
<style>
body{
width: 100%;
}
header{
border: 3px solid green;
background-color: #00f;
}
header div{
border: 3px solid red;
margin: 0 auto;
width: 1000px;
}
</style>
</head>
<body>
<header>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</header>
</body>
</html>
При ширине менее 1000px фон перестает размножаться. На сколько я понимаю header действительно принимает именно ширину браузера, но я так и не понял как такую ошибку избежать. Код очень простой о указал border что б было видно поведение. Может кто то решит проблему.
-
если у вас там нет media - то это хромовский баг. встречался с таким, на планшетах, покажите код
Не использовал media.
<header>
<div id="header">
<div id="top_header">
<div id="logo">
<a href="#"><img src="images/logo.png" alt="Лого"/></a>
</div>
<span>Открой мир кино с нами</span>
<div id="top_menu">
<ul>
<li><img src="images/line_menu.png" alt="линия"><a href="#">Кино</a></li>
<li><img src="images/line_menu.png" alt="линия"><a href="#">Сериалы</a></li>
<li><img src="images/line_menu.png" alt="линия"><a href="#">Афиша</a></li>
<li><img src="images/line_menu.png" alt="линия"><a href="#">Тексты </a></li>
<li><img src="images/line_menu.png" alt="линия"><a href="#">Рейтинги</a></li>
<li><img src="images/line_menu.png" alt="линия"><a href="#">Программы и шоу</a><img src="images/line_menu.png" alt="линия"></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="search">
<div id="auth">
<ul>
<li><a class="line_auth" href="#">Создать акаунт</a></li>
<li><a href="#">Войти</a></li>
</ul>
</div>
<div id="right_search">
<form name="my_form" action="#" method="post">
<div>
<img id="submit1" src="images/line_search.png" alt="линия">
<input type="submit" id="submit" name="send" value="Поиск">
<img id="text1" src="images/search.png" alt="фон">
<input type="text" id="text" name="text" value="Что будем искать)">
</div>
</form>
</div>
</div>
</div>
</header>
Ну для стилей только кусочек кину а то и так много кода
) Врят ли остальное влияет/*Стили для header*/
header{
background: url("../images/bg_header.png") left center repeat-x;
}
#header{
height: 88px;
margin: 0 auto;
width: 1000px;
}
Попробуйте для header{min-width: 1000px}
Пробывал, Без результата.
-
Здесь header это черная и синяя полоска, это как выглядит при разрешение 1000px и более. Все норм.
Проблема в том что при сжатии браузера меньше 1000px фон на header перестает размножаться когда появляется колесо прокрутки. Покажу на screen суть проблемы.
По логике он должен размножаться до конца, но почему то на скока я понимаю принимает ширину div id=header который находиться внутри header. По логике так быть не должно, да и структура не рушиться проблема только в в фоне. Загадка прям какая то. Кто то сталкивался с такой проблемой? Думаю причина какая то простая, просто опыта не хватает догнать.
-
Я так понимаю, что проблема в том, что поле поиска не получает фокус при клике. В этом случае у вас есть три пути:
1) Обернуть картинку в <label> - в этом случае по клику на него фокус будет передаваться соответствующему полю (которое будет указано в атрибуте for)
2) Отменить клики для этого блока - использовать правило pointer-events: none;, правда поддержка браузерами (ИЕ) оставляет желать лучшего.
3) Разрезать таки эту картинку на кусочки.
1) Попробывал первый способ все получается на картинку добавил свойство cursor text что бы был вид при наведении на текстовое поле. Но проблема в том что картинка то больше и как бы не очень красиво получается при наведении еще до поля курсор меняется. Но работает.
2) Это как раз тот способ который я искал, не знал за свойство pointer-events none; ну как и сказал в EI 10 и ниже не работает. В 11 и выше работает.
3) не вариант. Пробывал там получается левая часть картинки закрывает начало поля если по макету делать. Картинка то квадратная будет все ровно.
Спс. за ответ нашел что искал
)Тут гораздо проще делается.
Берёте, и делаете картинку которую я выделил зелёным цветом. Только без текста на кнопке и плейсхолдера. И ставите её на фон формы.
А сверху, то что выделено красным - ставите прозрачный инпут, с бэкграундом транспарент, и серым плейсхолдером. Ну и кнопку тоже прозрачной делайте, только текст чтоб был виден, и всё.
Да делал я уже в 6 утра как то не додумался, а потом когда написал и ложился спать то в голову пришла такая идея, что можно сделать фон а input наложить без фона. Но я сейчас еще в процессе обучения и не ищу легких путей, набираюсь опыта.
Может сверху на картинку просто положить input ?
Можно, но меня интересовал способ типа: (2) Отменить клики для этого блока - использовать правило pointer-events: none;)
Обучаюсь, ищу что то новенькое, набираюсь опыта.
-
Картинка посредине прозрачная, я наложил её на форму поиска с помощью position absolute
Налаживал и как изображение и как фон, проблема в том что при наложении форма не работает, потому что картинка сверху получается. А если под форму ложить то вид не тот.
Нужно как то наложить изображение сверху поиска но что бы изображение было видно но при этом не мешало форме. Можно её конечно разрезать и по кускам собрать но тогда получается левая картинка будет закрывать начало ввода текста в форму, короче писать чутли не с центра прийдется, очень некрасиво как то. Суть проблемы вроде описал, решение думаю должно быть.
помогите растянуть полосу на всю ширину блока
in HTML Coding
Posted
https://jsfiddle.net/e52yj6ne/5/
Немного меньше кода.