[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

Верстаем HTML/CSS календарь

Автор: <The Webmakers Lounge/>

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

Готовых скриптов в Сети много, разной степени навороченности и крутизны, но мне нужно было что-то простое и я не хотел использовать javascript, поэтому решил сделать сам. И вот что у меня получилось:

HTML/CSS календарь

Давайте посмотрим как делается симпатичный календарь с помощью HTML/CSS.
Как видно из скриншота, было довольно много ограничений, в основном по размерам. Фактически пришлось втиснуть весь месяц в кубик размерами 200х150 пикселей. Так как календарь верстался для уже готового сайта, то простора для творчества было совсем мало.

Начнем с кода. Мне показалось логичным сделать календарную структуру с помощью definition list.

Definition term я оставил пустым, так как заголовок был задан в бэкграунде. Месяц, названия дней недели и числа я описал списками, вложеными в definition description.

Собственно весь HTML:

<dl>
<dt> </dt>
<dd>
<p class="month">May 07</p>
</dd>
<dd>
<ul class="week">
<li>S</li>
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
</ul>
</dd>
<dd>
<ul class="days">
<li><а hrеf="#"> </a></li>
<li><а hrеf="#"> </a></li>
<li><а hrеf="#">1<span>Content 1</span></a></li>
<li><а hrеf="#">2<span>Content 2</span></a></li>
<li><а hrеf="#">3<span>Content 3</span></a></li>
<li><а hrеf="#">4<span>Content 4</span></a></li>
<li><а hrеf="#">5<span>Content 5</span></a></li>
<li><а hrеf="#">6<span>Content 6</span></a></li>
<li><а hrеf="#">7<span>Content 7</span></a></li>
<li><а hrеf="#">8<span>Content 8</span></a></li>
<li><а hrеf="#">9<span>Content 9</span></a></li>
<li><а hrеf="#">10<span>Content 10</span></a></li>
<li><а hrеf="#">11<span>Content 11</span></a></li>
<li><а hrеf="#">12<span>Content 12</span></a></li>
<li><а hrеf="#">13<span>Content 13</span></a></li>
<li><а hrеf="#">14<span>Content 14</span></a></li>
<li><а hrеf="#">15<span>Content 15</span></a></li>
<li><а hrеf="#">16<span>Content 16</span></a></li>
<li><а hrеf="#">17<span>Content 17</span></a></li>
<li><а hrеf="#">18<span>Content 18</span></a></li>
<li><а hrеf="#">19<span>Content 19</span></a></li>
<li><а hrеf="#">20<span>Content 20</span></a></li>
<li><а hrеf="#">21<span>Content 21</span></a></li>
<li><а hrеf="#">22<span>Content 22 Blah blah many content much 
more content</span></a></li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</dd>
<dd id="descr">Point cursor to some date</dd>
</dl>

Здесь я думаю стоти прояснить один момент. Внутри каждого элемента списка есть ссылка, текстом которой является само число и там же находится span, внутри которого находится текст подсказки, которая нужна нам при наведении мышки. У span‘а изначально прописано свойство display:none, чтобы его не было видно.

Так как span находится в ссылке (как Ленин в свое время :) ), то мы можем поменять ему свойства на событии hover. Все что нам нужно это поменять свойство display на block. Ну почти все. Этот способ называется Pure CSS Popups, который описал небезызвестный Eric Meyer.

Но рыжий Эрик схитрил(?) и не описал у себя баг, из-за которого способ не работает в IE6… Но Гугль как всегда рулит и я нашел решение этой проблемы. Суть его сводится к тому, что в a:hover ОБЯЗАТЕЛЬНО нужно указать какое-либо свойство, которое не присутствует в a:link, a:visited и a:active. Любое кроме color. Я выбрал text-indent: 0. Ура, заработало!
Есть еще один момент. Так как мне нужно было абсолютно позиционировать текст подсказки внутри блока, то для definition list я задал position:relative, не указывая явно top и left, а для span с подсказкой position:absolute и координаты.

Всем элементам списка я задал фиксированую ширину и высоту и float:left. С размерами подогнал так, чтобы в одну строку влезали только 7 чисел.

Смотрим на стили:

dl{
width: 214px;
height: 182px;
background: url("schedule-bg.gif") left top no-repeat;
margin: 0 auto;
position:relative;
}
dt{
height: 34px;
}

dd ul{
margin: 0;
}

dd ul li{
list-style: none;
margin: 3px 1px 1px 1px;
width: 26px;
height: 12px;
line-height: 12px;
float: left;
text-align: right;
cursor: pointer;
font-size: 12px;
}
dd ul li a{
display:block;
width: 26px;
height: 12px;
text-decoration: none;
color: #0000FF;
}

dd ul li a span{
display:none;
}

ul.days li a:hover{
color: #FBC500;
text-indent: 0; /*DO NOT REMOVE THIS OTHERWISE HOVER WILL NOT WORK IN IE6!*/
}

ul.days li a:hover span{
display: block;
position: absolute;
left: 5px;
top: 150px;
width: 200px;
height: 23px;
overflow: hidden;
text-align: center;
background: #5c68ba;
color: #FFFFFF;
text-decoration: none!important;
}
.month{
font-size: 12px;
font-weight: bold;
text-align: center;
}

.week li{
border: none;
font-weight: bold;
margin-left: 1px;
margin-right: 2px;
}

.days{
margin-left: 5px;
height: 98px;
*height: 85px;
width: 205px;
}

#descr{
clear: both;
color: #FFFFFF;
font-size: 12px;
text-align: center;
padding-top: 3px;
height: 23px;
}

Остался только один нерешенный момент. Приходится в ручную передвигать первое число месяца между днями недели, добавляя пустые элементы списка. Не придумал нормального решения.

Все, вроде бы ничего не упустил. Рабочий пример можно посмотреть и забрать.

Верстал я все это дело в XML/XSL, вот так выглядит тэмплэйт:

<dl>
<dt> </dt>
<dd>
<p class="month">
<xsl:value-of select="$SHARED/MONTHS/LIST[@ID= $month]/@NAME"/>
</p>
</dd>
<dd>
<ol class="week">
<xsl:for-each select="$SHARED/WEEK/ITEM">
<li><xsl:value-of select="text()"/></li>
</xsl:for-each>
</ol>
</dd>
<dd>
<ol class="days">
<xsl:for-each select="$SHARED/MONTHS/LIST[@ID= $month]/ITEM">
<li>
<a>
<xsl:if test="@NUM = $date">
<xsl:attribute name="class">currentday</xsl:attribute>
</xsl:if>
<xsl:attribute name="hrеf"><xsl:value-of select="@HREF"/></xsl:attribute>
<xsl:value-of select="@NUM"/>
<span><xsl:value-of select="text()"/></span>
</a>
</li>
</xsl:for-each>
</ol>
</dd>
<dd id="descr"><xsl:value-of select="$SHARED/MONTHS/DESCR"/></dd>
</dl>

На пути к XML нодам не обращайте внимания, особенности платформы.




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 4473 сегодня - 1

История про CSS (часть II)
05-01-2010   

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

Кол. просмотров: общее - 4696 сегодня - 1

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 4488 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 4450 сегодня - 0

Сокращенные команды в CSS
05-01-2010   

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

Кол. просмотров: общее - 5198 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects