Search the Community

Доброе утро! Подсобите теорией: есть 3х страничный сайт. На главной странице есть меню, которое, по факту, одно и тоже для всех 3х страниц. Так вот, есть ли в css схожее свойство с атрибутом checked чекбоксов? То есть, при переходе с "главной" на, к примеру, "ваши заказы" сразу стал активен пункт меню с ссылкой "ваши заказы". Или это лучше реализовать на jquery? Извините за размытое описание проблемы, но нет возможности сейчас выложить код.

Доброго дня Прошу всех специалистов верстающих под iPad, iPhone оценить вёрстку и сказать что не так. Вводная - делал тестовое задание по вёрстке для одной компании. Задание такое: 1) Необходимо сверстать страничку по предложенному макету 2) Требования: - отображение на устройствах iPad, iPhone от 4 до 6+ - Только HTML + CSS ( без Javascript) - Как бонус — учёт разрешения экрана (2 файла для каждого изображения - для ретины и без) Результаты работы: Исходники: https://github.com/alexey-pod/awem-layout Макеты: https://github.com/alexey-pod/awem-layout/tree/master/mockups Результат работы: http://awem-layout.likeuse.ru/ Для поддержки ретины использовал вот эту штуку: https://github.com/alexey-pod/awem-layout/blob/master/css/retina.less Тестирование: iPad, iPhone устройств к сожалению нет - поэтому тестировал вот здесь: 1) https://www.google.by/webmasters/tools/mobile-friendly/ 2) http://quirktools.com/screenfly/ 3) http://lab.maltewassermann.com/viewport-resizer/ Ответ от компании: Некоторые мои соображения: В папке с шаблонами намешано много макетов с разными названиями, которые имеют незначительные отличия. В частности это панель с кнопками "News Support Letter". Панель располагается: Внизу https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%232.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPhone_v04.psd Вверху https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Portrait.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Album.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPad_v01.psd Есть вариант где нет панели вообще https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait%231.png https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%231.png Из-за того что я не понял как именно отличать ситуации в которых панель должна быть вверху, быть внизу, панели не должно быть - был выбран универсальный вариант панель вверху и он был свёрстан. Может быть именно в этом была моя ошибка. Также хочу обратить внимание - компания ничего не сказала про ретину. И я не знаю правильно сделал "ретинизацию" или нет. Может кто-то протестит на реальном девайсе и кинет скрин - буде благодарен. Заранее благодарен всем кто сможет подсказать мои косяки. Если бы мы работали через стол то я мог бы задать эти вопросы своему руководителю и переделать задание столько - сколько потребуется. Сейчас же - я не имею такой возможности поэтому надеюсь на помощь сообщества.

Добрый день! Имею вот такой нюанс https://jsfiddle.net/yqfyb014/2/ Не понимаю как при помощи CSS решить проблему с позиционированием. Так как я предполагал, что сделав отступ для первого элемента списка, я "паровозом" выровняю все остальные элементы. Но получилось, собственно, то, что на изображении. И хотелось бы понять-как достучаться до первого элемента каждой строки?

При масштабировании нижние картинки съезжают https://uzinouzi.github.io/asdasd/ - Сам сайт prntscr.com/h5bbfz - Тут проблема.

Добрый день! Вопрос довольно элементарный, но не вижу где и что я забыл, битый час уже воюю... Возникла проблема с позиционированием самого списка через text-align в родительском блоке. Установив всем блокам уже inline-block, что б уже наверняка... а все равно "мимо". Собственно, сам код https://jsfiddle.net/46at44tp/1/ Что я упустил?

Предлагаю оставлять в этой теме задачки для новичков, всякие задания по типу: Сделать калькулятор который будет отнимать и прибавлять от одного числа другое. И оставлять готовое решение сразу, что бы если возникают проблемы можно было решить.

Всем привет, помогите, пожалуйста, с идеями верстки следующего :

Всем привет! Давно сам не просил помощи и сам не советовал. Но вот настал момент, когда я застрял на простой задаче. Есть стандартная сетка бутстрап. Верстка примерно такая https://codepen.io/Schamil74/pen/QqYEGY Есть блок .text1(выделен цветом и подписан), который нужно растянуть за контейнер. Как лучше сверстать ? Сейчас куском за контейнером блок - .row_green

Долго бился получил такой код: <div style="background: black;width:100%;height:100%;margin: auto; text-align: center;position: absolute;"> <img align="top" src="/images/video.jpg" width="700" height="394" alt="Video" style="width:100%;height: auto;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;" /> </div> выглядит так но на телефоне растягивает?

Доброе утро! Столкнулся с ситуацией: нужно отцентрировать изображение(прижать его по оси х к левому краю, и по оси у по центру). Решил попробовать центровку через vertical-align. Задал родительскому блоку и дочернему Display: inline-block. Задал vertical-align: middle самому изображению. Но "чуда не произошло". Насколько я понимаю это свойство задается самому блоку, который центрируем, не родительскому? Но где результат тогда? Извиняюсь что без кода-инета на рабочем компе нет.

Сразу извиняюсь если не туда, просьба в таком случаи закинуть куда нужно тему. Большая просьба скинуть макеты для верстки, только на html и css, знакомый попросил помощи в изучение, и считая правильным учиться именно на практике (прочитав теорию немного конечно) Спасибо всем за помощь.

по центру что бы при изменении окна она сдвигалась в центр? Извините за глупый вопрос, новичок просто.

Нужно сделать расстояние между фотками, но если я добавлю margin-left вся дальнейшая адаптивность катиться в тартарары. https://jsfiddle.net/4uc2xLqz/2/

Добрый день! Подскажите каким способом правильней будет отцентрировать изображение(лого сайта) в header - e. Более конкретнее меня интересуют: центрировать сам блок-родитель с изображением, или само изображение? И если само изображение - пользоваться свойствами position и margin? Flex не предлагать. Хочу без него разобраться. В нем все просто на этот счет.

Вопрос в следующем: При нажатии на кнопку создается элемент "entireDrink ", в который добавляется input-картинка и span-текст, "entireDrink " получает тег "one" в котором указан параметр "White-space: nowrap;". При повторном нажатии на ту же кнопку меняется span-текст, а при нажатии на другую добавляется еще один такой же элемент и т.д. Мне надо, чтобы в окне div эти элементы переносились на новую строку, но не разделялась картинка с текстом, а получается, что "entireDrink "s просто множатся по оси-x. Если добавлять без White-space: nowrap, то все элементы переносятся отдельно: картинки и тексты. В другом месте, созданном заранее в html это работает, т.е. узлы с тегом "one" переносятся на новую строку сразу со всем содержимым. Помогите, пожалуйста, разобраться. Заранее спасибо. Ниже на скриншотах: 1) заполнение без "White-space: nowrap;" 2) С "White-space: nowrap;" Вот кусок кода:

Люди, помогите пожалуйста с оптимизацией загрузки сайта. Дали заказ на верстку посадочной страницы , я только учусь верстать и знаю что код мой очень баговый но как говориться на ошибках и учатся я перелапатил весь интернет но толком никакой информации не нашел. Проблема в чем , сайт крупной строительной компании ,и у этих ребят ну очень много работ, все они предоставлены в картинках, их там наверное под тысячу , я все сделал но сайт очень долго теперь открывается и это не удивительно учитывая такое количество картинок , как мне так сделать что бы сайт открывался быстро ? я решил сделать прелоудер но это не выход конечно же . Помогите , вот ссылка на сайт http://makhovitskii.ru/works/n-design

Всем привет! Вопрос по #svg ! Нужно поделить екран на 4 треугольника(как на картинке, ссылка на гугл диск с картинками и сами картинки снизу). В этих треугольниках должна быть картинка и пару строк контента, ну и наведение работать должно. Пробовал крутить блоки, но посмотрев, что адаптивность умирает — решил пойти через свг, но так как не шарю в viewBox и point`ах застрял((. Если у вас есть другие варианты решения, с радостью жду! Заранее спасибо! ССЫЛКА НА ПАПКУ С КАРТИНКОЙ: drive.google.com/...OB17Nn6PExYTluN0lVcm1xOW8 а также ФАЙЛЫ САЙТА: drive.google.com/...OB17Nn6PExTUdFODNXYzRNOTA ——————————————HTML————————————————— <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="svg_1"> <svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#9E2929" points="0,100 50,0 100,100"/> </svg> <p class="ffggtt">ывмвыывп<p> <svg class="svgshka_2" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#492121" points="0,100 50,0 100,100"/> </svg> <svg class="svgshka" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#492121" points="0,100 50,0 100,100"/> </svg> <svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#9E2929" points="0,100 50,0 100,100"/> </svg> </div> </body> </html> —————————————-CSS——————————————— * { height: 100%; margin: 0; padding: 0; } .svg_1 { width: 100%; height: 100%; box-sizing: content-box; } .svg_1 svg:first-child { width: 100%; height: 50%; display: block; transform: rotate(180deg); } .svg_1 polygon:hover { fill: #C53737; } .svg_1 svg { width: 100%; height: 50%; display: block; } .ffggtt { position: absolute; z-index: 9999; left: 50%; }

We’re looking for a new team member to join our integration team. You will help our customers with the full circle of our commenting system integration. The work journey begins with creating site layouts to demonstrate look and feel of our comments on the customer site. As a technical writer, you will create documentation, user manuals and knowledge base. As an integration engineer, you will help customers to solve the issues that arise during the integration. REQUIREMENTS 1+ experience with HTML5, CSS3, jQuery 1+ experience with CMS (any of following: WordPress, Joomla, Drupal, Blogger etc.) Bachelor / Student of Computer Science Faculty Writing technical documentation/knowledge base/user manuals will be a huge plus Providing support to clients in the process of installation/integration of our product English (writing / speaking): Advanced CAPABILITIES explore different cms work with the rapidly developing project CONDITIONS remote work working in shifts (first shift Ukrainian timezone, second shift US timezone) You will be able to improve your skills by learning new technologies in working time daria.herasymova@solidopinion.com

На сайте есть главное меню (где полоса поиска по сайту) и оно должно прилипать к экрану при прокрутке страницы. В HTML-файле на компьютере это работает, но на хостинге перестает, хотя это просто вёрстка. HTML: ... <body> <div class="box box-top sticky"> <div class="container"> <div class="menu_main"> ... </div> </div> </div> </body> ... CSS: .sticky { position: sticky; top: 0; z-index: 11000; }

Добрый день. Столкнулся с неожиданной проблемой. На айфонах блоки сайта наезжают друг на друга, на винде и андроиде всё работает нормально. Вьевпорт указан. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> На айфонах сайт выглядит так: Должен выглядеть вот так: Задачу осложняет то что у меня нет iOS устройств чтобы можно было протестить, а все эмуляторы, какие пробовал, выдают что всё верно. Кто-нибудь сталкивался с подобным? В чем может быть проблема?

Добрый день. Есть форма(опросник), переменных на 200, подскажите как можно ее заполнить на компьютере1, и открыть на компьютере2 уже заполненную? Может быть есть человеческий способ, решения данной проблемы? Вижу только вариант 1)сохранить все переменные в mysql 2)на втором компе вытащить из БД 3)воссоздать страницу HTML через echo( куча чекбоксов с oncliсk показывающими дивы, которые замучаюсь переписывать с block на none и наоборот).

Здравствуйте. Оцените пожалуйста данную верстку. Судить строго! https://alex2033.github.io/ Использовал: сетку с поддержкой флексов (Flexbox Grid) На данный момент пока самый сложный макет, который верстал. Реализованы: - слайдеры - плавные переходы по ссылкам на якори - адаптивное меню Toggle(специально верхнюю часть хедера делал через флоаты, т.к. с флексами Toggle несколько конфликтует) - табы - scroll up - всплывающие окна и прочее

Добрый день. Есть необходимость свертсать слайдер на главной странице: 1) пролистывание на 1 страницу осуществляется по наведению мыши на текущий слайд т.е. 1 наведение 1 слайд; 2) пролистывания с эффектом fade (один тухнет другой появляется) Все остальное время слайдер стоит просто. Попробовал написать использую bootstrap4 carousel, но столкнулся с тем что я не знаю как сделать эффект fade на нем, а если и получалось то текущий слайд резко исчезает, а новый появляется медленно и еще почему то при наведении на последний слайд курсора пролистывание идет через первый слайд (он показывается, но только на короткий промежуток времени) на jsfiddle код работает почему то как часы, но не у меня хотя мой же. Решил использовать swiper так как пользовался ранее, все замечательно работает, но косяк с позиционированием элементов. текст на слайдах заходит за контейнер в котором он находится и просто исчезает (в мобилках в основном). Ссылки на jsfiddle соответственно на карусель, второй на свипер. https://jsfiddle.net/AShukilovich/aqyrj8xz/2/ https://jsfiddle.net/AShukilovich/8kvo4qwm/1/ (почему то не хочет свипер подгружаться, на локалке все корректно)

<!--Таблица на диве--> <div class="table"> <div class="row"> <div class="cell cell-1">1</div> <div class="cell cell-2">2</div> </div> <div class="row row-2"> <div class="cell cell-3" rowspan="2">3</div> <div class="cell cell-4">4</div> </div> </div> /*——css реализация—————*/ .table{display: table; border: 1px solid silver; padding: 10px;} .row{display: table-row; border: 1px solid silver; padding: 10px;} .cell{display: table-cell; border: 1px solid silver; padding: 10px;} подскажите как склеить ячейку 3 и 4? Спасибо всем за помощь!

Когда открываешь сайт на iphone, размер окошко инстаграм отображается с ошибкой, окошко больше экрана, появляется прокрутка вправо, на остальных устройствах все хорошо, помогите плиз