Верстка сайтов

Cufon. Подключаем свой шрифт на сайт.

2 July

Опубликовал Axel в JavaScript

1 комментарий

Решение на JavaScript. Поддерживаются .otf и .ttf шрифты. Поддерживаются все современные браузеры.
1. Качаем библиотеку
2. Генерируем файл шрифта
Подробнее >

, , ,

Автоматический перенос длинной строки без пробелов

30 June

Опубликовал Axel в Верстка сайтов 

p {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
, ,
div

Растянуть div по содержимому

28 June

Опубликовал Axel в Верстка сайтов

div

1) C помощью clear:both

<div>
  содержимое
  <div style="clear:both;"></div>
</div>

2) В css прописать: height:auto;

, ,

Заменить кнопку submit картинкой через CSS

20 June

Опубликовал Axel в Верстка сайтов

Без JS, кроссбраузерно, валидно:

#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(img.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
, ,

Фон в WYSIWYG редакторе FCKeditor

15 December

Опубликовал Axel в Drupal

Спонсор:
Узнай про финансы в Казахстане: курсы валют, кредиты, банки.

Часто приходится фиксить body у FCKeditor, если в теме оформления используется фон, отличный от белого. Пример (до):

Видно, что текст в редакторе сливается в фоном. Проблема решается добавлением в файл modules/fckeditor/fckeditor.config.js (sites/all/modules/fckeditor/fckeditor.config.js) строк:

FCKConfig.BodyId = “primary”;
FCKConfig.BodyClass = “singlepage”;
FCKConfig.EditorAreaStyles = “body{background:#FFFFFF;text-align:left;}”;
FCKConfig.EditorAreaStyles = “body{background:#FFFFFF;text-align:left;font-size:0.8em}”;

Тем самым, мы присваиваем body редактора свои стили. В данном случае – белый фон, выравнивание текста по левому краю и размер шрифта 0.8em.

В итоге получим:

HTML 5

25 January

Опубликовал Axel в Верстка сайтов

22 января, на сайте консорциума W3C, появилась новость о выходе “чернового” варианта спецификации HTML 5. С момента выхода HTML 4, прошло уже 12 лет. Введение новых стандартов и расширение данного языка разметки просто необходимо.
В HTML 5 появилось несколько новых тегов. Таких как <header>, <footer> , <section>, <nav>, <figure>. Теги <header>, <footer> предназначены для разделения страницы на части – верхняя, нижняя. В принципе это теже <p>, <div>, т.е служат для разделения на абзацы. Просмотрев спецификацию, пришел к выводу, что многое изменено/добавлено. Остается ждать когда это все будут поддерживать браузеры. Но это видимо произойдет не скоро.

Отличия от HTML 4:

  • Новые правила парсинга;
  • Новые элементы: section, video, progress, nav, meter, time, aside, canvas;
  • Новые атрибуты полей ввода (Input): time, email, url;
  • Новые атрибуты: ping, charset, async;
  • Глобальные атрибуты применимые для всех элементов документа: id, tabindex, repeat;
  • Прекращена поддержка элементов: center, font, strike.

Интересную статью про HTML 5 нашел на хабрахабре – http://habrahabr.ru/blog/webdev/32158.html

Шпаргалки для веб разработчика

20 December

Опубликовал Axel в Верстка сайтов

Собрал небольшую коллекцию шпаргалок по популярным языкам программирования. Можно распечатать и повесить на стенку =) В каждом архиве лежит по два файла: шпоры в pdf и png.

Подробнее >