Последнее обновление:
October 18, 2019

Есть мысль... Жми, напиши!
html

  • Рубрик нет

Псевдоэлементы BEFORE и AFTER. Растягиваем по границам родительского блока.

Разметка: [cce lang=»html»] CAPTION [/cce] Стили: [cce lang=»css»] .wrapper { width: 500px; } h2 { height: 33px; text-align: center; width: 100%; display: table-row; } h2:BEFORE, h2:AFTER { position: relative; display: table-cell; content: » «; width: 50%; height: 33px; background: #ff00ff; } h2 span { margin:0 20px; } [/cce] ДЕМКА

Views :

679

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

После продолжительного перерыва вернулся к вёрстке и забыл сервисы, которыми частенько пользовался. Оставлю их в этой заметке. P.S. Все ссылки открываются в новом окне/вкладке. Сервис для генерации border-image:  http://border-image.com/ Статья про border-images: http://habrahabr.ru/post/141658/ Сервис генерации встраивания шрифтов (font-family, font-face generator): http://everythingfonts.com/font-face Сервис кодирования картинок в Base64 (для иконок и прочих мелких): http://webcodertools.com/imagetobase64converter/Create Сервис создание спрайтов (опять же для иконок и […]

Views :

743

Небольшой пример выравнивания картинке по вертикали и горизонтали не зная её размеров

Вся фишка в  line-height, смотрим:  тынц

Views :

790

Css height пропорционально width, или width=height

На днях возникла необходимость, что бы высота элемента была пропорциональна ширине элемента. Получился вот такой простенький кодик: .element { position: relative; width:60%; height: 0; padding-bottom: 22%; } Как ни странно, но это работает во всех браузерах =) Упс, выяснилось, что внутри блока height 100% не будет работать =( Вот такой метод работает: <div id="container"> <div […]

Views :

3199

Div по центру, выравнивание div

Выравнивание содержимого: [cc escaped=»true» lang=»css»] < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> div по центру, выравнивание div centered! [/cc] Выравнивание по центру страницы: [cc escaped=»true» lang=»css»] < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Вертикальное центрирование элемента неизвестной ширины и высоты centered! [/cc]

Views :

1453

Баг с позиционирыванием бэграунда по центру в firefox и safari

[cc lang=»css»] html { margin-left: -1px; overflow-Y: scroll; } [/cc]

Views :

866

Выравнивание полей формы с помощью CSS

Имя Фамилия Место жительства .field {clear:both; text-align:right; line-height:25px;} label {float:left; padding-right:10px;} .main {float:left} Вот как на практике:тыц

Views :

2048

Прижать div footer к низу страницы

Имеем основу: [cc lang=»html»] [/cc] Обычно юзаю этот способ: [cc lang=»css»] * { margin: 0; padding: 0; } html {height: 100%;} body { height: auto !important; height: 100%; min-height: 100%; position: relative; } #content { padding-bottom: 100px; } #footer { position: absolute; bottom: 0; height: 80px; } [/cc] Ели не поможет можно дописать: [cc lang=»css»] […]

Views :

3483