Неугомонный

Отредактирую 1 пост поставлю вопрос по другому

Как растянуть блок по размеру экрана а не так чтобы он улетал за экран? // CSS .dropdown { display: inline-block; } .dropdown-content { z-index: 1; display:none; position: absolute; background-color: #000; width: 100%; padding: 46px 24px 40px; max-width:1358px;; } .dropdown:hover .__open { background-color: #000; color: #4a4a4a; } .dropdown:hover .dropdown-content { display:block; } // HTML <div class="dropdown"> <a class="__open" href="#">Ссылка 4</a> <div class="dropdown-content"></div> </div>

Можно пример как это делается ?

Как из этого сделать .png изображения? , видел есть конвертеры онлайн, но че то не получается у меня правильно переместить в .svg файл данные <svg aria-hidden="true" style="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-user" viewBox="0 0 32 32"> <title>user</title> <path d="M15.782 0.381c-4.405 0-8 3.595-8 8s3.595 8 8 8 8-3.595 8-8c0-4.405-3.595-8-8-8zM15.782 2.667c3.17 0 5.714 2.545 5.714 5.714s-2.545 5.714-5.714 5.714c-3.169 0-5.714-2.545-5.714-5.714s2.545-5.714 5.714-5.714z"></path> <path d="M16 18.667c-8.515 0-15.619 5.867-15.619 13.333h2.286c0-5.999 5.858-11.048 13.333-11.048s13.333 5.049 13.333 11.048h2.286c0-7.466-7.104-13.333-15.619-13.333z"></path> </symbol> <symbol id="icon-search" viewBox="0 0 31 32"> <title>search</title> <path d="M14.76 0.483c-7.706 0-14.005 6.094-14.005 13.622s6.299 13.625 14.005 13.625c7.706 0 14.005-6.096 14.005-13.625s-6.299-13.622-14.005-13.622zM14.76 2.57c6.611 0 11.918 5.169 11.918 11.535s-5.307 11.538-11.918 11.538c-6.611 0-11.918-5.171-11.918-11.538s5.307-11.535 11.918-11.535z"></path> <path d="M23.009 22.336l-1.454 1.497 7.424 7.204 1.451-1.497-0.747-0.728-6.674-6.476z"></path> </symbol> <symbol id="icon-shop" viewBox="0 0 31 32"> <title>shop</title> <path d="M0.364 0.364v2.182h2.48l2.974 18.938 0.17 1.077 2.153-0.338-0.168-1.077-3.264-20.781h-4.347z"></path> <path d="M3.577 6.744l0.173 1.241 2.028 14.625h20.324l3.909-15.866h-26.435zM6.085 8.926h21.142l-2.835 11.503h-16.713l-1.594-11.503z"></path> <path d="M10.080 24.164c-2.054 0-3.75 1.683-3.75 3.736s1.696 3.736 3.75 3.736 3.747-1.683 3.747-3.736c0-2.053-1.693-3.736-3.747-3.736zM10.080 26.346c0.881 0 1.565 0.686 1.565 1.554s-0.684 1.554-1.565 1.554-1.568-0.686-1.568-1.554 0.687-1.554 1.568-1.554z"></path> <path d="M23.366 24.164c-2.054 0-3.75 1.683-3.75 3.736s1.696 3.736 3.75 3.736 3.747-1.683 3.747-3.736c0-2.053-1.693-3.736-3.747-3.736zM23.366 26.346c0.881 0 1.565 0.686 1.565 1.554s-0.684 1.554-1.565 1.554c-0.881 0-1.568-0.686-1.568-1.554s0.687-1.554 1.568-1.554z"></path> </symbol> </defs> </svg>

Поковырялся не та реализация кода..., спасибо за помощь пойду дальше искать от куда черпать базу

Как я понимаю widht и height 100% можно заменить на right:0; и bottom:0; , получу тот же эффект в совокупности с top: 0; и left:0?

Как всегда я % 80 смог сделать а дальше не тащу вообще. В общем как сделать чтобы "Кнопка" была внутри фиолетового контейнера но не помещая ее в <div class=main></div> ? https://jsfiddle.net/4Lepbdnr/

Спасибо

можно пример ?

Веб версия Мобильная версия Сам вопрос, как сделать для мобильной версии чтобы выпадало меню (MUSIC NEWS LABELS...) при нажатии на первую картинку справа , ведь картинка идет то за меню как я понял?

Спасибо, я понял все зависит от того где я расположу данный код в начале документа или в конце

Знаю что $(function() ждет полной загрузки страницы, у меня вопрос нужно ли оборачивать мой код в $(function() ? Код сам набросал а когда именно применять $(function() еще не понимаю $(function() { $('.dropdown').on('click', function () { if($(".dropdown-menu").css("display") == "none") { $(".dropdown-menu").fadeIn(500); } else { $(".dropdown-menu").fadeOut(500); } }); });

Спасибо, как-то так я и думал ))

еще такой вопрос, для основного дизайна я могу не использовать обертку @media только для адаптации ? если скажем так телефон планшет обернул в PX а под пк просто как обычно в css Без @media записывать?

Честно разбираюсь только с медиа и пытаюсь понять)), класса нет для экранов выше 600px так и оставлять, это не будет считаться ошибкой что класса нет для экранов 600 и выше ?

<style> .right { float: right; } @media only screen and (max-width: 600px) { .zzzz { display: none; } } </style> <div class="right zzzz"> // ... </div> Необходимо создавать класс zzzz для шаблона больше чем 600px если мне нечего будет вписать в него никаких параметров ?

Я понимаю что можно сделать так <header> <nav> <a class="" href="#">LOGO</a> <div style="float:right"> <a class="" href="#">Ссылка 1</a> или так <header> <a class="" href="#">LOGO</a> <nav> <a class="" href="#">Ссылка 1</a> Можно сказать что логотип это часть навигации и его помещать во внутрь <nav> или лучше его выносить отдельно перед <nav>?

Обернул я логотип в <nav> и возникла проблема когда применяю к ссылкам Ссылка1/Ссылка2 и т.д float:right они отображаются в обратном порядке <header> <nav> <a class="" href="#">LOGO</a> <a class="" href="#">Ссылка 1</a> <a class="" href="#">Ссылка 2</a> <a class="" href="#">Ссылка 3</a> <a class="" href="#">Ссылка 4</a> <a class="" href="#">Ссылка 5</a> </nav> </header>

Нашел решение на вопросы сама идея кому будет интересно, если я не ошибаюсь подобно "Slide" реализовано в гугл переводчике https://offirgolan.github.io/ember-burger-menu

Каким должно быть меню на чистом CSS или JS реализация кнопки анимации открыть/закрыть ?Вы скажете какой вариант выберешь такой и будет, я верстаю первый шаблон и для меня очень важно отталкиваться в правильном направлении, если можно плюсы и минусы вариантов кто понимает в этом или свой вариант1 на чистом css https://jsbin.com/yokic/edit?html,css,output2 за счет js (jQuery) https://codepen.io/katienazarova/pen/dKyEOy?editors=1100

Спасибо

Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?