Search the Community
Showing results for tags 'css'.
-
Ищу работу. Верстаю страницы любой сложности из psd макетов. Владею адаптивной вёрсткой, а также css3/javascript/jquery анимацией. Сделаю Ваш заказ быстро, дёшево, адаптивно, кроссбраузерно. Email: churilov2312@gmail.com Facebook: https://www.facebook.com/profile.php?id=100019043504185&ref=bookmarks Так же можете просто писать мне в личку
-
Всем привет! Столкнулся со следующей проблемой: Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство transform: rotate(-90deg); во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана. Итак, вот исходный код файлов: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>Туризм</title> </head> <body> <div class="container-fluid turism_main"> <div class="row"> <div class="company-name"> <p>LuckyFox</p> <p>Travel</p> </div> <div class="aside_main col-xs-12"> <a href="#"><img src="img/afterparty.png" alt=""></a> </div> </div> <div class="aside-content"> <div class="aside-contact"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами </div> <div class="aside-mail"> <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться </div> <div class="aside-calendar"> <a href="#">Календарь</a> </div> <div class="aside-lang"> <span class="active">EN</span> / RU </div> </div> </div> </body> </html> А вот здесь style.css: .turism_main { background: gray; background-size: cover; height: 100vh; width: 100vw; color: #fff; position: relative; } .company-name { font-size: 2em !important; letter-spacing: 2px; opacity: .7; position: absolute; right: 45%; left: 45%; text-align: center !important; display: block; line-height: 1; margin-top: 15px; width: 200px; } .aside_main { text-align: right; padding: 0; } .aside-content { z-index: 999; position: absolute; right: -195px; top: 400px; transform: rotate(-90deg); font-size: .8em; background: black; } .aside-content div, .aside-content a{ display: inline-block; color: white; } .aside-content i { padding-right: 10px; color: #e9ba02; font-weight: bold; } .aside-contact, .aside-mail { padding: 5px 10px 5px 10px; border: 1px solid white; margin-right: 20px; } .aside-calendar, .aside-lang { margin-left: 20px; } Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет. Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять. И еще есть один вопрос: Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко... Еще раз повторю задачу: Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ... Как быть? Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...
-
Добрый вечер. Создал свой первый адаптивный сайт. Оцените пожалуйста! https://alex2033.github.io/ Есть несколько вопросов, которые возникли, пока верстал: 1) На телефоне при нажатии на любую ссылку возникает синее выделение на полсекунды,можно ли это как-то убрать или это стандартная тема для телефонов? 2) Не считается дурным тоном прописывать колонки бутстрапа следующим образом:col-md-3 col-sm-2? Вопрос к тому, что при небольших разрешениях я хочу, чтобы в портфолио в строку отображалось не четыре работы, а две например. 3) Стоит ли в секции, где представлены работы, делать наложение темного блока на изображение с текстом и иконкой плюса с помощью background-image, притом, что возникает необходимость прописывать для ховера !important? 4)Нужно ли прописывать медиа-запросы для нестандартных разрешений? Например, у меня в коде есть: min-width: 600px and (max-width: 768px) Стоит ли это прописывать?
-
Всем привет! Я начинающий верстальщик ищу работу, постоянную или на один проект. Удаленно. Умения: HTML5/CSS3; SASS, Bootstrap 3; JavaScript & jQuery (базовый уровень); Фиксированная\Адаптивная\Резиновая - верстка; Кроссбраузерная верстка; Понимание модульной верстки; При написании HTML кода соблюдаю семантику; Именование классов по методологии БЭМ; Навыки работы c веркторной графикой в формате SVG Поскольку у меня нет портфолио я не могу взять заказ на фрилансе, а в моем городе очень мало студий где новичку можна устроится на работу. Скажите с такими навыками можна взять заказ или устроится на работу? Сделаю для вас верстку Могу сверстать бесплатно, для того чтоб пополнить свое портфолио Готов на постоянное сотрудничество, если понравится мое исполнение. Мои контакты: e-mail: andrii.boda@gmail.com skype: +380999470645 vk: https://vk.com/id180852321
-
Помогите корректно составить верстку. Есть готовый код ниже: <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.
-
Здравствуйте. Верстал макет, нужно было подключить табы(первый раз с ними работаю). Подключил, вроде все как надо сделал, ничего не произошло. Решил в отдельном файле проверить,в итоге все равно ничего, уже голова не варит, мб я что-то очевидное не вижу? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> .wrapper .active { color: red; } .tab_item { display: none; } .tab_item:first-child { display: block; } </style> </head> <body> <div class="wrapper"> <div class="tabs"> <span class="tab">Вкладка 1</span> <span class="tab">Вкладка 2</span> <span class="tab">Вкладка 3</span> </div> <div class="tab_content"> <div class="tab_item">Содержимое 1</div> <div class="tab_item">Содержимое 2</div> <div class="tab_item">Содержимое 3</div> </div> </div> <script> $(".tab_item").not(":first").hide(); $(".wrapper .tab").click(function() { $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active"); $(".tab_item").hide().eq($(this).index()).fadeIn() }).eq(0).addClass("active"); </script> </body> </html>
-
Периодически нужна верстка шаблонов сайтов файло обменников (demo), примерно в количестве 10 страниц. Нужен человек с опытом. Писать в ЛС.
-
Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: frontendpavel@gmail.com
-
Как реализовать подобное через border-radius или другие варианты решения?
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FlexBox</title> <style> body { padding: 0; margin: 0; } .container { position: absolute; background: red; width: 40%; word-break: break-all; padding: 5px 5px; margin: 60px auto 0 5%; } .lol { width: 400px; height: 400px; background: black; margin: 7.1% auto 0 50%; } </style> </head> <body> <div class="container"> <span> Husbands ask repeated resolved but laughter debating. She end cordial visitor noisier fat subject general picture. Or if offering confined entrance no. Nay rapturous him see something residence. Highly talked do so vulgar. Her use behaved spirits and natural attempt say feeling. Exquisite mr incommode immediate he something ourselves it of. Law conduct yet chiefly beloved examine village proceed.On am we offices expense thought. Its hence ten smile age means. Seven chief sight far point any. Of so high into easy. Dashwoods eagerness oh extensive as discourse sportsman frankness. Husbands see disposed surprise likewise humoured yet pleasure. Fifteen no inquiry cordial so resolve garrets as. Impression was estimating surrounded solicitude indulgence son shy. </span> </div> <div class="lol"> </div> </body> </html> Почему когда я задаю чёрному блоку отступ, красный съезжает вместе с ним? Как мне их выравнить по одинаковому отступу, для адаптации под все разрешения экрана?
-
Здравствуйте. Я начинающий верстальщик, и, в принципе, могу сверстать сайт по макету с нуля. Но я понятия не имею, как происходит наполнение моего сайта контентом, кто этим занимается, и какова моя роль как верстальщика в этом процессе. Должен ли я каким-то специальным образом подготавливать свою верстку, или это уже вне моей компетенции? И если да, то что конкретно я должен знать об этом, как простой верстальщик? С чего начать и где копать?
-
Здравствуйте. Прошу помочь в решении следующей задачи: Имеется родительский элемент со свойством clip-path и дочерний элемент с анимацией: Для примера: HTML <div id="logoimage-waves"> <div id="waves-animated"></div> </div> <svg> <clipPath id="WavesPolygon"> <polygon points="0 0,95 0,95 8,80 5,60 10,40 15,20 20"> </polygon> </clipPath> </svg> CSS #logoimage-waves { width: 100px; height: 100px; clip-path: url("#WavesPolygon"); -webkit-clip-path: polygon(0px 0px,95px 0px,95px 8px,80px 5px,60px 10px,40px 15px,20px 20px); position: absolute; } #waves-animated { width: 100px; height: 100px; position: absolute; background: url(/images/waves.png) no-repeat; animation: waves-animation 40s; } @keyframes waves-animation { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } Вопрос следующий: В Firefox всё работает как надо, дочерний анимированный элемент обрезается с помощью свойства clip-path родительского элемента. Но в других браузерах (проверял в Chrome 55 и Opera 41) обрезка не работает и элемент показывается полностью. Причём, что важно, это происходит только в том случае, если дочерний элемент анимирован с помощью свойства transform, а если анимируется другое свойство, например margin, то обрезка работает во всех браузерах. Короче говоря: дочерние элементы анимированные с помощью transform не обрезаются с помощью clip-path родительского элемента в Хроме и Опере. В общем задачка та еще. Второй день пытаюсь решить ) Благодарю за внимание! -
Всем привет. Вопрос: как сверстать данную секцию? prntscr.com/fr8b96 Заранее спасибо за ответы. Как сделать что бы иконка была слева, а текст справа я уже знаю. А вот как сделать это все дело в ряд до меня не доходит Возможно просто недостаточно знаний для этого.
-
Всем привет! Такая ошибка - при сохранение стилей в основном файле sass все отлично, а вот если подключать отдельные файлы, например, _header.sass при сохранение выскакивает ошибка - Autoprefixer: Missed semicolon! Точка с запятой все стоит нормально, компилит если несколько раз нажать сохранить, но всегда выскакивает эта ошибка! Вот моя сборка: https://paste.ofcode.org/sLuKmekW88cFusdQPeFaPV ! Помогите пжл)
-
Добрый день. Работаю с готовым макетом, не могу поправить страницу так, чтобы текст был разбит на две колонки. Помогите, пожалуйста. Юзал вот что: <style type="text/css"> * { margin: 0; padding: 0; } p { padding: 10px; } #left { position: absolute; left: 0; top: 0; width: 50%; } #right { position: absolute; right: 0; top: 0; width: 50%; } </style> - хотя говорят, что это совсем не оптимальный вариант... Другого не знаю. В общем, так или иначе текст плывёт - то мимо блока, то наезжает на всё. Игрался с absolute, fixed и т.д. - не помогает, никак не могу попасть в нужное место. Страницу с кодом и картинку примерной разметки прилагаю. Задача простая: текст в теле должен быть двухколоночным. Если нужен CSS, приложу. Спасибо. contacts.html
-
Файл html не видет файл css в той же папке, хотя файл image из той же папки подключается. В третьем коде при выводе в браузер высвечивается тег <р>.
-
Необходимо, чтобы реагировал на клик сначала внутренний блок (CONTENT), а далее уже родительский (FIXED) Как это можно реализовать? Ссылка https://jsfiddle.net/ux7gknhk/1/
-
Некорректно работают кнопки left и right. Иногда right вообще перестаёт работать, если нажимать left. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> .slider { border: 2px solid black; width: 300px; height: 60px; overflow: hidden; } #MySlider { position: relative; width: 400px; } #MySlider img { width: 60px; height: 60px; float: left; } #left { position: absolute; top: 205px; } #right { position: absolute; left: 253px; top: 205px; } </style> </head> <body> <div class="slider"> <div id="MySlider"> <img src="1404914279_maxresdefault.jpg" alt=""> <img src="1404914279_maxresdefault.jpg" alt=""> <img src="200596402_fabdd7acef8cf8015b45af8d81a8b396_800.jpg" alt=""> <img src="1404914279_maxresdefault.jpg" alt=""> <img src="200596402_fabdd7acef8cf8015b45af8d81a8b396_800.jpg" alt=""> <img src="1404914279_maxresdefault.jpg" alt=""> </div> <button id="left">LEFT</button> <button id="right">RIGHT</button> </div> </body> </html> var tor = 0; document.getElementById('left').onclick = left; //ВЛЕВО function left() { var any = document.getElementById('MySlider'); tor = tor - 60; if (tor < -360) { tor = 0; } any.style.left = tor + 'px'; } document.getElementById('right').onclick = right; //ВПРАВО function right() { var any = document.getElementById('MySlider'); tor = tor - 60; if (tor < -300) { tor = 0; } any.style.right = tor + 'px'; } Как исправить их неправильную работу? В чём ошибка...
-
Почему margin не отодвигает h2 от верха родительского элемента, как положено, а добавляет ему отступ, как показано на картинке?
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> .text-jquery { margin: 0 0 0 30px; transition: 4s; } h1 { position: relative; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button id="as">Посчитать!</button> <button id="lol">Сместить!</button> <button id="lik"></button> <h1>LOL</h1> </body> </html> Как мне сделать в jquery, чтобы при каждом нажатии на кнопку с id="lik" у меня h1 смещался влево на 15px?
-
Здравствуйте. Я веб-разработчик, занимаюсь написанием современных динамических сайтов, сайт, блог и интернет магазин. В реализации использую три движка Joomla, WordPress и Opencart. В зависимости от задачи, выбирается один из этих движков. Языки программирования: HTML, CSS, Javascript, PHP Фреймворки: LESS, SASS, Bootstrap, jQuery Движки (CMS): Joomla, WordPress, Opencart Минимальный вариант, готовый сайт за 20$ • настройка понравившегося шаблона для CMS • установка дополнений и их настройка (плагины, модули, компоненты) • привязка хостинга к домену • установка сайта на хостинг • настройка хостинга Другие работы: • написание шаблона • правка шаблона • натягивание шаблона на движок • установка и настройка дополнительных компонентов для движка • установка ваших скриптов на сервер • и другие работы... Обращайтесь. Site: http://rocketusd.ru/napisanie-sajta Email: flagmanfbe@gmail.com Skype: live:flagmanfbe_1 Всем удачи в достижении своих целей!!!
-
Добрый день! Подгружаю шрифты с google fonts, имя шрифта Fira Sans (и причем он у них отображается корректно), но когда я его подгружаю он выглядит так как будто избитый. Привожу 2 скриншота: 1. Как выглядит шрифт на google fonts 2. Так выглядит у меня Почему так получается? Все эти манипуляции я провожу в браузере Firefox.
-
Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> input { position: relative; transition: all ease 1s; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button>Посчитать!</button> <button id="lol">Сместить!</button> </body> </html> И его скрипт: $('document').ready(function() { $('button').on('click', function(){ var value1, value2; value1 = $('#val1').val(); value2 = $('#val2').val(); value1 = parseInt(value1); value2 = parseInt(value2); value3 = value1 + value2; alert(value3); }); $('button#lol').on('click', function() { $('#val1, #val2').css( { border: '2px solid red', left: '50px' } ); }) }); И первая проблема: при нажатии на кнопку "Сместить!" у меня вылетает алёрт со значением "NaN", а потом работает сам скрипт. И вторая: почему в коде не работает плавное смещение вправо? В html задал параметр стиля, но плавного перехода нет. Только плавная смена цвета. Как исправить NaN и плавный переход? Если возможно, объясните поподробнее.
-
Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #e8ece7; } .menu { position: absolute; background: #b13224; border-radius: 5px; top: 90px; left: 450px; } .menu a { display: block; text-decoration: none; background: #b13224; color: white; padding: 7px; margin: 0; } .menu a:hover { background: #383838; } .menu ul { width: 958px; height: 33px; list-style: none; font-size: 0; } .menu ul li { display: inline-block; font-size: 16px; } h1 { position: absolute; top: -5px; left: 450px; display: inline-block; } h1:before { content: ''; width: 48px; height: 56px; background: url(gold-logo.jpg) no-repeat center center; background-size: 48px 56px; display: inline-block; } #polosa { position: relative; background: red; } .slider { overflow: hidden; height: 38px; padding: 4px; border: 2px solid black; position: absolute; top: 506px; left: 900px; font-size: 36px; } </style> <script> document.getElementById('slider-top').onclick = slider; var top = 0; function slider(){ var polosa = document.getElementById('polosa'); top = top - 256; if (top < -768) { top = 0; } polosa.style.top = top +'px'; } </script> </head> <body> <h1>Xman<font color="red">Bank</font></h1> <div class="menu"> <ul> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a href="">Our services</a></li> <li><a href="">Deposits</a></li> <li><a href="">FAQs</a></li> </ul> </div> <div class="slider"> <div id="polosa"> <li>Привет</li> <li>как</li> <li>у тебя</li> <li>дела?</li> </div> </div> <button id="slider-top">TOP</button> </body> </html> В скрипте в окне разработчика браузера ошибка: "cannot set property onclick of null". Как её решить?
-
Мир вам! Начинающий верстальщик сделает вёрстку сайта бесплатно, по вашему psd макету, с возможностью добавить в портфолио. Знаю: html5, css3, адаптивную вёрстку, могу применять готовые скрипты на jQuery. Пишите на почту: gaskprogramming@mail.ru
