coding: css

Показаны сообщения с ярлыком css. Показать все сообщения

среда, 15 апреля 2020 г.

Максимальное количество символов в атрибуте alt у <img>?

#html #css

                    
Какое максимальное количество символов можно добавить в атрибут alt у метки ?

Ответы

Ответ 1


В HTML 4 стоит ограничение в 64Кб: http://www.w3.org/TR/REC-html40/sgml/sgmldecl.html
. В HTML 5, похоже, то же самое.

Как сделать iframe с динамической высотой, задаваемой внутренним содержимым самого фрейма

#html #css #iframe

                    
Добрый день. Как известно iframe кушает лишь четкие указания height в px, а нужно
что-бы вставляемый iframe растягивал родительский элемент, в зависимости от размера
содержимого самого iframe, т.к. содержимое - динамическое. Кто знает какие решения,
простые или сложные (JS, JQ и т.д.)?

Ответы

Ответ 1






    
        
    


Скрипт вставлять в тот документ который загружается в iframe, не забудьте также подключить
в этот файл jQuery (проверял на 1.6.2)
Посмотрите еще вот это - http://host.sonspring.com/iframe/


Ответ 2





Работает, но если содержимое больше высоты монитора, то устанавливается высота которая
видна, если бы я открыл этот Iframe в отдельном окне.

Убрать отображение полос прокрутки

#html #css

                    
У меня есть небольшой блок и полосы прокрутки к нему. Надо чтобы полосы прокрутки
работали (колесом крутить если), а сами полосы не были видны. hidden убирает их, но
работоспособность также проходит.

Ответы

Ответ 1


Что бы блок прокручивался - а полос не было - это нужно внедрять жску. Есть много
плагинов, которые скрывают полосы прокрутки, но сам скол работает. А средствами ксс
- не видел такого еще.

Вот один из них slimscroll


Ответ 2


в css

::-webkit-scrollbar {
visibility: hidden;
width: 0px;
}

понедельник, 13 апреля 2020 г.

Как поправить css для вложенного элемента?

#css3 #css

                    
Есть div.postcontent. 

В нем могут быть просто ссылки: div.postcontent p a 

Ссылки могут содержать картинку: div.postcontent p a img

Есть навороченный css для ссылок. Мне нужно его отключить для ссылок, содержащих
картинки. Т.е. для варианта (1), он должен работать, для (2) не работать.
.postcontent a:before{
    content: "\25BA";
    font-size: 80%;
    display: inline-block;
    padding-right: 3px;
    pointer-events: none;
}

Ответы

Ответ 1


Интересный случай...Что-то решения я не вижу.
Попробуй вот-так
.postcontent a{position:relative}
.postcontent a img:before{position:absolute;//ваш код}

Ты ведь сможешь отпозиционировать относительно A.


Ответ 2


Попробуй: 
< img ... onload="this.parentNode.className +=' myOverrideClass'"/>

Хотя у @koza4ok лучше.

Расположение трех блоков внутри блока с заданной высотой

#css3 #css #html #html5

                    
Есть блок main с ЗАДАННОЙ высотой в пикселях.
Есть 3 внутренних блока:

top - должен масштабироваться по контенту и ужимать блок middle
middle - должен быть с появляющейся полосой прокрутки (если
   не хватает места контенту)
buttom - с фиксированной высотой в пикселях

Как сделать так, чтобы блок main НЕ растягивался, а оставался такой же высотой, в
тоже время блок top ужимал блок middle своим содержимым?
#main{
    height:200px !important;
    width:100px;
    background:blue;
}
#top{
    background:green;
}
#middle{
    background:red;
    height:100%;
    overflow: auto;
}
#buttom{
    background:blue;
    height:50px;
    bottom:0
}


    Текст текст текст текст текст текст текст текст текст текст текст
    Текст текст текст Текст текст текст Текст текст текст Текст
текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст 
    Текст текст текст


Есть какие-нибудь предположения, как так сделать?
http://jsfiddle.net/5fCcy/3/

Ответы

Ответ 1


У CSS с высотой вообще большие проблемы, так что я бы не мучился и решил через JS.
Скрипт можно упростить, это я для наглядности так расписал. А пользователи с отключенным
JS пусть смотрят упрощенную версию сайта :)

Зависимость height от widht (в %)

#вёрстка #css #height

                    
Добрый вечер! Потихоньку начал осваивать CSS, поэтому прошу — сильно не пинайте,
если вопрос глупый. :)
Произвожу блочную верстку страницы, все вычисления размеров блоков ведутся в %.
Проблема в следующем — поскольку при изменении формата разрешения (4:3 или 16:9)
изменяется вычисление параметра widht, как для контейнера (контейнер у меня = 100%),
так и для блока (=10%), то весь блок растягивается и превращается в прямоугольник,
а мне нужны квадраты.
Вопрос: что нужно сделать, чтобы параметр height вычислялся из widht и был ему равен? 
То есть как сделать зависимость height от widht, чтобы height подстраивался под widht,
и тем самым высота блока была равна ширине и при этом параметр widht мог бы спокойно
"гулять" в зависимости от формата экрана? Получается, height должен "гулять" вместе
с widht... Ну как-то так. :)

Ответы

Ответ 1


Use CSS to Specify the Aspect Ratio of a Fluid Element
Creating Intrinsic Ratios for Video
Адаптивные фоновые изображения (на русском)
пример


Ответ 2


.square{
    width:20%;
    border:1px solid blue;
}

.square::before{
    content:"";
    display:block;
    padding-top:100%;
}

Квадратные thumbnails из не квадратных изображений?

#javascript #изображения #thumbnails #php #css

                    
Уважаемое сообщество, подскажите пожалуйста куда копать? Проблема заключается вот в чем:
Есть фотографии из соц сетей (вконтакте, инстаграм например). Изображения вытаскиваются
из api, и обычно в ответе от api присутствует thumbnail фотографии (src_small к примеру).
В случае с инстаграмом всё отлично - там по дефолту квадратные изображения. В случае
с остальными соц сетями - изображения там какие попадутся. 
Так вот в чем вопрос: возможно ли средствами css отображать только квадратную область
изображения ? Просто обрезать на сервере - довольно трудозатратная операция, если фотографии
будут грузиться пачками по 20 (например). И если будет много пользователей делать это
одновременно, страшно подумать что случится с моим дешевым хостингом (а пока вообще
бесплатным) :)

Ответы

Ответ 1


Осмелюсь как вариант предложить такой индусский код: http://jsfiddle.net/ptEy8/
Но очень хотелось бы увидеть ещё варианты! Хороший вопрос.

Изменить стиль блока при нажатии

#javascript #html #jquery #css

Не знаю JavaScript вообще. Только CSS и HTML. Помогите написать код, пожалуйста.
Допустим, у меня есть блок A

У него есть стиль
#a {width:100px; height:100px; position:absolute (или relative, не суть); top:0px}

При нажатии на этот блок нужно чтобы у него был
top:100px; left:50px

к примеру.
Насколько мне известно, средствами CSS можно лишь сделать так, чтобы на время нажатия
на этот блок он перемещался, а когда отпустить кнопку мыши - он встанет на свое место.
Как сделать, чтобы при клике на этот блок он переместился, а при еще одном клике встал
назад? Очень, очень и очень желательно без JavaScript, ибо я его пока что ВООБЩЕ не
знаю, если возможно. Если невозможно, помогите написать скрипт-шаблон, и хотя бы отдаленно
расскажите какая команда за что отвечает. Спасибо большое, надеюсь поможете))
UPD Возможно сделать так, чтобы при клике у него менялись свойства? Или при клике
вместо id="a" у него становился id="a1" ? Это возможно?

Ответы

Ответ 1


Уже тыщу раз отвечал на подобный вопрос:
HTML

    
    


CSS
#a {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left: 0;
    border: 1px solid black;
    transition: all 0.5s;
}
.switchable input {
    display:none;
}
.switchable input:checked+#a {
    top:100px;
    left:50px
}

http://jsfiddle.net/oceog/sFEH4/
фокус в использовании :checked и следующего за ним div.
ограничение способа - нельзя помещать в такой  никаких input


Ответ 2


Я бы посоветовал лучше переключать классы, а не менять конкретные свойства. Например,
так jsFiddle. Я закомментировал второй вариант, который помимо того что переключает
класс, меняет и id элемента.

Верстка, css. Артефакты при масштабировании

#масштабирование #вёрстка #css

                    
Всем привет. Возникла такая проблема. При изменении масштаба в хроме (зажать Ctrl
и крутить колесико) в верстке возникают артефакты, в виде 1 лишнего пикселя, или же
наоборот, обрезание дивов на пиксель где - нибудь сбоку. Подскажите, пожалуйста, как
с этим можно бороться? А если нельзя, то как объяснить появление этих пикселей. 
Адрес сайта для наглядности сброшу, если будет нужен

Ответы

Ответ 1


На все воля браузера. Происходит естественно в результате округлений при расчетах
масштабирования. Для примера 955 px как уменьшить в 2 раза? 955/2=477,5. Как отобразить
полпикселя? Естественно округлив до целого числа, 478. Вот и весь секрет.


Ответ 2


Про артефакты при масштабировании почитайте здесь.

Как можно минимизированный CSS привести в нормальный вид?

#css

                    
Как можно минимизированный CSS привести в нормальный вид программными средствами?

Подходит:


Библиотека
Программный код
API сервиса


Не подходит:


Онлайн-сервис (этот вариант привлекает спам)

Ответы

Ответ 1


В PHPStorm можно минифицированный код привести в нормальный (Code > Reformat Code
- Ctrl + Alt + L). Комбинация может разниться от версии Схемы (то бишь настроек редактора).
Указано сочетания для Default Scheme.

По поводу минификации кода есть отдельные статьи и плагины.


Ответ 2


Можно воспользоваться программой KOALA. Не только минимизирует код, но компилирует
LESS  и SASS в css  минимизирует js файлы и многое другое.

А на счет привести в нормальный вид пользуюсь плагином, html-css-js prettify  

кнопки ctrl+shift+h выравнивает код js css и html

Слайдер под jquery > 1.8

#jquery #slider #изображения #html #css

                    
Есть возможность адаптировать этот плагин под jquery старше 1.9 , дело в том, что
он с 1.8 > не работает, а слайдер хорош www.tympanus.net/codrops/2011/04/28/rotating-image-slider/

Ответы

Ответ 1


Любой плагин можно со старых версий перевести на новую. Подключите  jQuery Migrate
и вычисляйте устаревшие методы, заменяя их на новын аналоги. Вот к примеру $.browser,
который используется в том плагине - с версии 1.9 удален. Естественно, что он вызывает
ошибку.

CSS: перенос элементов

#css3 #html #javascript #css

                    
Существует решение для построения дерева с использованием HTML + CSS. Еще немного
JS используется для реализации функции свертывания узлов дерева.
Вот собственно и сам пример.
Проблема в том, что при большом количестве узлов, последние не помещаются в родительский
контейнер. Можете предложить какие-то идеи по устранению данной проблемы? Что только
не пробовал: и работал со свойством overflow и javascript задействовал - безрезультатно.
Буду рад как готовому решению, так и его словесному описанию. Заранее спасибо.
P.S.: Оригинал - CSS3 Family Tree

Ответы

Ответ 1


Есть одна мысль. Сделать
ul { white-space: nowrap; }
li { display: inline-block!important; }

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

Динамическая ширина у input и select

#html #css #input #форма #html_select

                    
Есть форма с полями типа text и select со стоящими в линию метками (label). Все метки
и поля могут иметь различную длину (ну, как всегда в формах). label'ы выравниваются
влево, input и select левым краем примыкают к label, и в общем-то цель состоит в том,
чтобы выровнять инпуты и селекты по правому краю так, чтобы они как бы растягивались
автоматически от конца label до правого края контейнера и в итоге имели различную длину,
но четкое выравнивание справа. Картинки загружать не дают, попробую тут нарисовать

Как по умолчанию:

Метка поля --------------

Более длинная метка поля --------------

Ещё метка поля --------------

Как нужно мне:

Метка поля -------------------------------------

Более длинная метка поля ----------------

Ещё метка поля -------------------------------

Ответы

Ответ 1


Можно например так: http://jsfiddle.net/DdnQ2/



table{
    width:500px;
}
td{
    width:0;
    white-space:nowrap;
}
td.field{
    width:100%;
}
input{
    width:100%;
}

    
        
            слово
        
        
            
        
    


    
        
            длинное слово
        
        
            
        
    





Некоторых особо крутых верстальщиков смущает использование таблиц для позиционирования
элементов. Чтобы таковые не смущались, можно выполнить рекомендацию w3c и поставить
таблицам атрибут role=presentation


Ответ 2


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



/* Reset CSS */
* {
  box-sizing: border-box;
  outline: 0;
  margin: 0;
}

.divMain:after {
  content: '';
  display: block;
  clear: both;
}
.divA {
  float: left;
}
.divB {
  overflow: hidden;
}
.divB input {
  width: 100%;
}

  
    Я редактируюсь!

суббота, 11 апреля 2020 г.

Background-image не работает

#html #css

                    
Здравствуйте! Свойство background-image не работает в файле css. 
Файл находится в папке css.
css/style.css
body {
 background-image: url(img/a.png);
}

index.html



 
 New Page
 





Но в самом файле html свойство background-image работает. 



 
 New Page
 





Подскажите, почему не работает, если я размещаю в в файле css?

Ответы

Ответ 1


в css файле пропишите
body {
   background-image: url(../img/a.png); /* выходим из папки css на уровень вверх,
и заходим в папку img */
}


Ответ 2


Между тегами  у вас некорректно написана ссылка на файл CSS.
Ваш код должен выглядеть так:



    
    New Page
    





Как видите вы не дописали type="text/css" в теге link.


Ответ 3


body {
   background-image: url(../img/a.png);
  }

http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki


Ответ 4


пол суток пробовал 

background-image: url(../img/a.png);

background-image: url("../img/a.png");


,а оказывается надо вот так

background-image: url('../img/a.png');


все заработало ;)


Ответ 5


Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался
часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась
в том, что не правильно был указан путь к картинке (файлу), и как не старался - ничего
не помогало. Потом, когда я начал думать что html и css - не моё, мне вдруг пришла
в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте
"Путь по умолчанию" было отмечено "запомнить последнюю директорию", я переставил отметку
на "пройти за текущим документом", а в значении селектора background-image указал папку
и файл: background-image: url(images/1.jpg)
И все заработало.
Надеюсь, кому да поможет инфа.


Ответ 6


Судя по имени стиля вам нужен фон страницы. 
Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png
или /img/a.png
body {
    margin: 0;
    padding: 0;
        background: url("img/a.png") repeat scroll left top #FFFFFF;
        overflow-y: scroll;

    }


Ответ 7


Может помочь указания размеров картинки фона.

.image {
    background-image: url(img/a.png);
    width: 50px; /* ширина */
    height: 50px; /* высота */
}

При нажатии вставить HTML коды в textarea

#jquery #html #css #javascript

                    
Мучаюсь уж как 2 дня, подскажите как сделать такое: 
Есть картинки(иконки)сверху,  нужно, чтобы при нажатие на любую из них в textarea
который ниже находиться вставлялись спец коды к примеру , то есть HTML коды.
мне подсказали что это делается на jquery.

Ответы

Ответ 1


Используй любой из WYSIWYG-редакторов.
Если по-своему, то можно так:
HTML:

b

JS:
var ta = $('#qwe'),
    ico = $('.icon');

ico.on('click', function(){
    switch ($(this).data('type')){
        case 'b':
            ta.val( ta.val() + '' );
            break;
//можно дописать другие кейсы для новых иконок
    }
});

Демо
Можно улучшить, чтобы обрамляло выделенный текст.

Как сделать сразу мобильное меню bootstrap

#jquery #html #css #bootstrap

                    
Как сделать сразу мобильное меню, если пунктов слишком много по ширине, чтобы они
не выстраивались в два этажа.
Вот картинка:

Ответы

Ответ 1



  
    Dropdown 
    
      Action
      Another action
      Something else here
      
      Separated link
    
  


просто хардкод! это если нужно постоянное отображение дропменю


Ответ 2


Если работать с bootstrap на уровне less, то в файле variables.less настраивается
переменная @grid-float-breakpoint.
Customize and download
находим эту переменную, задаём значение(например 1280px) меньше которого меню коллапсирует.
Скачиваем, пользуемся.

Обрезание блоков на Ipad

#ipad #html #ios #css

                    
При просмотре кода на Ipad'e блоки обрезаны с правой стороны, хотя ширина 100%. В
чем проблема?
http://rghost.ru/55715542

Ответы

Ответ 1


 - это должно помочь 
width - установите свою ширину
По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш
дизайн может не соответствовать данному диапазону. Значение может быть для шаблона
слишком большим или маленьким. 
посмотрите здесь

Расположить элементы в круге

#html #css

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

Ответы

Ответ 1


http://jsfiddle.net/oceog/6kNTL/7/

Как растянуть div-блок на всю ширину страницы?

#html #css

                    
Проблема в том, что через комп див блок растягивается правильно, во всю ширину страницы,
а через планшет или телефон див растягивается до границы экрана, а при прокрутке вправо
или уменьшении масштаба там и остаётся. Скрин в самом низу с примером меньшенного масштаба.
Блок отмечен красной стрелкой.

Что пробовал и не помогало:

body { width: 100%; height: 100%; }
.div { min-width: 100%; min-height: 100%; position: relative; }

Ответы

Ответ 1


Так происходит, когда блоки сайта не помещаются в ширину экрана и остаются за его
границами. Одно из следствий - появляется горизонтальный скролл. При этом те блоки,
ширина которых была задана как width: 100% - остаются с такой шириной. В итоге вы скроллите
вправо, и видите пустую область.

Решить это быстро можно вот так:

body {
  min-width: 1000px;
}


Этим вы зададите для страницы минимальную ширину, в которую все ваши блоки гарантированно
впишутся. И даже если ширина экрана будет недостаточной для отображения всех блоков,
и появится горизонтальный скролл - блоки с width: 100% будут отображаться во всю указанную
ширину 1000px.

Плюс, полезно бывает задать эту же величину в мета-теге в head:




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

Не работает шрифт Google Fonts

#html #css

                    
Добрый день.  
Использую шрифт Fira Sans. 


Подключаю таким способом. 
Пример css:
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
font-style: italic;

На телефоне работает, на моём работает, на соседних нет. У кого-то работает, у кого
опять же нет. В чём проблема? Заранее спасибо.

Адрес сайта: bm.webbys.ru

Ответы

Ответ 1


Попробуйте добавить "s" в протоколе http://fonts.googleapis.com/css?    family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic',
чтобы получилось https://


Ответ 2


Попробуй через @import
И еще попробуй с body убрать определение шрифта, вообще другие шрифты убери, кроме
твоего, и посмотри.


Ответ 3


Попробуйте добавить в head:




Ответ 4


Может поможет пример как я подключал шрифт для странички:

body { font-family: 'PT Sans', sans-serif; }
@font-face {font-family: 'PT Sans'; 
    src: url('../fonts/pts55f_w.eot'); 
    src: local('PT Sans'), url('../fonts/PTS55F_W.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTS55F_W.woff') format('woff'),url('../fonts/PTS55F_W.ttf') format('truetype'),
url('../fonts/PTS55F_W.svg#PTSans-Regular') format('svg');}

Страницы

Поиск по вопросам

среда, 15 апреля 2020 г.

Ответы

Ответ 1

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответ 2

понедельник, 13 апреля 2020 г.

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответы

Ответ 1

Ответы

Ответ 1

Ответ 2

суббота, 11 апреля 2020 г.

Ответы

Ответ 1

Ответ 2

Ответ 3

Ответ 4

Ответ 5

Ответ 6

Ответ 7

Ответы

Ответ 1

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответы

Ответ 1

Ответы

Ответ 1

Ответы

Ответ 1

Ответ 2

Ответ 3

Ответ 4

среда, 15 апреля 2020 г.

понедельник, 13 апреля 2020 г.

суббота, 11 апреля 2020 г.