swandev
-
Posts
681 -
Joined
-
Last visited
-
Days Won
17
Content Type
Profiles
Forums
Calendar
Store
Posts posted by swandev
-
-
17 минут назад, Coder-vasya сказал:
Друзья подскажите как написать скрипт. Заранее благодарен.
Должно вылазить окно "Введите имя"(вопрос), если строка пустая или была нажата кнопка отмена выходит сообщение "действие отменено".
Если введено любое другое имя кроме Василий выводит сообщение "Имя не найдено". Если имя введено правильно , выводит окно с вопросом "Фамилия?"
Если введена любая другая фамилия кроме Зайцев выводит сообщение "Фамилия не найдена". Если было введено Василий Зайцев то выводит сообщение "Здравствуйте Василий Зайцев"
Так?
var name, lastName; name = prompt('Введите имя'); if (name === '' || name === null) { alert('Действие отменено'); } else if (name !== 'Василий') { alert('Имя не найдено'); } else { lastName = prompt('Фамилия?'); if (lastName === '' || lastName === null) { alert('Действие отменено'); } else if (lastName !== 'Зайцев') { alert('Фамилия не найдена'); } else { alert('Здравствуйте ' + name + ' ' + lastName); } } -
4 часа назад, AlexProf сказал:
Пока разбирался, выяснил, что дело вообще не в таблицах
Не буду создавать ещё одну тему, спрошу здесь. У изображений есть какой-то отступ из-за которого размер блока больше чем размер самого изображения. При этом браузеры показывают, что внутренние и внешние отступы и у блока и у картинки равны нулю. А почему блок больше картинки, непонятно. Вот код страницы
<!DOCTYPE html> <html> <head> <title>Страница</title> <meta charset="utf-8"> </head> <body> <div style="border: 1px solid Red"><img src="image.jpg"></div> </body> </html>
Потому что <img> inline объект. Чтобы не было отступов нужен display: block для <img> или font-size: 0 для обертки
-
19 минут назад, DivMan сказал:
Есть такая проблема, при сужении сайта изображение уменьшается, то сама высота блока не изменяется и получается пустое место, как сделать, что бы блок тоже уменьшался и нижний блок в жёлтом фоне нормально подстраивался, прописать медиазапросы, для каждого пикселя?
https://jsfiddle.net/hqdd5two/
Можно так например https://jsfiddle.net/8spzgove/
Или так https://jsfiddle.net/aeqn87es/1/
-
1
-
-
Не советую hdd на 1тб за 3-3.5к как основной
Лучше доплатить немного и купить ssd на 128, этого вполне хватает для работы
-
1
-
-
Я работаю за macbook pro retina 13" середины 2014, доволен, до сих пор хватает
консоль, avocode\sketch, filezilla, atom, почтовый клиент, телеграм, скайп, браузер и т.д, вообще никаких проблем
-
1
-
-
Насколько старые айфоны?
Apple довольно долго поддерживает свои устройства. Последнюю на данный момент версию ios (и соответственно возможность установить последний сафари) поддерживают устройства начиная с 5го айфона (а ему уже 5 лет).
Если вам скидывают скрины с 4х айфонов, то это их проблемы, но точно не верстальщика. Таких пользователей немного, так что некоторые проблемы им можно оставить, как признак того, что пора бы обновиться.
А смотреть в сафари не имея устройства можно только в browserstack, но это не бесплатно : (
-
10 минут назад, VasyOK{!} сказал:
Кнопка не вмещается т.к. размер подключаемых шрифтов чучуть шире в разных браузерах. Но это поправимо.
swandev, а вы масштаб уменьшили до 80% ? полос нет по бокам?
Мне шлют скрины с айфонов и там тоже не как в нормальных браузерех на маленьких экранах. Собственно если в виндовом Сафари смотрю уменьшая размер окна - то и вижу, что их айфонах.
Да, 1365px ширину выставил(применился @media запрос), потом уменьшил масштаб до 80% и @media запрос не применился. Полос нет.
Вот как в айфоне (414x736px)
В хроме на десктопе так же ,если уменьшить ширину браузера
-
Safari под windows уже давно устарел, удалите его и забудьте про поддержку
В нормальном браузере все хорошо (кнопка только не вмещается)
-
21 час назад, Анонимный сказал:
Помогите корректно составить верстку. Есть готовый код ниже:
<div class="wrapper"> <div class="header"> HEADER </div> <div class="content"> <button> START </button> </div> <div class="footer"> AUTHOR </div> </div>
Нужно что бы у header класса была высота 30% окна браузера, у контента 60%, а у футера 10%. Кроме этого у них у всех должны быть вертикальные выравнивания. Почему-то ничего не получаеться. Не растягиваются блоки по высоте, растягиваются по контенту и в итоге не занимают все окно браузера! Если кто может написать корректный HTML/CSS код, напишите плиз! На крайняк можно использовать Bootstrap.
-
Так работает инлайн блок
Наверное только с помощью js можно сделать это
-
-
А у меня такой стартовый шаблон для верстки, к которому я привык.
Цитата├── config.json
├── package.json
├── vendors.json
├── gulpfile.js
├── yarn.lock
├── src/
├── images/
├── other/
├── favicons/
├── fonts/
├── scripts/
├── partials/
├──app.js // тут я пишу свой код
// еще сюда обычно добавляю кастомный bootstrap.js и другие скрипты плагинов с измененным исходным кодом
├── main.js //сюда иклудятся все плагины из node_modules и скрипты из partials/
├── styles/
├── partials/
├── variables.scss
├── mixins.scss
├── base.scss
├── header.scss
├── footer.scss
├── main.scss
...etc.
├── style.scss //cюда иклудятся стили плагинов из node_modules и все что находится в /partials
├── templates/
├── modules/
├── header.hbs
├── footer.hbs
├── layout.hbs
...etc.
├── pages/
├── index.hbs
...etc.Собирается все сюда
Цитатаbuild/
├── css/
├── style.css
├── js/
├── main.js
├── images/
├── favicons/
├── fonts/
├── vendors/
├── index.html
Клиенту передается архив, в котором build папка (с минифицированными стилями\скриптами\изображениями) и dev версия проекта со всеми исходными файлами, конфигами.
-
1
-
-
2 часа назад, LizzyEra сказал:
Мне нужно сделать блок с таким календарем и что бы внизу под календарем выводилось количество дней, а в самом календаре можно было выбирать диапазон дат, совсем не знаю как реализовать, в этом и весь вопрос)
Вот так? https://jsbin.com/yahuxapinu/edit?html,css,js,output
Плагин из примера https://chmln.github.io/flatpickr/
-
2
-
-
1 час назад, HiddenName сказал:
Спасибо за развернутый ответ и примеры с пояснениями. И пару вопросов: пиксели совсем не использовать, только проценты ? Какие сайты брать вместо лендингов, интернет магазины ?
Пиксели нужно использовать. Если нужен именно резиновый сайт, то проценты задаются только у тех блоков, которые должны растягиваться.
1 час назад, HiddenName сказал:Как накладывать скриншот верстки на макет ?
Можно плагин для хрома установить pixelperfect и накладывать скриншот макета на верстку
-
1. Нет ховеров у ссылок, кнопок. Нужно чтобы хоть какое-то взаимодействие было
2. Социальные кнопки в футере должны быть одинакового размера и формы.
3. <div class="main"> мне кажется лучше заменить на <main class="main"> и футер вынести из этого блока.
4. В блоке hero стрелочка должна быть частью ссылки LEARN MORE , а не отдельным элементом
5. Блок с ссылками app store и play market неправильно сверстан. иконка+ссылка+текст должны быть обернуты в див. И стрелочка должна быть частью ссылки.
Сейчас же все по отдельности в ряд. Иконка яблока и андроида должна быть задана через css, а не img
6. Цитата должна быть blockquote, а не див как сейчас
5 часов назад, HiddenName сказал:Хотел сделать сайт резиновым, но не получилось, хочу узнать почему. Когда проверяю на разных разрешениях (в консоли разработчика Google chrome) в съезжает влево почему так?
Чтобы он был резиновый нужно размеры задавать в %, а не px как сейчас
5 часов назад, HiddenName сказал:Может быть еще про классы очень много их у меня, как мне кажется+ имена не всегда правильные. Читал про БЭМ, интересная методология именования классов, но пока её не понял.
Имена классов нормальные, их не много. Наименование классов по БЭМу не такое сложное, как может показаться.
Вот возьмем пример из этого лендинга:
<div class="blog-lg"> <img src="img/photo-student.jpg" alt="students"> <span class="blog-lg-subtitle">Blog Post about something and someone</span> <p class="blog-lg-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramb specimen book.... <a href="#">Read more</a></p> </div>
может быть заменен на
<article class="blog-preview blog-preview--lg"> <img class="blog-preview__image" src="img/photo-student.jpg" alt="students"> <h4 class="blog-preview__subtitle">Blog Post about something and someone</h4> <div class="blog-preview__text"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramb specimen book.... <a href="#">Read more</a></p> </div> </article>
и соответственно
<div class="blog-sm"> <img src="img/photo-space-copy.jpg" alt="students"> <span class="blog-sm-subtitle">Lorem Ipsum is simply dummy text </span> <p class="blog-sm-text">Face it, by the time you make it through your third year of rotations, your mind is ... <a href="#">Read more</a></p> </div>
заменяется на
<article class="blog-preview blog-preview--sm"> <img class="blog-preview__image" src="img/photo-space-copy.jpg" alt="students"> <h4 class="blog-preview__subtitle">Lorem Ipsum is simply dummy text </h4> <div class="blog-preview__text"> <p>Face it, by the time you make it through your third year of rotations, your mind is ... <a href="#">Read more</a></p> </div> </article>
6 часов назад, HiddenName сказал:Стоит ли на моем скромном уровне смотреть в сторону фреймворков или сосредоточиться на изучении и понимании основ CSS ? Дальше не знаю, что еще спросить
.
Еще рано смотреть в сторону фреймворков. Изучи хорошо css, адаптивность. Флексбоксы, гриды и все такое. Верстай большее сайтов и сложнее выбирай, лендинги очень просты.
-
1
-
-
Может это поможет?
-webkit-font-smoothing: antialiased;
Или может вот это (плашка же с помощью translate выезжает)?
transform: perspective(1px) translateY(-400px);
Или так
transform: translateY(-400px) transform3d(0,0,0);
-
В 07/10/2013 в 11:36, ZI DAN сказал:
Вот такой получился сайт для художницы. Я сам очень не люблю тёмный фон, но здесь он был к месту, поэтому читаемостью пришлось пожертвовать в некоторой степени. Хочется услышать мнения других людей как относительно дизайна, так и вёрстки, юзабилити и т. д.
Дизайн мне не нравится, выглядит очень и очень несовременно
В 2017, еще и для художницы можно было бы что-то получше придумать
-
2 минуты назад, Скиф сказал:
Извини, не понял. Какой отступ сверху? Дальше идет браузерная строка.
У вас фиксированый navbar. У этого navbar'a есть какая-то высота, пусть будет 50px для примера. Под этим navbar'ом есть контент, не фиксированный, соответственно navbar на него никак не влияет. Судя по скриншоту от браузерной строки до контента под navbar'ом есть какой-то отступ, пусть будет 70px, поэтому у вас лишние 20 px, которые вы выделили красными полосками.
Возможно я что-то не так понял, нужен живой пример.
-
-
-
-
11 час назад, Скиф сказал:
Доброго. Проблема с элементом Bootstrap, а именно navbar. При добавлении элемента появляется негативный отступ до дальнейшего контента страницы. Как его убрать?
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="img/logo.jpg" height="50"></a> </div> <div class="collapse navbar-collapse" id="navbar-main"> <ul class="nav navbar-nav"> <li><a href="#href1">О системе<span class="sr-only">(current)</span></a></li> <li><a href="#href2">Отзывы</a></li> <li><a href="#href3">Фото</a></li> <li><a href="#href4">Карта</a></li> <li class="buy"><a href="#href5">Заказать</a></li> <li><p class="contact"> +38-063-000-00-00 / +38-067-000-00-00</p></li> </ul> </div> </div> </nav>
Далее сразу код
<div class="col-xs-12 intro"> <div class="intro-info"> <p class="intro-content">Ravelco - ни единого угона за 41 год. Американское качество.</p> <p class="intro-content">Закажите сегодня и получите скидку <em>1000 грн.</em></p> <button type="button" class="btn btn-default btn-transition">Заказать</button> </div> </div>
Navbar же фиксированный. Может его высота меньше, чем отступ сверху? Поэтому и негативный отступ
-
-
16 минут назад, IvanRu08 сказал:
Каюсь не пробовал. Увидел, что изображение увеличивается путем padding, что не подходит для изображений. Сейчас попробую, спасибо
Если открыть devtools, то можно заметить, что центральному слайду присваивается отдельный класс, Паддинг вам не нужен. Для всех изображений ставите например scale(0.7), а для центрального scale(1)
-
1
-
.
Оформление текста через <br>
in HTML Coding
Posted
Ограничение ширины обычно помогает. Иногда неразрывной пробел после предлогов нужно добавлять или в редких случаях между словами в некоторых словосочетаниях.