Search the Community
Showing results for tags 'html css'.
-
Публикация последних видео с нескольких каналов на сайт
qqruz posted a question in Web-site Development
Мне нужен код для автоматической публикация последних видео с нескольких каналов ютюб, что бы они шли последовательно. Я перерыл весь интернет и нечего не нашел, сам тоже пытался написать, но из-за слабого знания языка и малого количества видео не могу. Надеюсь на чью-то поддержку. -
Здравствуйте! Недавно ко мне закрался вопрос: а для чего столько людей изучают html, css, и т.д? Какова цель? Например у меня цель-научиться создавать действительно качественные сайты, или попробовать себя в качестве фрилансера. Напишите пожалуйста, для чего вы здесь, какая цель изучения html и css, и еще напишите пожалуйста, кто натолкнул вас на мысль изучать основы верстки сайта. Мне действительно интересно.
-
Здравствуйте! Нужна помощь хорошо разбирающихся людей в верстке. Написал часть сайта (html, css) адаптив. На сайте только шапка, поисковая форма, вход и корзина. Подскажите, что я сделал не правильно в коде. Какими способами можно реализвать форму поиска с кнопкой, вход, и корзину. Я понимаю что много ошибок, хоть код и не большой. Буду благодарен за любой отзыв и разбор. Спасибо!!! ссылка на сайт — u1071267.isp.regruhosting.ru
-
Здравствуйте. Верстаю макет, но чтото не так. Подобные верстал раньше, все было хорошо, даже сверяю, все чуть ли не под копирку написал. Но в Этом коде почему-то строки в меню слиплись и не могу их раскинуть. на рисунке как должно быть, и как выходит. Что не так делаю? Html: <div class="container"> <header class="header"> <div class="header-item"> <a href="#"><h1 class="logo">Bouncy</h1></a> <nav class="navbar"> <ul class="menu"> <li><a href="#">Hello</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Team</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </div> </header> </div> Css: .header { width: 1366px; height: 737px; background: url(../i/header.jpg) no-repeat; } .header a { text-decoration: none; } .container { width: 1366px; margin: auto; } .header-item { display: flex; flex-wrap: wrap; justify-content: space-around; } .logo { text-transform: uppercase; color: #ffffff; } .navbar { margin-top: 16px; } .menu { display: flex; justify-content: flex-end; list-style: none; } .menu a { color: #ffffff; }
-
Кастомный радиобаттон Как правильно задать :hover и :focus?
plarfox posted a question in HTML Coding
Здравствуйте, помогите разобраться, делаем кастомные радиобаттоны, скрываем те что по умолчанию, с помощью span рисуем новые (псевдокласс :before для состояния отмеченности), стилизуем поведение в разных состояниях, :hover :focus :checked Проблема в том что после задания стилей для :focus (которые передают обводку со скрытых радиобаттонов) эта обводка отображается не только после использования tab и нажатий с клавиатуры, но и при нажатии мышкой. В общем цель в том что-бы обводка от фокуса появлялась только при манипуляции с клавиатуры, а при нажатии с мыши и разных состояний (:hover :checked) ее не было , для них свои стили P. S. Изучаю пока-что HTML и CSS, надеюсь это можно сделать без Javascript <ul> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="one" name="radio"> <span class="radio-indicator"></span> Радиокнопка 1 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="two" name="radio"> <span class="radio-indicator"></span> Радиокнопка 2 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="three" name="radio"> <span class="radio-indicator"></span> Радиокнопка 3 </label> </li> </ul> .visually-hidden input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); } .filter-option { position: relative; margin-bottom: 25px; padding-left: 38px; } .filter-option label { cursor: pointer; } .radio-indicator { content: ""; position: absolute; top: -3px; left: 0; width: 21px; height: 21px; border: 4px solid #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-input-radio:checked + .radio-indicator::before { content: ""; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; background-color: #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-option:hover, .filter-option:hover .radio-indicator, .filter-option:hover .radio-indicator::before { color: #000000; opacity: 1; } .filter-input-radio:focus + .radio-indicator { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; opacity: 1; } .filter-input-radio:focus + .radio-indicator::before { opacity: 1; } -
Здравствуйте. Помогите с Html и css Сам я начинающий и пока только учусь. Есть index.html к нему style.css получается криво, а надо одинаковые строчки. Спасибо. P.S. буду признателен если подскажите как сделать что бы текст был строго по центу. index.html style.css
-
Привет! Подскажите как наложить нижнее синее облако поверх формы что справа.. Пробовал позиционировать этот фон относительно body и других контейнеров, мало того что не получилось расположить поверх формы так он ещё и обрезается, а он должен быть резиновым.. Пробовал поставить z-index выше относительно самой формы, body, а также других элементов но также ничего не вышло.. Пробовал эксперименты с opacity - тоже не помогает.. Для элементов формы применяется абсолютное позиционирование, видимо это не дает вытащить синий фон поверх нее, но должно же быть решение
-
Здравствуйте. Вот такая проблема. Слайдер красиво выезжает, а при повторном клике просто пропадает. Как сделать так что бы он красиво выезжал и так же красиво заезжал?) https://jsbin.com/yuyawic/1/edit?html,css,js,output
-
Оцените сайт, только сегодня закончил, интересно ваше мнение! http://qwelp.ru Заранее спасибо!
-
Навигационная меню из макета. я обучаюсь и вот в данный момент не могу сделать так, чтобы ссылка была у всего блока, другими словами - не только у текста. Посоветуйте как быть
-
Адаптивное перемещение блока: как реализовать (шаблон прикрепил)
Yserty posted a question in HTML Coding
Доброго времени суток, уважаемые гуру. Сделал сайт на Wordpress, это мой первый любительский опыт, с html знаком на весьма базовом уровне, потому экспериментирую. Адаптивный дизайн в используемом мной шаблоне уже есть, и некоторые изменения я уже внёс, но столкнулся с некоторыми сложностями, и очень надеюсь на вашу помощь, уважаемые пользователи :-) Я добавил левый сайдбар с блоком "Temp sidebar" id="leftbar" и сделал его видимым только при разрешении монитора 1025px и более. Потом подумал, что так не пойдёт, пользователи со смартфонов и планшетов не будут видеть список располагающихся там статей и не будет переходов (оттого высокий процент отказов). И тогда я решил скрыть часть списка заголовков статей, что располагаются в левом сайдбаре и сделал возможность их открытия по ссылке "Read more…". Теперь этот сайдбар можно показывать всегда, но РАЗМЕСТИВ его ПЕРЕД правым сайдбаром , с заимствованием ширины последнего. Как реализовать размещение левого сайдбара перед правым при разрешении дисплея вплоть до 1024px, а с 1025px возвращения его обратно в левую сторону? Макет страницы https://jsfiddle.net/u0t72dgh/ -
http://codepen.io/anon/pen/PZqjzE?editors=110 Скажите что не так - чо надо исправить - только одна страница
-
Есть вёрстка ( украл сорри ) как заменить тот курсор на тот что появляется при увеличении изображения в lightbox например ? https://jsfiddle.net/atlanta/5usf70kw/
-
Делаю сайт. Потребовалось сделать блоки, которые открываются при нажатии на них. Сделал всё при помощи псевдоэлемента :focus. Вот ссылка на код: http://jsfiddle.net/3ujogh36/ Смысл таков, что: - родительский элемент без фокуса имеет надпись; - после фокуса род. элемент принимает высоту на весь контент; - надпись исчезает, появляется контент. Всё хорошо, но проблема в том, что в скрытом контенте, который появляется при нажатии на род. элемент, есть ссылка, и при нажатии на неё переход не осуществляется, а только скрывается контент. Вопрос в том, как сделать, чтобы при нажатии на ссылку в контенте переход осуществлялся. Буду благодарен за варианты ответов!))
-
Мне в разборе прошлого шаблона столько замечаний накидали. А здесь как? Вот готовый шаблон: http://testing.nordwing.ru/elena/index.html Вот макет: https://yadi.sk/i/KiBTLbhpigkYm
-
Требования: Высшее образование. Отличное знание HTML, CSS (кросс-браузерная верстка, включая IE). Знание одного или нескольких JS-фреймворков (jQuery, Angular JS и пр.). Активные навыки использования средств верстки и одного из популярных графических пакетов (Photoshop, Gimp). Наличие портфолио выполненных проектов. Обязанности: Участие в разработке высоконагруженного (600/700 тыс. в сутки) сайта ИТ компании. Условия работы: 80 000 - 100 000 руб. net. ДМС. Соблюдение ТК. Офис – м.Профсоюзная (10 мин. пешком от метро). Работа строго в офисе. Для резюме - rt@connect-personal.ru
-
Здравствуйте участники форума помогите с таким вопросом создал небольшой пример, код которого приведу ниже <!DOCTYPE html><html> <head> <meta charset = "utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>sample listing</title> </head><body><div class = "karkas"> <div class = "orange yellow"> </div></div></body></html>* {margin: 0 ;padding: 0 ;}ul{list-style-type: none ; }img {border: none ;}div{margin: 0 auto ;width: 400px ;height: 400px ;}.orange{background: orange ;}.yellow{background: yellow ;}В данном варианте все отрабатывает отлично, как нужно. Но если классы в div поменять местами ничего не происходит, при этом если изменить последовательность классов в CSS файле все также работает нормально. Поясните в чем проблема, может я чего-то в теории не понимаю
-
имеется такая структура: нужно прижать подвал вниз - это работает а вот сделать 100% высоту блока #content не получается - когда контента в блоке мало , то все гормально. А когда много , то подвал поднимается к середине страницы... Как это можно исправить в стилях, не меняя структуру html? <body><div id="karkas"> <div id="head"> header </div> <div id="content-wrapper"> <div id="content"> Some Text </div> </div> <div id="footer_bottom"></div> </div> <div id="footer">footer</div></body>* { padding: 0; margin: 0;}html ,body{ height: 100%;}#karkas { min-height: 100%;}#header{ height: 10px; width: 70%;}#content-wrapper{min-height: 100%;background:#eaeaea;}#content{height: 100%;margin:0 auto;background:#eaeaea;width:60%;}#footer{background:#ccc;height:100px;margin-top:-100px;}#footer_bottom { height: 110px; width: 100%; clear:both; }
-
При добавлении якоря на странице добавляется дополнительная строка в этом месте. Как этого можно избежать? Тему можно закрыть. Решение найдено. Тупо стормозила.
-
как сделать чтобы блок wrapper расширялся в высоту если блок news выходит за его проеделы в блоке news генерируемый контент пробовал через min-height: 1000px; сейчас также как и на рисунке вот стили wrapper .wrapper {margin: 90px 0px 220px 220px;width: 1000px;border-radius: 3px;background-color: #f1f1f1;opacity: 0.7;min-height: 1000px;box-shadow: 0px 1px 0px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-o-border-radius: 3px;-o-box-shadow: 0px 1px 0px;-moz-box-shadow: 0px 1px 0px;-webkit-box-shadow: 0px 1px 0px;}
-
Добрый вечер! Помогите советом касательно этого сайта testing-field.68edu.ru, хотел сделать его "резиновым", получилось шальное верхнее меню... Хотелось бы послушать, Ваше мнение, что не так, какие ошибки (не только меню), где фатальные ошибки, где тихий ужас ) Может там всё тихий ужас ) Думал, что бы сделать меню картинка-спрайт, ну не могу я выкинуть в топку эту мысль, что ублажался. Может я где то зациклился хз. )
-
http://img.pixs.ru/storage/5/8/2/Bezimyanni_5147755_9401582.png Всем привет.. Я вот 3-4 дня начал заниматся HTML.. у меня такая проблема.. Что это за красная линия между кнопками "in" и "f"... никак не могу исправить это.. HTML <div class="Share"> <a target="_blank" href="https://www.youtube.com/user/BaxramEfendi/videos"><img class="Youtube" src="Icons/youtube-icon2.png" width="36px" height="36px" onmouseover="this.src='Icons/youtube-icon.png'" onmouseout="this.src='Icons/youtube-icon2.png'" /></a> <a target="_blank" href="https://plus.google.com/109111671453089973163/posts"><img class="Gplus" src="Icons/g+-icon2.png" width="36px" height="36px" onmouseover="this.src='Icons/g+-icon.png'" onmouseout="this.src='Icons/g+-icon2.png'" /></a> <a target="_blank" href="http://www.linkedin.com/pub/bahram-afandiyev/83/838/50b" ><img class="Facebook" src="Icons/in2.png" width="36px" height="36px" onmouseover="this.src='Icons/in.png'" onmouseout="this.src='Icons/in2.png'" /> </a> <a target="_blank" href="http://www.facebook.com/baxramefendiyev" ><img class="Facebook" src="Icons/Facebook-icon2.png" width="36px" height="36px" onmouseover="this.src='Icons/Facebook-icon.png'" onmouseout="this.src='Icons/Facebook-icon2.png'" /> </a> </div> CSS .Share { width: 160px; height:36px; margin-top:-41px; margin-left:864px; padding:0; } Помагите пожалуйста..
-
Добрый день. Меня зовут Сергей. Прошу прощения, если ошибся с разделом. Пока что эта тема будет использована мною для одного-единственного глупого вопроса, но в последствии (когда у меня появятся новые вопросы) я буду задавать их в этой теме, дабы не плодить кучу новых. К делу. В общем, совсем недавно (20 дней назад) я начал изучение веб-программирования. Начал, естественно, с html и css. Погуглил, поискал и понял, что htmlbook - очень хороший ресурс, с которого и стоит стартовать. Сразу же прочитал местный самоучитель по html, поизучал теги в местном справочнике и в общем-то всё более-менее освоил. Хотя нет, вру. Освоил я далеко не всё. Например, тег <param> я не понял вовсе. Немного поразмыслив, пришёл к выводу, что полностью понять предназначение тегов <param>, <script>, <object> (атрибут code) и тому подобных, я бы и не смог, так как не знаю js. То же самое относится и к событиям. Потом я прошёлся по xhtml (насколько я понимаю, это просто набор дополнительных правил к html по типу "все теги нужно закрывать", "все теги нужно набирать в нижнем регистре", "запрещается использование сокращённых атрибутов" и т.д. + свои доктайпы + атрибут к тегу <html> + новый способ задания кодировки). После этого приступил к CSS. Долго выбирал с какой книжки начать, хотел взяться опять же за местный самоучитель, но в итоге выбрал другой источник информации - книгу CSS Мейера. Сейчас я закончил читать главу 10 "Свободное перемещение и позиционирование". Сразу скажу, что все эти 10 глав я усвоил на отлично. Некоторые перечитывал по 2 раза и самые важные моменты конспектировал, а не очень важные просто запоминал. Осталось прочитать всего 4 главы и можно двигаться дальше. Вчера я просто для себя решил набросать макетик, чтобы проверить, что я уже знаю. Вот он, кстати. Немного float'ов, немного position'ов, эффект цветного зеркала, псевдоклассы и прочее. Ну то есть Вы понимаете, что я ещё на начальном уровне. Так вот у меня возник комплексный вопрос, состоящий из нескольких частей: 1) Что мне читать дальше? Есть "Большая книга CSS" и "CSS ручной работы" в pdf'ах. Не сочтите за халявщика, я бы с удовольствием купил бумажные версии, но в нашем городе таких книг нет. 2) Что вообще мне желательно освоить, чтобы стать профессиональным front-end разработчиком? Как я понял, порядок примерно такой: html, css, js, потом на выбор Ruby/Python/Php, затем базы данных и т.д. 3) Можете в пару строк описать весь процесс создания сайта? А то я путаюсь уже. Вроде бы сначала надо нарисовать psd макет, потом сверстать его и прикрутить скрипты, затем натянуть на какой-то шаблон, а дальше? И вообще правилен ли порядок? 4) Сложен ли js для понимания? Весь мой опыт программирования - это 3 урока по Basic'у в школе. Тобишь опыта нет. 5) Будет ли мне полезно изучить Pascal? 6) Я представляю процесс создания сайта довольно интересным и творческим. Правда ли это? 7) В книге Мейера совсеееем мельком упоминается XML. И меня это заинтересовало. Что мне нужно изучить перед тем, как браться за XML? 8) Требуются ли фронт'у профессиональные навыки владения фотошопом или базовых/средних вполне достаточно? Пока всё. Спасибо.
-
/del Проблему решил, всем спасибо
-
Здравствуйте Уважаемые форумчане! Это моя первая тема. Помогите, мне нужно перенести блоки направую сторону, чтобы не скролить полчаса, вот на этой странице: http://www.m-instrum....php?id=contact не могу разобраться, код писал не я, да и у меня начальный уровень знаний Вот код