LINUX.ORG.RU

45
Всего сообщений: 462

Как верстаются произвольные фигуры на заднем фоне? (см. фото)

Не могу понять. Можете объяснить как верстаются такие произвольные фигуры на заднем фоне? (см. фото).

 , ,

dimcoin ()

Возможно ли использовать HTML страницу в качестве «обоев» рабочего стола в i3wm?

Есть HTML страница используемая в качестве домашней в браузере, расположенная локально на компе. В качестве DE i3wm, Debian testing. Как мне это представляется: запускаешь компьютер открывается рабочий стол, нажимаешь на ссылку с него, открывается firefox с переходом на эту ссылку. Вопрос в способе реализации.

 , , ,

spellman ()

Кнопка типа <button> - не хочет переходить по ссылке

Имею страницу с URL:

http://site.loc/personalArea/userHoldObjects/objectCard/show/18

В ее HTML-коде есть кнопка:

<form method="POST" action="#" ... >

<button 
 id="connectRoomToEnraceToBuildingButton" 
 name="connectRoomToEnraceToBuildingButton" 
 class="btn bth-default" 
 onclick="window.location='http://site.loc/personalArea/userHoldObjects/connectRoomToEnraceToBuilding/18'">
 
 <span class="glyphicon glyphicon-th"></span> Подключить

</button>

Когда я ее нажимаю, следует переход на URL:

http://site.loc/personalArea/userHoldObjects/objectCard/show/18#

Вместо того чтобы перейти на URL:

http://site.loc/personalArea/userHoldObjects/connectRoomToEnraceToBuilding/18

Почему так происходит? Кнопка не имеет тип submit, это просто кнопка. Я даже проверил в консоли выполнение кода:
window.location='http://site.loc/personalArea/userHoldObjects/connectRoomToEnraceToBuilding/18'

Этот код выполняется, происходит правильный переход. Почему же на кнопке данный код не работает? Никакого JavaScript я на кнопку не биндил, так что даже не знаю что еще проверить.

 , ,

Xintrea ()

DIV по высоте текста

Добрый день!

Имеется такая проблемка. Есть контейнер div, в нём есть текст. Div получается по высоте больше, чем текст. Каким способом можно сделать так, чтобы высота div-а была точно равна высоте текста.

https://i.imgur.com/AclKNya.png

Ненужный зазор отмечен курсором мышки. P.S.: Ручной подбор высоты не надо. Должен же быть нормальный способ вёрстки.

 , , , ,

Veshutka ()

Резиновый div

Нужно что бы <div id=«test2»> растягивался на всю длину, в зависимости от количества <div id=«test4»> в <div id=«test3»>. Как это сделать? Пока получается так.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="test1">
	<div id="test2">
	<div id="test3">
	<div id="test4">
		<p id="test5">Съешь ещё этих мягких французских булок, да выпей чаю.</p>
	</div>
	</div>
	</div>
</body>
</html>

CSS

#test1 {
	width: 100%;
	height: 100%;
	min-height: 640px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	border-right: 0px;
	position: absolute;
}

#test2 {
	background-color: #FF6347;
	position: absolute;
	width: 100%;
	height: 100%;
}

#test3 {
	width: 98%;
	max-width: 1000px;
	height: 100%;
	position: absolute;
	left: 17%;
}

#test4 {
	width: 98%;
	position: static;
	max-width: 1000px;
	padding: 10px;
	left: 17%;
	background-color: #FFFFFF;
	margin-bottom: 15px;
}

#test5 {
	font-size: 120%;
	padding: 1px;
}

 , ,

Riniko ()

Можно ли в xpath получить атрибут тега без названия самого атрибута в выдаче?

Доброе утро. Помогите, голова не варит и гугл сегодня не в духе.

'(//a/text())[last()]'

выдаёт

lasttext

и

'(//a[@href])[last()]'

выдаёт

<a href="lastelem/">lasttext</a>

далее

'(//a/@href)[last()]'

выдаёт

 href="lastelem/"

Я хочу, чтобы оно тут в последнем примере превратилось просто в «lastelem/», это можно сделать? Мне нужно только содержимое атрибута последнего элемента на странице или хотя бы без пробелов в начале строки.

 , , , ,

linuxnewbie ()

Google Chart: HTML to PNG in console

Есть скрипт который генерит html файлы в формате гугл чарта.

эти файлы отправляются на почту адресатам и чарты можно смотреть открыв html в браузере.

вопрос: каким образом можно исходные html превратить в статичные картинки на линуксе без ДЕ?

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

 , , ,

nerve ()

А кто сейчас пишет программы?

На первом месте китайцы, потом индусы, потом америкосы, потом евросоюз, африка...
А наши на каком месте?

 , , , ,

quantum_cat ()

nginx и «современный веб»: пользовательские страницы ошибок и сломанные стили

Описание вопроса здесь.

Вопрос по сути таков: есть стили, скрипты и шрифты для кастомных веб-страниц с кодами ошибок HTTP, они разнесены по разным каталогам, вне основного корня домена.

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

Я уже очень сильно в этом сомневаюсь, т.к. это не его забота, ну а вдруг.

 , , ,

Twissel ()

Быстрый парсинг HTML

Представьте такую парсилку:

1. Сначала разобрать HTML-документ на линейную последовательность тегов. Линейную, карл. Никаких отношений между тегами. Парсер не знает про то, что теги вложены друг в друга, имеют закрывающих собратьев и другое. Тег - имя + набор атрибутов. Иерархии нет. Закрывающий тег - тупо отдельное имя в той же плоской последовательности. Есть тег «TD», а есть тег «/TD», у них просто вот такие имена и парсеру неважно почему они такие. Какой-нибудь простой текст будет в итоге превращён в объект-тег типа «TEXT» с атрибутом value равный самому тексту, допустим.

2. Рассмотреть всю эту последовательность как строку, где вместо char объект «тег» (с атрибутами).

3. Сделать как-бы regexp-машинку, но не совсем regexp: она оперирует не символами текста (char), а этими самыми объектами-тегами, линейно следующими, как обычный текст.

В таком духе:

// заматчить любую пару тегов <TD> + </TD> с любыми тегами между ними.
// повторю: здесь всем пофиг на имена тегов. Никаких отношений между TD и /TD парсер HTML и данная regexp-машина не знают. Для неё это просто 2 каки-то там тега.
TD, * *, /TD


// то же самое, но только <TD> имеющий атрибут "hello" равный 123
TD hello=="123", * *, /TD

// можно замутить встроенный язык с переменными
// При встрече тега HTML создать i = 0
// Пропустить сколько угодно каких угодно тегов
// заматчить много последовательностей <TD> ... </TD>
// При матчинге очередного TD инкрементнуть переменную
// В итоге мы посчитаем число пар <TD>...</TD> заодно.

HTML $i=0, * *, (TD $i++, * *, /TD)*

Не будет ли такое быстрее, чем построение в памяти всего DOM-дерева и исполнение на этом дереве XPath-запросов?

 

igloev ()

Занять свободное пространство в bootstrap

Имеется кусок код вида:

<div class="container-fluid p-4">
    <h3 class="mb-4"><b-breadcrumb :items="pagePath"/></h3>
    <div class="row">
        <device-types-component class="h-auto mb-4 mr-4"/>
        <android-client-update-channels-component class="h-auto mb-4 w-auto"/>
    </div>
</div>

Выглядит это вот так.

Вопрос первый: как сделать так, чтобы один из блоков занимал всю оставшуюся ширину? Вопрос второй: как сделать так, чтобы оба блока занимали всю оставшуюся ширину? Вопрос третий: как сделать так, чтобы блоки занимали всю оставшуюся доступную высоту?

Извиняюсь заранее за нубские вопросы. Я в вебе не силен.

 , ,

popov-aa ()

Почему <div> имеет размер меньше, чем его содержимое? (С видео)

У меня версточный кретинизм. В связи с чем возник вопрос.

Используется Bootstrap 3. Есть такой код (блок-контейнер, естественно, есть, но не показан):

...
<div class="row">
    <div class="col-xs-12 col-xs-offset-0">

        <!-- Логин -->
        <div class="form-group">
            <label for="email" class="col-md-4 control-label">Логин</label>

            <div class="col-md-6">
                <input id="name" type="text" class="form-control" ...>
            </div>
        </div>

        <!-- Пароль -->
        <div class="form-group">
            <label for="password" class="col-md-4 control-label">Пароль</label>

            <div class="col-md-6">
                <input id="password" type="password" class="form-control" ...>
            </div>
        </div>
...


Проблема в том, что блок(и) с классом form-group имеет размер 510x0, несмотря на то, что внутри него размещены элементы совсем не нулевых размеров по вертикали.

Видео: https://www.youtube.com/watch?v=LD_lK_UrsVg

Вопрос: почему так происходит? Как исправить? Ведь мне нужно чтобы между полями ввода был отступ (который подсвечивается желто-розовым цветом). И он есть, но только болтается сверху из-за того, что высота блока нулевая. А нужно, чтоб блок был размером с его содержимое.

UPD:
Полный код страницы: https://pastebin.com/CJtHAyGK

Или так: https://codepen.io/xintrea/pen/dLGyNb

 , , ,

Xintrea ()

Верстка блоков в html/css

Нужно сверстать блоки, для резинового макета. В маленьком разрешении вёрстка получается нормальной, но при увеличении размеров, она съезжает. Как сделать так, что бы и при увеличении размеров, у блоков оставалось корректное расположение?

В коде это выглядит так:

#body {
	background: url(logo.png);
	background-size: cover;
}

#a {
	position: absolute;
	width:42%;
	bottom: 4%;
	left: 5%;
}

#b {
	position: absolute;
	width:42%;
	left: 5%;
	top: 51%;
}

 , , ,

Riniko ()

Как выровнять нечетное количество ячеек по центру в Bootstrap 3?

На странице надо организовать ввод кода продукта из трех частей. Примерно так:

[1234]-[5678]-[9012]

Ввод нужен не по маске, а тремя полями ввода, с крупными цифрами. Между полями ввода должен быть нарисован символ-разделитель, например тире.

Ширина одного поля ввода - 3 ячейки. На символ-разделитель отводится одна ячейка. Получается, что итоговая ширина будет 3+1+3+1+3=11 ячеек.

И эти 11 ячеек мне нужно вывести по центру строки row.

У меня версточный кретинизм, я уже как только не пробовал, но передвинуть 11 ячеек в центр row у меня не получается.

Как это сделать?

Для затравки, вот нерабочий код:

        <div class="row">
            <div class="center-block col-xs-11" style="float: none; background-color: blue">
                <div class="row">
                    <div class="center-block">
                        <div class="col-xs-3"><input id="itemIdPart1" type="text" class="form-control"></div>
                        <div class="col-xs-1">-</div>
                        <div class="col-xs-3"><input id="itemIdPart2" type="text" class="form-control"></div>
                        <div class="col-xs-1">-</div>
                        <div class="col-xs-3"><input id="itemIdPart3" type="text" class="form-control"></div>
                    </div>
                </div>
            </div>
        </div>

 , , ,

Xintrea ()

В чем отличие EOL от EOF?

Нужно ли ставить новую строку в конце HTML, CSS, JS файлах? А то github ругается, когда детально смотрю коммиты. Типа вы не поставили новую строку в html файле, и в js файлах тоже. SCSS, CSS, JS, .gitignore тоже мычит типа я забыл поставить новые строки в конце файла. Что всё это значит? Объясните пожалуйста по человечески, есть некий стандарт что ли?

 , ,

dimcoin ()

Почему сайты свободного софта зачастую такое УГ?

Нередко доводится посещать различные сайты касательно дистрибов ос, различных пакетов и всякого такого прочего. И вот очень много где сайты выглядят не то, чтобы плохо, а очень плохо. Ощущение, что их делали до 2000 года. Я не прошу каких-то изысков или ангуляров там, где они не нужны... но сейчас можно накатить любой css фреймворк типа бутстраба или чего-то другого и получить красивые кнопки, удобные таблички, нормальные шрифты и в целом современный вид - и всё это ну вообще без напряга. Так в чём же причина? Может, в убогом стиле есть какой-то свой сакральный смысл? Протест? Поддержка консольных браузеров? Чтооо?))

 , , , ,

Deleted ()

Если не <table>, то что?

Привет, ночной.
Сегодня вопрос такой.

Есть какая-то большая таблица с данными, которую нужно отображать на редактирование.
Пусть это будет такая.

Сейчас это огромная форма и она же таблица, и её открытие в, например, firefox >= 58 приводит к дичайшим тормозам даже на i7 8550U.

В связи с этим, нас не покидает ощущение, что делаем мы что-то не так.
Вопрос — как это реализовывается нынче так, чтобы всё это не тормозило на любом железе и работало с любым браузером? (читай без кучи js-фреймворков)

 

annerleen ()

Парсинг невалидного (не по стандартам) DOM

Использую простую схему:


        DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
        DocumentBuilder db = null;
        try {
            db = dbf.newDocumentBuilder();
        } catch (ParserConfigurationException e) {
            throw new HtmlProcessorException(e);
        }
        Document xml = null;
        try {
            xml = db.parse(new ByteArrayInputStream(html.getBytes(StandardCharsets.UTF_8)));
        } catch (SAXException e) {
            throw new HtmlToXmlConvertionException("Html parsing exception", e);
        } catch (IOException e) {
            throw new HtmlToXmlConvertionException("Html reading exception", e);
        }

Но HTML содержит ноду с неопределенным атрибутом:

<link href="https://..." mask rel="icon" sizes="any">

В этом примере - mask не определен, выбрасывается эксепшн:

Caused by: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1442; Attribute name "mask" associated with an element type "link" must be followed by the ' = ' character.

Не могу нагуглить, есть ли способы заставить парсер воспринимать такие ситуации правильно, т.е. считать, что если нет ="", то атрибут с пустым значением? Или все-таки придется еще регекспами искать такое и вставлять это «дефолтное» значение?

 , , , ,

bvn13 ()

Web разработчик стажёр

Добрый день! Ищу работу web разработчиком. Изучаю около 5 месяцев. Есть готовый проект сайт, который уже работает. Из знаний html5, css3, bootstrap4 JavaScript (база)+(jQuery база) . Ищу работу стажёра за минимальную зарплату, для набора опыта. Готов работать много и много учиться. sir.offer@yandex.ru С уважением ко всем.

 , , , ,

MacOS ()

HTML entities в подсветке изменений истории редактирования сообщения

В истории редактирования сообщения при нажатии на кнопку „Подсветить различия” символы вроде неразрывного пробела превращаются в &nbsp;.

Пример: www.linux.org.ru/forum/linux-org-ru/14702495/14704213/history

Пример: Сразу говорю, мне это «улучшение»&nbsp;— категорически не нравится

Ожидаемое поведение:
Пример: Сразу говорю, мне это «улучшение» — категорически не нравится

 , ,

h578b1bde ()