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

Высота – height:100% с помощью Jquery

12 November

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

Часто требуется задать высоту 100% у какого либо div’a.
Есть множество способов, наиболее оптимальным для меня является решение с помощью Jquery:

      <script type="text/javascript">
       $(document).ready(function () {
           $("#sidebar").height($(document).height());
      });
      </script>

где height($(document) – указывает на то, что 100% высота будет относительно всего документа.
Также можно задать высоту относительно другого элемента (н-р div#сolumns):

      <script type="text/javascript">
       $(document).ready(function () {
           $("#sidebar").height($("#columns").height());
      });
      </script>
, , ,

Jquery. Прозрачность элементов

9 August

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

1) Убрать прозрачность элемента при наведении

$(document).ready(function(){
$('.fade-area-ul li img').each(function(){
      $(this).animate({opacity:'0.6'},1);
      $(this).mouseover(function(){
          $(this).animate({opacity:'1.0'},500);
      });
      $(this).mouseout(function(){
          $(this).animate({opacity:'0.6'},100);
      });
});
});

opacity:’0.6′ – прозрачность, где 0.6 уровень прозрачности.
В данном случае, после загрузки страницы, прозрачность картинки-ссылки будет 0.6. При наведении на картинку – 1.0

2) Добавить прозрачность элементов при наведении

$(document).ready(function() {
$('.fade-area-1').children().hover(function() {
$(this).siblings().stop().fadeTo(500,0.5);
}, function() {
$(this).siblings().stop().fadeTo(500,1);
});
, ,

Отступ первой строки абзаца

4 August

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

p {
 text-indent: 20px; /* Отступ первой строки */
}
,

Растягивание высоты IFRAME по содержимому

3 August

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

<iframe style='width: 100%;' frameborder=0 marginheight=0 marginwidth=0 onload='o=this.contentWindow.document.body; this.style.height=o.scrollHeight; this.style.height=o.scrollHeight-o.clientHeight+o.offsetHeight;'></iframe>

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

12»