Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Ненужный отступ у изображений в IE. Есть как минимум два способа решения проблемы.




ПОИСК по сайту


    Полный список статей
/ Ненужный отступ у изображений в IE / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Представим что возникла необходимость создать галерею фотографий. У каждой фотографии есть внешний контейнер с определенным оформлением, что-то вроде этого:

HTML:

<div class="photo">
<p>Габриэль Батистута</p>
<img src="batistuta.jpg" width="380" height="277" alt="Габриэль Батистута" />
</div>

и собственно стили:

.photo{border:solid 3px #000;width:380px;font-family:"Trebuchet MS"}
.photo p{text-align:center;padding:10px 0;background:#FFCC99}

Казалось бы все должно быть нормально. Во всех основных браузерах так и происходит, однако в Internet Explorer появляется какой-то отступ после изображения. Взгляните:

Ненужный отступ у изображений в IE

Есть как минимум два способа решения проблемы.

1. Если вы не планируете размещать какой-либо текст вместе с фотографией, то достаточно просто для внешнего контейнера установить размер шрифта равный 0.

.photo{border:solid 3px #000;width:380px;font-family:"Trebuchet MS";font-size:0}
.photo p{text-align:center;padding:10px 0;background:#FFCC99}

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

<div class="photo">
<p>Габриэль Батистута</p>
<img src="bati.jpg" width="380" height="277" alt="" /></div>

Эта статья поможет вам сделать резиновые закладки с закругленными углами используя CSS и одно фоновое изображение для всех состояний закладки. Результат будет выглядеть примерно так:

Резиновые закладки с помощью одного изображения и CSS

Перед тем как рассматривать код, небольшое пояснение к нашим закладкам. Как видно на рисунке они имеют три состояния:

Резиновые закладки с помощью одного изображения и CSS

  • Активный элемент (Главная)
  • Обычная закладка (Сообщество, Сообщения, Контакты)
  • Закладка при наведении указателя (Блог)

Каждый элемент имеет закругленные уголки, а его ширина зависит от содержимого.

Теперь, если все это ясно, перейдем к HTML и CSS. Оптимальным вариантом является использование тега <span> внутри ссылки <a> и применение к обоим элементам фонового изображения.

Резиновые закладки с помощью одного изображения и CSS

Фоновое изображение

Как уже было сказано ранее, нам понадобится всего лишь одно фоновое изображение:

Фоновое изображение для резиновой закладки

Чтобы фон изменялся мы будем использовать позиционирование фона для каждого состояния:

  • Активное (background top position: top)
  • Обычное (background top position: 30px)
  • При наведении указателя (background top position: 60px)

HTML код

Как видите код очень простой:

<ul class="tab">
<li class="active"><a href="home.html"><span>Главная</span></a></li>
<li><a href="community.html"><span>Сообщество</span></a></li>
<li><a href="blog.html"><span>Блог</span></a></li>
<li><a href="messages.html"><span>Сообщения</span></a></li>
<li><a href="contact.html"><span>Контакты</span></a></li>
</ul>

Для того чтобы сделать закладку активной нужно добавить класс «active» элементу списка в котором находится закладка.

CSS код

ul, li {border:0; margin:0; padding:0; list-style:none;}
ul{
border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;
}
li{float:left;margin-right:2px;height:30px;overflow:hidden}
.tab a:link, .tab a:visited{
background:url(tab-round.png) right 60px;
color:#666;
display:block;
font-weight:bold;
line-height:30px;
text-decoration:none;
}
.tab a span{
background:url(tab-round.png) left 60px;
display:block;
margin-right:14px;
padding-left:14px;
}
.tab a:hover{
background:url(tab-round.png) right 30px;
display:block;
}
.tab a:hover span{
background:url(tab-round.png) left 30px;
display:block;
}
.active a:link, .active a:visited, .active a:visited, .active a:hover{
background:url(tab-round.png) right 0 no-repeat;
}
.active a span, .active a:hover span{
background:url(tab-round.png) left 0 no-repeat;
}

На этом все. Теперь вы можете использовать это в своих проектах.

Оригинал: Clean Tab Bar Digg-like using CSS

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

Пейджер

В целом можно выделить четыре основных элемента:

  • Предыдущая / Следующая страница (кнопка не активна)
  • Текущая страница
  • Обычная ссылка
  • Предыдущая / Следующая страница (кнопка активна)

HTML код очень прост, и состоит из обычного ненумерованного списка:

<ul class="pager">
<li class="previous-off">«Предыдущая</li>
<li class="active">1</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li class="next"><a href="">Следующая»</a></li>
</ul>

Теперь осталось только добавить некоторые CSS свойтсва:

ul{border:0;margin:0;padding:0;}
.pager li{
border:0;margin:0;padding:0;
float:left;
font-size:11px;
list-style:none;
}
.pager a{
display:block;
border:solid 1px #ddd;
margin-right:2px;
}
.pager a:link,
.pager a:visited {
color:#0063e3;
padding:3px 6px;
text-decoration:none;
}
.pager a:hover{
border:solid 1px #666;
}
.pager .previous-off,
.pager .next-off {
color:#666666;
font-weight:bold;
padding:3px 4px;
}
.pager .next a,
.pager .previous a {
font-weight:bold;
border:solid 1px #fff;
}
.pager .active{
color:#ff0084;
font-weight:bold;
padding:4px 6px;
}

В итоге:

Оригинал: Perfect pagination style using CSS


Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,0328 s.