Как реализовать кнопку, не используя, собственно, кнопку?
Вопрос достаточно интересный. Как сделать эмуляцию кнопки, которая реагирует на наведение курсора не прибегая к слайд-эффектам, основанным на ява-скриптах? С помощью CSS – очень просто. Для меня, кстати, было настоящим открытием, что в CSS свойство “hover” применимо практически к любому элементу. Но, обо всем по порядку.
#button {
width: 60px;
height: 30px;
background: url(1.jpg);
}
#button:hover {
width: 60px;
height: 30px;
background: url(2.jpg);
}
#button a {
text-decoration: none;
font-size: 18px;
}
#button a:hover {
text-decoration: none;
font-size: 18px;
}
HTML:
<body>
<div id=”button”><a href=”#”> </a></div>
</div>
Неразрывных пробелов добавлять по вкусу до тех пор, пока область ссылки начисто не перекроет область эмулированной кнопки.
А можно поступить проще и написать текст кнопки в ссылке, вместо пробелов. А для того, чтобы ссылка полностью перекрывала область кнопки – правильно расставить padding’и. Тут уж все зависит от вашей фантазии.
—————————————————–
Хостинг изображений – radikal.ru
"Намертво приколочено к центру"
По адресу http://www.wpdfd.com/editorial/thebox/deadcentre4.html лежит хороший пример того, как div можно намертво приколотить к центру экрана. Решение кроссбраузерное. Таблицы все больше уходят в небытие:-)
Если же сайт у нас с динамическим содержанием, то для помещения блока по центру надо использовать вычисленное значение его ширины и высоты, деленное на “2”. Скажем, ASP позволяет в прописывать в стилевых таблицах имена переменных в качестве числового значения. И там же совершать с ними некие арифметические действия.
—————————————————–
Хостинг изображений – imageshack.us
CSS и верстка
Подкинули мне тут задачку с подвохом. Типа, сделай так:
Для тех, кто по жизни в носу ковыряет – поясняю. Задача сделать два div-блока, да так, чтобы один перекрывал другой. Я подмал-подумал, да и выдал кросс-браузерную резину:
CSS:
padding: 0px;
margin: 0px;
}
#corn {
position: relative;
float: right;
width: 200px;
height: 100px;
background: #00ffff;
margin-right: -50px;
margin-top: -50px;
z-index: 100:
}
#main {
position: relative;
width: 90%;
height: 450px;
background: #00ff00;
margin: 50px;
z-index: 1;
}
HTML:
<div id=”main”>
<div id=”corn”>
</div>
</div>
</body>
Фишка в том, что элемент считается родительским для другого элемента в том случае, если его позиция отлична от static:-)
—————————————————–
Хостинг изображений – imageshack.us
Резиновому сайту – резиновые баннеры!
Сегодня я опубликую небольшой трючок, который позволит размещать в шапке сайта баннеры, ширина которых меняется вместе с разрешением экрана. Достигается это с помощью довольно простых средств, а эффект достаточно хорош. Надо только грамотно нарисовать баннер.
К примеру, у нас есть такой баннер:
Для того, чтобы сделать его резиновым, мы разрежем его вот так:
 |
 |
И сделаем “резину”.
Если вы верстаете таблицами, листинг будет выглядеть так:
CSS:
background-color: #ff9a2f;
}
td.menu {
background-color: #ffffff;
}
th.logoheader {
margin 0px;
padding: 0px;
background : url(banner.jpg) no-repeat bottom;
background-color: #ffffff;
background-position: left;
height : 50px;}
HTML:
<table width=”80%” height=”50″ border=”0″ cellpadding=”5″ cellspacing=”0″>
<tr>
<th colspan=”2″ class=”logoheader”><img src=”logo.jpg” align=”right”></th>
</tr>
<tr>
<td class=”tab”>Апельси?н (от нидерл. appelsina – «китайское яблоко») — плод апельсинного дерева (Citrus sinensis), родом из Китая. Гибрид, полученный ещё в древности, по видимому смешением мандарина (Citrus reticulata) c помелом (Citrus maxima). Дерево привезено португальцами в Европу и растёт теперь хорошо по всему побережью Средиземного моря, а также в Центральной Америке.
Довольно высокое дерево, относится к семейству Рутовые (Rutaceae) и к его подсемейству Цитрусовые(Citroideae). Цельные многолетние листья апельсина соединяются со своими крылатыми черешками посредством промежуточного широкого сочленения. Белые цветы сидят по 6, кистями и состоят из 5-раздельного малораскрывающегося околоцветника с толстыми долями, множества тычинок и одиночной свободной, или «верхней», завязью (известные «fleurs d’orange»).</td>
<td class=”menu”>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</td>
</tr>
</table>
</body>
Если вы верстаете DIV’ами, листинг приобретет такой вид:
CSS:
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#main {
background-color: #ff9a2f;
width: 80%;
}
#banner {
position: relative;
margin 0px;
padding: 0px;
background: url(banner.jpg) no-repeat;
background-color: #ffffff;
background-position: left ;
height : 50px;
}
#text {
position: relative;
float: left;
width: 80%;
background-color: #ff9a2f;
padding: 5px;
}
#menu {
position: relative;
float: right;
}
HTML:
<div id=”main”>
<div id=”banner”>
<div id=”logo”>
<img src=”logo.jpg” align=”right”>
</div>
</div>
<div id=”text”>
Апельси?н (от нидерл. appelsina – «китайское яблоко») — плод апельсинного дерева (Citrus sinensis), родом из Китая. Гибрид, полученный ещё в древности, по видимому смешением мандарина (Citrus reticulata) c помелом (Citrus maxima). Дерево привезено португальцами в Европу и растёт теперь хорошо по всему побережью Средиземного моря, а также в Центральной Америке.
Довольно высокое дерево, относится к семейству Рутовые (Rutaceae) и к его подсемейству Цитрусовые(Citroideae). Цельные многолетние листья апельсина соединяются со своими крылатыми черешками посредством промежуточного широкого сочленения. Белые цветы сидят по 6, кистями и состоят из 5-раздельного малораскрывающегося околоцветника с толстыми долями, множества тычинок и одиночной свободной, или «верхней», завязью (известные «fleurs d’orange»).
</div>
<div id=”menu”>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</body>
В принципе, код достаточно понятен безо всяких лишних пояснений. Отсюда можно скачать архив с html-файлами и посмотреть, как это работает “вживую”.