The_Immortal

December 21, 2021

19 часов назад, Switch74 сказал:

можно так
https://jsfiddle.net/Leph51ak/
но не уверен, что вам именно это нужно

Таким образом отрезается изображение 😞

Не могу никак наткнуться на реализацию этого shrinkToFit...

December 20, 2021

А как всё-таки тот shrinkToFit реализовать?

December 14, 2021

31 минуту назад, Switch74 сказал:

попробуйте вывести картинку через img с width=100%

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

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

Попробовал так:

<html>
	<head>
		<meta name="viewport" content="width=device-width; height=device-height;">
		<link rel="stylesheet" href="resource://content-accessible/ImageDocument.css">
		<link rel="stylesheet" href="resource://content-accessible/TopLevelImageDocument.css">
		<link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css">
		<title>Background</title>
	</head>
	<body>
		<img src="https://content.screencast.com/users/immick6307/folders/Snagit/media/43d76d9a-3476-4bb7-ac03-185a3ec097bb/12.14.2021-12.42.png" class="shrinkToFit" >
	</body>
</html>

Но так выводится полное изображение... Т.е. класс "shrinkToFit" не срабатывает почему-то...

December 14, 2021

1 час назад, npofopr сказал:

Ну подумайте немного.

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

Я в конец запутался. Мне необходимо, чтобы прокрутка была ровно до конца картинки. Картинка имеет высоту 1718px. Я сделал так:

html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background</title>
  <style>
   body {
    background: url(https://content.screencast.com/users/immick6307/folders/Snagit/media/43d76d9a-3476-4bb7-ac03-185a3ec097bb/12.14.2021-12.42.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }
    .layer {
    height: 1300px;
   }
  </style>
</head>
<body>
  	<div class="layer">
	</div>
</body>
</html>

При этом у меня в браузере появляется лишний скроллинг - белый фон после фото. Экспериментальным путем вышел на высоту 1300px (почему-то!). При этом в мобильном браузере при горизонтальной ориентации экрана всё равно "лишний скроллинг" имеется.

December 14, 2021

5 минут назад, npofopr сказал:

Потому что в body пусто.

А что минимально там можно указать?

Я задал:

<div>
<br>
</div>

- не помогло.

December 14, 2021

Господа, прошу прощения за ламерский вопрос (я не спец в html совсем), но подскажите, пожалуйста, по каким причинам вот этот код

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background</title>
  <style>
   body {
    background: url(https://content.screencast.com/users/immick6307/folders/Snagit/media/43d76d9a-3476-4bb7-ac03-185a3ec097bb/12.14.2021-12.42.png) no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
   }
  </style>
</head>
<body>
</body>
</html>

Не дает в браузерах скроллинг по вертикали? Пример взят отсюда.

Спасибо!

September 13, 2017

Ребят, благодарю за подсказку, только меня интересует сохранение не на стороне клиента, а на самой странице, т.е. на стороне сервера...

Видимо, я коряво выразился...

September 13, 2017

Всех приветствую!

Друзья, сразу признаюсь, что я полный нуб, но не лентяй. Имеется простейшая задачка. На странице одно поле для ввода, значение которого попадает чуть ниже. Необходимо это значение сохранять на странице после нажатия кнопки.

<html>
<head>
  <title>Just4Test</title>
</head>
<body>
 
Число2: <input id="number1">
<button id="save">Сохранить</button>
 
<hr>
<div id="result"></div>
 
<script>
function saveit() {
    var num = document.getElementById('number1').value;
 
    var html = 'Число1: 90' + '<br>' + 'Число2: ' + num + '<br>' + 

'Число3: 105';
 
    document.getElementById('result').innerHTML = html;
}
 
document.getElementById('save').addEventListener('click', saveit);
</script>
 
</body>
</html>

Я, естественно, гуглил и в качестве решений видел использование либо ActiveX, что совсем не комильфо, либо PHP, который также мне не подходит в виду IIS-сервера. Подскажите, пожалуйста, какие ещё есть вариант для сохранения данных и последующего вывода (в файл/из файла).

Спасибо!

January 19, 2015

psywalker, да, думал об одном, писал о другом Огромнейшее Вам спасибо!

January 19, 2015

Всех приветствую!

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

Вот нужный кусок:

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-1558" id="menu-item-1558"><a>Меню</a><ul class="sub-menu">	<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1464 current_page_item menu-item-1541" id="menu-item-1541"><a href="#1">Подменю1</a></li>	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1542" id="menu-item-1542"><a href="#2">Подменю2</a></li></ul></li>

Мне необходимо изменить цвет фона только "Меню", а подменю оставить.

Я сделал так (дописал в style.css):

li#menu-item-1558 a { color: gold; }

Но таким образом цвет применяется и к подменю тоже (элементы "Подменю1", "Подменю2").

Помогите, пожалуйста.

Спасибо!

P.S. Вероятно, можно переопределить фон у дочек-сыновей (Подменю), но их там большое множество...

March 8, 2014

Друзья, подскажите, пожалуйста, каким образом реализовать показ скрытого текста через "Читать далее"?

Прбовал <сut>, но он не срабатывает.

И возможно ли это реализовать через DHTML?

Спасибо!

March 5, 2014

npofopr,

Вы вообще с какой целью интересуетесь? Что такое min-width я думаю вы понимаете.

В целом да, понимаю. Однако хотел повысить уровень понимания на реальном примере. Но пример этот, видимо, действительно выбран неудачно.

Ну фиговина и фиговина. Я так понимаю еще и только в ФФ

Mozilla Firefox актуальной версии, Google Chrome актуальной версии/неOpera актуальной версии, Internet Explorer 8/9/10/11.

и только у вас

Полагаю, что у всех обладателей вышеуказанных браузеров

Да и если смотреть, то может, что то по новее? Хотя бы этот форум.

А тут все чистенько и понятно - я уже исследовал

Рутрекер это большой проект. Возможно раньше была нужна та длина, которая стоит, потом что то изменилось, не везде все изменили. Всякое может быть. Можете обратиться к верстальщику Рутрекера, если найдете. Он сверстан еще на таблицах, что с ним происходило за долгие годы, уже никому не известно.

Пожалуй, Вы правы. Прошу прощения...

И благодарю за участие!

March 5, 2014

iKING,

Может быть, Вы хотели сказать ~~960px~~ 720px?

Прошу прощения:

#sidebar1_wrap {...min-width: 200px;}

#forums_list_wrap {...min-width: 510px;}

включает в себя

#idx-sidebar2  {...min-width: 240px;}

И т.к. #idx-sidebar2 входит в #forums_list_wrap, то получается 200 + 510 = 710, а 710 != 760, вот и не понимаю откуда эти общие 760 взялись... Да и не сжимается #forums_list_wrap до заявленных 510. Минимум по факту у него больше, а именно 752px. И получаем общую min-width: 200 + 752 = 952px и это далековато от заявленных 760px... Чертовщинка какая-то :wacko:

Я к тому, что #forums_list_wrap был обязан еще больше сжаться, но он почему-то этого не делает...

Кстати говоря, когда по горизонтали сжимаешь окно со страницей, то там с правой стороны появляется какая-то серая фиговина, которую Firebug относит к тегу <html> - что это вообще такое?

March 4, 2014

Всех приветствую!

Друзья, пытаюсь понять как работает min-width. Дернуло меня глянуть значение данного тега на сайте Рутрекера.

Если сжимать окно с вышеуказанной страницей, до тех пор пока содержимое не перестанет сжиматься, то получим некое значение. И это значение отличается от того, что заявлено у них в body:

body {...min-width: 760px;}

Оно явно больше. Тогда я решил пройтись по всему css и посмотреть какие еще элементы имеют min-width:

#sidebar1_wrap {...min-width: 210px;}

#forums_list_wrap {...min-width: 510px;}

#forums_list_wrap {...min-width: 240px;}

Сложил все вместе, получилось 950px - и все равно это не соответствует действительности.

1. Быть может, кто-нибудь может подсказать где там собака зарыта?

2. Зачем ставить общий min-width меньшим, чем составляющие min-width в сумме (760px < 950px)?

Благодарю!

November 7, 2013

rus,

каким образом бордер встанет ровно между ними, когда ширина таблицы 350px, а не 351px?

Да! Вы поняли о чем я :-)

и следующий вопрос: а какая собственно разница с какой ячейки ему заимствовать этот самый 1px?

Не знаю, мне вот стало интересно... и обидно за первую ячейку, т.к. в данной ситуации именно у нее и позаимствовали этот пиксель. А почему именно так и где это описано (ровно как и про "top...; left...; сильнее чем right...; bottom;") - непонятно...

Ну да Бог с ним :-)

Я извиняюсь, но все-таки Вы не могли бы пояснить как это:

Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

соответсвует вот этому:

Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Речь идет про width.

Если бы мне не порекомендовали Firebug, то я и не задался этим вопросом. Но когда я увидел вот это:

07-11-2013%2012-38-03.png

, то мне стало непонятно, а где же

ширина блока получается сложением значений width, padding, margin и border.

На скрине явно видно, что Firebug под шириной блока бордеры не учитывает (рамка вокруг ячейки не выделена).

Вопрос: почему?

давайте кое-что проясним: таблица с внешней границей (бордером), а ячейки (к примеру) без бордеров - тут вроде все понятно: ширина всей таблицы - 350px; рамка добавляет ей с левого и правого боку по 1px; итого, ширина таблицы уже не 350px, а 352px, верно?

Эм... Давайте проясним. Если ширина таблица задана 350px, то она и останется 350px, не смотря на наличие бордеров. Область без бордеров (уж не знаю как ее обозвать) будет равна 348px. А вот как Вы получили 352px мне не ясно. Или Вы это для меня так интерпретировали?

November 6, 2013

rus,

читать и в самом деле полезно: http://htmlbook.ru/css/border-collapse

Эм... И? :-)

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Про это я в курсе. Как это связано с моим вопросом:

Почему правый бордер первой ячейки закрывается на позиции 299px, а не на 300/301px? Такое ощущение, что приоритет по ширине отдается второй ячейке...

?

November 6, 2013

npofopr, оказывается читать иногда полезно))

Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Правда, это как-то противоречит вот этому:

Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Ну да ладно. Firebug, вероятно, показывает по умолчанию.

Благодарю!

Но вот ответа на второй вопрос не нашел...

2. Почему правый бордер первой ячейки (или это левый бордер второй ячейки?) закрывается на позиции 299px, а не на 300/301px? Такое ощущение, что приоритет по ширине отдается второй ячейке...

November 6, 2013

rus,

npofopr,

благодарю за подсказку!

Однако осталось еще пару вопросов.

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>cell width</title>  <style>   * {    margin: 0;    padding: 0;   }   table {    border: none;    border-collapse: collapse;   }   td {    border: 1px solid;   }  </style> </head> <body>     <table width=350>   <tr>    <td width=300>Cell1</td>    <td width=50>Cell2</td>   </tr>  </table> </body></html>

1. При наведении Firebug'ом на td маркером выделяется ячейка, но без учета border'а. Получается ширина ячейка не включает в себя border. Это действительно так?

2. 11.06.2013-14.27.png Почему правый бордер первой ячейки (или это левый бордер второй ячейки?) закрывается на позиции 299px, а не на 300/301px? Такое ощущение, что приоритет по ширине отдается второй ячейке...

November 6, 2013

rus,

для начала надо бы родителю (table) задать ширину

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>cell width</title>  <style>   td {     border: 1px solid;   }  </style> </head> <body>     <table width="350">   <tr>     <td width=300>Cell1</td>    <td width=50>Cell2</td>   </tr>  </table>  </body></html>

Сделал: 06-11-2013%2012-51-32.png

Еще непонятнее стало...

не упускайте из виду паддинги, маржины

Дык они же по умолчанию 0... Разве нет?

November 6, 2013

Всех приветствую!

Друзья, помогите, пожалуйста, понять в чем проблема.

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>cell width</title>  <style>   td {     border: 1px solid;   }  </style> </head> <body>     <table>   <tr>     <td width=300>Cell1</td>    <td width=50>Cell2</td>   </tr>  </table>  </body></html>

На выходе: 06-11-2013%2012-35-25.png

Собственно, вопрос: откуда получается ширина размером в 304px, когда она задается 300px.

Спасибо!

February 3, 2013

1) Ребят, поведайте, пожалуйста, полному нубу откуда повелось переопределять тэг html в css?


html {
	background-color: #FFFFFF;
	background-image: url("../../Img/bckgrnd.jpg");
	background-position: center top;
	background-repeat: repeat;
	min-height: 400px;
}

Дело в том, что, подобных приемов в уроках я не встречал. Вроде как всегда приучали работать с body. Но на практике очень часто вижу подобное.

2) Никак не могу понять назначение height: 100% применительно к тому же html:


html {
...
height: 100%;
}

- что это дает? Каким образом происходит растяжение по высоте?

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

В общем, подскажите, пожалуйста

Благодарю!

November 26, 2012

Дык все-таки, ребят, как это пофиксить? Некрасиво же, да и нелогично.

November 25, 2012

Vadimka, огромнейшее спасибо Вам!

Для меня это очень сложно, поэтому решил максимально упростить: http://jsfiddle.net/The_Immortal/kVxDU/

November 25, 2012

Пытаюсь редактить готовый шаблон. Имеется список ссылок в виде маркированного списка: http://jsfiddle.net/The_Immortal/kVxDU/

Необходимо этот список оцентрировать... Я так понимаю, надо центрировать div, в котором содержится ul. Поэтому написал:

 <div class="usermenu"; align="center">

Но, как видите, результата никакого

November 25, 2012

npofopr,

Что то у меня ничего не остается.
Где смотрите?

FireFox 16.0.2. А при каком распорядке этих псевдоклассов смотрите и в каком браузере?

Лучше наглядно показать: http://jsfiddle.net/The_Immortal/YXuxD/ - при наведении фиолетовая подсветка, а при щелчке - черная.

Теперь проделайте следующее: наведите курсор на ссылку (она подсветится фиолетовым), потом зажмите левую кнопку мышки на ссылке (она подсветится черным), далее отщелкните ее в путом месте. Ссылка остается подсвечиваться черным. И если сейчас на нее навести курсор, то она также останется с черной подсветкой, хотя должна быть с фиолетовой.

Sign In

The_Immortal

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by The_Immortal

Растягивание изображения на весь экран

Растягивание изображения на весь экран

Растягивание изображения на весь экран

Растягивание изображения на весь экран

Растягивание изображения на весь экран

Растягивание изображения на весь экран

Сохранение данных на странице

Сохранение данных на странице

Изменение цвета фона меню

Изменение цвета фона меню

"Читать далее"

min-width на примере

min-width на примере

min-width на примере

Ширина ячеек таблицы

Ширина ячеек таблицы

Ширина ячеек таблицы

Ширина ячеек таблицы

Ширина ячеек таблицы

Ширина ячеек таблицы

стиль html в css'е

Псевдоклассы

Центрирование списка

Центрирование списка

Псевдоклассы

Forums

Important Information