Новые ответы с меткой html
0
Как добавить border-radius последним элементам (синему и серому) строк
грид сетки, наподобие первых элементов? Желательно без js
С помощь только Grid CSS - никак.
Предлагаю следующий вариант, с помощью JavaScript. Что мы делаем?
Получаем ширину окна;
Полученную ширину делим на ширину одного элемента, т.е. на 60px;
Полученное число округляем до целого. Тем ...
ответ дан 1 час назад
Sevastopol'
23.2k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
0
Сменить width на ширину совокупности всех элементов:
.colors
width: calc(5 * 60px)
Если последний принципиален, даже если он не совпадает с верхним (как видно по ссылке), то ещё и:
.color
&:last-child
border-radius: 0px 0px 12px 0px
2
Рисуется несколько path заготовка для pattern
<svg width="100" height="100" viewBox="0 0 15 15">
<g fill="none" stroke="orange" stroke-width="0.5">
<path class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
<path fill="none" stroke="orange" stroke-width="0.5" class="right-shade" d="M10 0l-5 3v5l5 -3"></path>
...
ответ дан 4 часа назад
Alexandr_TT
85k1818 золотых знаков8686 серебряных знаков251251 бронзовый знак
0
Честно говоря, вопрос не до конца понятен.
Можно сделать как-то так.
.parent{
background: #ff0000;
}
.childern{
background: #ffff00;
writing-mode: vertical-lr;
transform: rotate(-180deg);
}
<div class="parent">
<div class="childern">
Контактная информация
</div>
</div>
2
Из предыдущего вашего вопроса было видно, что шестиугольник смещён влево 222.8px и вниз - 218px с помощью viewBox="222.8 218 346.4 400" я вернул его назад.
Но из=за этого приходилось смещать и в паттерне и в окружности. В результате сложновато получилось. Решил взять другой шестиугольник без смещения, чтобы не было лишних трудностей и вам будет ...
ответ дан 4 часа назад
Alexandr_TT
85k1818 золотых знаков8686 серебряных знаков251251 бронзовый знак
2
Вот конечный результат, в котором нет лишних пустых полей, шестиугольник расположен по центру SVG и код оптимизирован (один знак после запятой вместо 14-ти)
Красная рамка это границы холста SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="346.4" height="400" viewBox="222.8 218 346.4 400" style="border:...
ответ дан 6 часов назад
Alexandr_TT
85k1818 золотых знаков8686 серебряных знаков251251 бронзовый знак
0
Создайте нужную страницу и сделайте на нее переадресацию в нужный момент
<?php
/*...*/
if (mail("mail@gmail.com",
"Новая заявка",
"Имя: ".$name."\n".
"Телефон: ".$tel."\n".
"Email: ".$email,
"From: почта@маил.рф \r\n")
) {
header('...
1
Так понимаю, что необходимо применить фон непосредственно под текстом, а не на всю ширину строки. У вас это не получается, потому как тег <p> является блочным элементом, а значит растягивается на всю ширину. Как вариант для нужного вам параграфа применить свойство display и значение ему inline. Вот пример:
body {
background-color: rgb(54, 54, 54);...
ответ дан 10 часов назад
Sevastopol'
23.2k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
1
Не совсем понятно, про какой размер окна браузера идет речь. Могу предположить, что про размер самой веб-страницы, то есть ширины отображаемого содержимого (отрендеренного контента).
const pageWidth = document.documentElement.scrollWidth;
document.querySelector('.saitpage').style.marginLeft = pageWidth + 'px';
.saitpage {
width: 100px;
height: 100px;...
ответ дан 10 часов назад
Sevastopol'
23.2k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
1
Я такую задачу делаю с помощью Checkbox. Вот Мой код
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
body {
font-family: 'Roboto', sans-serif;
}
.sidebar {
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background: #bdbddb;
...
1
$(".delete_comment button").click(function(){
console.log($(this).closest(".delete_comment").find("input").val());
});
3
Вопрос: Как при изменении размеров родительского элемента,
пропорционально изменять размеры дочернего элемента? Дочерний элемент
должен быть полностью адаптивный квадрат, и при любых изменениях высоты или ширины родительского элемента, дочерний элемент - квадрат -
должен всегда оставаться квадратом. Какие есть варианты решения этой
задачи?
Короткий ответ:
...
ответ дан 12 часов назад
Alexandr_TT
85k1818 золотых знаков8686 серебряных знаков251251 бронзовый знак
1
если тебе список получить, то его можно получить по ссылке
там json объект который без труда можно распарсить
в этом запросе есть параметр page=1 его меняешь(page=2, &page=3 и тд) и получаешь еще данные
вот пример что получаем:
ответ дан 14 часов назад
Андрей Крузлик
1,05311 золотой знак88 серебряных знаков1515 бронзовых знаков
0
Регулируй margin и width картинки
.home__inner{
height: 630px;
}
.home__title h1{
font-weight:800;
text-transform: uppercase;
font-size: 60px;
width: 50%;
position: absolute;
top: 108px;
}
.home__img{
margin-left: 40%;
width: 500px;
box-shadow: 0px ...
1
Что возможно добавить в мой код для того, чтобы при нажатии на "клик"
видео адаптировалось во весь сайт, но при этом не происходило того, что сайт необходимо скролить?
С этим вопросом мы разобрались. Смотрите на результат. Кроме этого, исправил у вас ещё ряд допущенных вами ошибок в CSS.
Возможно ли убрать органы управления видео снизу?
...
1
В данном случае, самый очевидный способ - отказаться от border и использовать box-shadow:
.container{
display: flex;
margin: 20px 0;
box-shadow: 0 0 0 1px black;
}
.picture{
flex: 0 0 225px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-image: url('https://i.pinimg.com/...
0
Вариант на flex
.card {
margin-top: 200px;
}
.card__inner {
height: 100%;
display: flex;
justify-items: space-between;
flex-wrap: wrap;
}
.card__item {
width: 32%;
margin-bottom: 25px;
padding: 25px;
background-color: #fff;
box-shadow: 0 0 5px #000;
}
.card__item:nth-child(2n) {
margin-left: auto;
}
.card__item:nth-child(2):last-of-...
3
Имхо, самое короткое и правильное решение... в будущем... Ибо пока поддержка такого замечательного свойства, как aspect-ratio, оставляет желать лучшего. Но, в Chrome и Edge действительно уже работает "на ура". В общем, как вариант:
#parent {
width: 140px; height: 140px;
padding: 10px; overflow: hidden;
border: 5px solid red; resize: both;
...
3
Отдельным ответом добавлю ещё один вариант, в котором мы будем менять у родительского элемента только высоту height, а у дочернего элемента только ширину width. При этом у нас всё также дочерний элемент должен пропорционально изменять свои размеры и всегда оставаться полностью адаптивным квадратом.
function parentH() {
let height = document....
0
.selection-modal__block {
border: 2px solid #c9c9c9;
border-radius: 10px;
padding: 30px 30px;
margin-bottom: 30px;
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 1fr 1fr auto;
grid-template-columns: auto 1fr 1fr auto;
-ms-grid-rows: (auto)[3];
grid-template-rows: repeat(3, auto);
gap: 20px;
align-items: center;
...
3
Подобный вопрос довольно часто встречается на ruSO. Поэтому мне кажется, что будет не лишним добавить готовое и полностью рабочее решение, которое может оказаться в будущем для многих пользователей полезным.
Вот один из вариантов такого решения поставленной задачи, с помощью JavaScript кода и с использованием переменных в CSS:
function parentH() {
let ...
0
Добавить для всего body margin 0
body {
margin: 0;
}
.container{
display: flex;
border: 1px solid black;
margin: 20px 0;
}
.picture{
flex: 0 0 225px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url('https://i.pinimg.com/originals/20/2e/2f/...
0
Вариант на grid
.card {
margin-top: 200px;
}
.card__inner {
height: 100%;
display: grid;
grid: auto/repeat(2, 1fr);
justify-items: space-between;
}
.card__item {
width: 50%;
margin-bottom: 25px;
padding: 25px;
background-color: #fff;
box-shadow: 0 0 5px #000;
}
.card__item:nth-child(2n) {
justify-self: end;
}
.card__item:nth-child(2)...
2
Для начала добавить самселект в форму (если у вас есть форма)
<select name="order">
<option value="asc">asc</option>
<option value="desc">desc</option>
</select>
и учесть этот параметр в пхп-коде: получить из формы, взять значение, или значение по умолчанию.
$x = $_POST['order'];
...
2
Лучше это сделать таким вот образом:
.s_bar {
position: relative;
width: 540px;
}
.search {
display: block;
position: relative;
width: 460px;
height: 40px;
padding: 0 50px 0 30px;
border: 2px solid #c7c1c0;
border-radius: 24px;
outline: none;
font-size: 20px;
color: gray;
}
.icon {
position: absolute;
top: 10px;
right: ...
1
Повторюсь, нужно чтобы от слова "текст" до цифр шли точки как на
скриншоте... Подходит решение как на чистом CSS, так и на JS и JQuery.
Судя по вашему вопросу, я так полагаю, мы можем воспользоваться любыми средствами, но мы не можем трогать разметку HTML. В таком случае вот вам решение на JS + незначительные дополнения к вашему CSS (не нарушая ...
1
В этом ответе подробно разбиралась данная проблема
В качестве компромиссного решения можно попытаться:
Подобрать менее контрастные цвета для цвета букв и фона
К шрифту применить атрибут shape-rendering ="crispEdges"
Выбрать шрифт, у которого при рендеринге более резкие края
Например выбранный вами шрифт font-family="cursive" выглядит ...
2
Примеры анимации текста
В этих примерах анимации основаны на изменении startOffset, отступ текста от начала направляющей траектории (path)
<textPath xlink:href="#top" startOffset="98%"> Top arc outside text
<animate id="an" attributeName="startOffset" begin="svg1.click" dur="2s" ...
2
Рассмотрим на примере, когда траектория представляет собой окружность.
Начало текста всегда совпадает с началом path, то есть с первой M в <path d="M50 200"
Чтобы нижнюю часть траектории заполнить буквами в нормальном расположении, нужно сделать её отдельно от верхней части.
Верхняя половина окружности:
<svg xmlns="http://www.w3.org/2000/...
0
Всё работает.
.map {
width: 200px;
}
<img class="map" src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper-big.jpg" alt="">
Если не работает - проверьте внимательно синтаксис, сами параметры, совпадают ли классы и пр. Так же, возможно стили перезаписываются другими, это с помощью инспектора кода выявить можно в любом ...
0
Все разобрался проблема в html разметке - div относился не к тому блоку (не к rightmenu, а ко внутреннему), в результате количество блоков другое (проблема в пропущенном коде).
1
Исходный код отличается тем, что там есть js скрипты которые генерируют страницы и обычным request js скрипты не загрузить
Простой вариант, загрузить страницу через Selenium и передать html в bs4
0
Mea culpa - моя вина!
Прошу извинить за беспокойство.
Проблема в том, что изначально было неизвестно, какой домен будет использоваться в окончательном варианте, тем более, что в режиме разработки использовался локальный сервер. Поскольку приложение клиент-серверное (react/flask), чтобы лишний раз не трогать серверную часть, которая была уже вчерне ...
4
Лучше было бы, если задействовать SVG и JS, но т.к. в метках вопроса указаны только HTML и CSS, то вот Вам приближенный вариант:
body {
margin: 0;
height: 100vh;
background-color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
}
.cards_wrapper {
position: relative;
height: 485px; width: 485px;
font: bold 11px/...
3
Один из вариантов верстки: Взять position: relative блок размером 0x0 px, расположив его по центру, вставить в него необходимое количество картинок position: absolute, указывая им соответствующие координаты в top: px; left: px;
Но было бы приятно не считать их руками, а чтобы JS сам всё посчитал и вставил для любого количества картинок)
Для справки:
Т.к. в ...
4
Если пока css анимации вызывают у вас затруднения, попробуйте начать изучение SVG анимаций.
На мой взгляд они проще для освоения, код короче по сравнению c CSS и SVG анимация гибче в настройке и может то, что пока анимациям CSS не подвластно.
#1. Горизонтальное перемещение вперед - назад
<!-- Команда анимации перемещения -->
<...
6
Очень сомневаюсь, что будут какие-то попытки, как спрашивают в комментариях. Вероятнее всего, автор это сделать не сможет. Но понимая, что ему задачу необходимо решить и решение это кому-то предоставить, выполняю задачу за автора, комментируя код, и с надеждой на то, что автор в будущем будет самостоятельно пытаться решать такие простые задачи, как эта:
/...
ответ дан 2 дня назад
Sevastopol'
23.2k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
0
Я бы сделал так:
При когда пользователь закрывает уведомление, мы сохраняем в localStorage timestamp и я бы ещё сохранял через какое время показать повторно.
Выглядело бы это следующим образом:
// Разделитель, чтоб попроще ↴
localStorage.setItem('notifyTime', new Date().now()+':'+9000);
Далее, когда пользователь обновляет страницу, ...
0
const toggle = () => document.querySelector('#mycheckbox').parentElement.classList.toggle('myclass')
document.querySelector('#mycheckbox').addEventListener('change', toggle);
.defaultClass {
display: inline-block;
width: 2rem;
height: 2rem;
border: 2px dashed;
border-color: black;
}
.myclass {
display: inline-block;
width: ...
2
В "Pug"е атрибуты указываются внутри скобки (сколько хотите туда можно поставить), классы c точкой(.) айдишки с решеткой (#)
Пример:
index.pug
a.youtube#last_link(href="http://youtube.com", visible, data-go-to-youtube="false") Visit YouTube
index.html
<a
class="youtube"
id="last_link"
href="http:/...
0
Я нашел ответ, это делается вот так:
link(rel='stylesheet', href='css/style.css')
0
const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const CopyWebPackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: { index: path.resolve(__dirname, &...
0
Если речь идет о стандартном выделении текста мышкой, то используйте getSelection
const table = document.getElementById("tb1");
table.addEventListener('mouseup', (e) => {
if (e.button === 0) {
const selectedText = window.getSelection().toString();
alert(selectedText);
}
});
Если выделение ячеек идет за счет клика по ним, то:
let ...
1
function check() {
let chk = document.querySelectorAll('.chk')
chk.forEach(function(el) {
if (el.checked)
console.log(el);
})
}
<input class='chk' type="checkbox">
<input class='chk' type="checkbox">
<button onclick='check()'>далее</button>
https://jsfiddle.net/pvfo49sr/1/
ИЛИ
...
3
Потому что css - это каскад. Правила могут распространяться только сверху вниз: от родителя к детям либо от элемента выше на элемент ниже. А Вы пытаетесь из спана, вложенного в абзац, достучаться до дива, лежащего на другом уровне (на уровень выше).
Задайте class="rabota" абзацу и слегка измените правило в css:
.rezhim {
opacity: 0;
}
.rabota:...
2
Ваш код говорит "при наведение на блок .rabota используем правила для вложенного .rezhim", ну внутри .rabota нет никакого .rezhim, он лежит на уровень выше, по этому и не работет.
Как вариант, повесить :hover на элемент p, и брать элемент рядом .rezhim:
.rezhim {
opacity: 0;
transition: opacity .5s;
}
.hover:hover ~ .rezhim {
opacity: 1;
...
1
Проблема заключается в том, что ваша конструкция .rabota:hover .rezhim пытается найти блок с классом rezhim внутри блока с классом rabota, которого нет, так как он идет следующим в дереве.
Я предложил бы вынести ваш span за пределы p и использовать оператор +, который ищет следующий элемент после .rabota в данном случае.
.rabota:hover + .rezhim {
...
ответ дан 2 дня назад
mepihindeveloper
1,47111 золотой знак66 серебряных знаков1717 бронзовых знаков
0
body {
background-color:#000;
}
.block{
display:flex;
flex-wrap:wrap;
max-width:1300px;
justify-content:space-between;
margin:auto
}
.circle{
background-color:#fff;
width:150px;
height:150px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
margin:25px;
}
<div class="block">
<div class="...
0
Попробуйте перенести скрипт вверх страницы и добавить атрибут defer. Работает только с внешними скриптами.
Пример: <script defer src="script.js"></script>
-1
плагин "page Builder siteOrigin". Нужно на странице создать виджет, выделить созданный виджет и нажать на "добавить виджет" -> "HTML-код" и писать код). Надеюсь кому то поможет
50 лучших ответов включены
Связанные метки
html × 28973css × 15879
javascript × 11026
jquery × 4485
php × 3391
вёрстка × 1971
css3 × 1893
html5 × 1655
bootstrap × 1206
svg × 758
веб-программирование × 708
ajax × 573
python × 458
wordpress × 450
flexbox × 380
mysql × 362
java × 358
адаптивная-верстка × 298
парсер × 252
django × 236
c# × 235
form × 231
json × 230
css-animation × 226
анимация × 225