Вверх

Блог
RSS лента

HTML

Всем мой пламенный! И – сразу к делу!

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

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

Уверен, что и любителя, и специалиста не раз посещала мысль о создании супер нестандартного оформления в html текста, который бы вызывал интерес с первого взгляда при заходе на сайт, или о таком дизайне каталога, который бы мог стать ярким образцом в череде представлений интернет-магазинов, досок объявлений, порталов недвижимости, туристических сайтов и др.

Готов предложить в html примеры, которые эффектно покажут действие различных тегов в процессе неклассического и даже неожиданного применения. Уверен, что каждому из сайтостроителей приходится сталкиваться с ситуациями поиска, как сделать в html ту или иную структуру, прописать коды ячеек таблицы с меняющимися в размерах границами, устроить праздник спектра в тексте или на ссылках, а также многое другое.

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

Так и хочется сказать, что мы – одна IT-шная семья и давайте помогать друг другу.

Странная проблема с шириной ячеек в IE

Например вам нужно сделать таблицу с какими то товарами или еще какими то данными, или сверстать дизайн на сайт.
Припустим у вас есть шапка в таблице которая объединяет 6-ть ячеек которые будут ниже (или выше), заголовок может например повторятся.
Так же таблица у вас должна растягиваться на всю ширину браузера. 5ть из 6-ти ячеек с фиксированной шириной, одна ячейка тянется.
Но вот беда в том что если объединять ячейки то ИЕ делает им ширину как захочет, то есть фиксированные ячейки имеют не ту ширину которую мы указывали.

Починить можно таким вот способом (по крайней мере в моем случае это помогло):

  1. <table width="100%" border="1">
  2. <tr>
  3. <td colspan="6">Я самый большой заголовок, очень большой большой большой большой большой большой большой большой большой большой</td>
  4. </tr>
  5.  
  6. <tr>
  7. <td width="50">6688.66</td>
  8. <td width="50">66.6</td>
  9. <td width="100%">Какое то содержание</td>
  10. <td width="50">44.4</td>
  11. <td width="50">33.0</td>
  12. <td width="50">0.3</td>
  13. </tr>
  14.  
  15. <tr>

Ширина options select IE

Как вы знаете в Интернет експлоере есть такая неприятная штука как если вы укажете фиксированную ширину select например в 50 пикселей, то и выпадающие свойства будут такого же размера, когда как в остальных браузерах выпадающие свойства растягиваются на ширину самого длинного option. То есть в ИЕ у вас всё обрежится, что не есть красиво.

Выглядит это примерно так:

А в других браузерах так:

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

Делается следующим образом. Для начала скриптец:

  1. $(".sel-4").mousedown(function(){
  2. if($.browser.msie) {
  3. $(this).css("width","auto");
  4. }
  5. });
  6. $(".sel-4").change(function(){
  7. if ($.browser.msie) {
  8. $(this).css("width","50px");

height: 100% с помощью jquery (вложений)

Я думаю что многие сталкивались с проблемой когда при соблюдении стандартов (<!DOCTYPE ), нужно растянуть таблицу или див на весь экран браузера, ну это можно побороть с помощью цсс, но вот когда в этом диве есть вложение тут уже тяжелее. И тут на помощь приходит jquery.
Обрисую мою ситуацию. Была у меня табличка в одной из ячеек был див который нужно было тянуть по все высоте этой ячейки. И сделал я это вот так:

  1. <script type="text/javascript">
  2.  
  3.  $(document).ready(function () {  
  4.      $("#left_menu").height($("#left_td").height());    
  5. });
  6.  
  7. </script>
  8. <table>
  9.  <tr>
  10.   <td id="left_td">
  11.    <div id="left_menu"></div>
  12.   </td>
  13.  </tr>
  14. </table>

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

Если вам нужно что бы просто див или таблица была на весь экран то это можно сделать так:

IE 6, IE 7, IE 8 на одном компьюторе

Я думаю что верстальщики часто сталкивались с проблемой когда нужно проверить верстку в разных браузерах. Вы можете поставить любой браузер, но вот ИЕ например живет своей жизнью, у него в каждой версии все может выглядеть по разному. И еще незадача на один компьютер можно установить одну версию ИЕ, но как же быть, проверять то нужно. А выход в следующем можно использовать портативные версии (portable). То есть ставите на компьютер себе например ИЕ8, а остальные версии "переносные" и тестируете себе на здоровье.

Скачать ИЕ6 можно здесь.
Скачать ИЕ7 можно здесь.

Как обмануть валидатор или хаки для разных браузеров, в том числе и ИЕ/IE

Что бы устранить какой либо баг в всеми "любимом" браузере ИЕ (руки бы переломал разработчикам за этот браузер) есть несколько способов, это использование условных операторов и использовать хаки в файле css.
Мелкософты понимая что их браузер далек от совершенства сами же и предлагают лекарства от ихних багов, удивительная логика.

Вот собствено условные операторы:
<!--[if condition]> HTML <![endif]-->
Вместо condition вы можете вставить такие значения:
IE
все версии эксплорера
lt IE 7
Версия ИЕ ниже семерки
lte IE
Версии ниже указанной или же равной ей.
IE 7
только указанная версия
gte IE 7
версии выше указанной или равной ей
gt IE 7
версии выше указанной

Примерчик:

  1. <head>
  2.  
  3. <title>Test</title>
  4. <link href="style.css" rel="stylesheet" type="text/css">

META-теги — инструмент хорошего сайта?

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

Можно попытаться разобраться — насколько эффективно сейчас использование тех или иных META-тегов при построении сайтов, действительно ли зря большинство начинающих web-мастеров и web-дизайнеров не уделяют им особого внимания, и может ли правильное их использование позволить значительно увеличить посещаемость сайта.

META-теги - это конструкции, которые размещаются в заголовке страницы, и выглядят они примерно следующим образом:

Вертикальный текст в ячейках

Необходимо, чтобы текст в ячейках с классом "vertical" при отображении в браузере имел вертикальное направление "снизу-вверх"
Средствами CSS это возможно реализовать только в Internet Explorer, воспользовавшись свойством writing-mode. Для необходимого направления текста придётся воспользоваться фильтрами flipH и flipV
А как же быть с остальными браузерами, которые не поддерживают ни фильтры, ни свойство writing-mode?

PNG-прозрачность в IE

Припустим нам нужнен фон с прозрачной png-шкой, а на нем розместить ссылку.
Делаем так:

<div class="button_bg"><a href="адресс ссылки">Ссылка</a></div>

А в css стиль добавляем:

  1. .button_bg{
  2.     background: url("botton_menu.png") no-repeat;
  3.    width: 243px;
  4.     height: 34px;
  5.    padding-left: 15px;
  6.    padding-top: 5px;
  7. }
  8. .button_bg A { position: relative; } // без этого в ИЕ не работают ссылки
  9.  
  10. * html .button_bg{
  11.     background: none;
  12.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="botton_menu.png");    
  13. }

Перенос и разбиение слов в HTML

При создании различных лент новостей и колонок онлайн газет, web дизайнеры и программисты сталкиваются с ситуацией, когда в тексте попадается очень длинное слово (синхрофазотрон). Браузер при форматировании разбивает текст в тех местах, где есть пробелы (дефисы). Длинные слова при этом остаются нетронутыми, что часто приводит к "разъезжанию" ячеек таблицы, неаккуратному внешнему виду. Каким образом можно решить эту проблему?

А решить эту проблему можно PHP функцией.
Позаимствованая с сайта http://www.enlight.ru/ib/tech/split/index.htm

  1. # -----------------------------------------------------------------------------
  2. # Если в строке $s встречается слово (последовательность символов без пробелов)
  3. # длиннее чем $wordmaxlen , оно ограничивается тэгами $leftlimit, $rightlimit и
  4. # разбивается тэгами $hyp на несколько слов, каждое из которых не

Главная | Портфолио | Услуги | Контакты | Блог