danik.js,
|
Сообщение от danik.js
|
|
Чтоб ширина элементов не менялась можешь изначально установить прозрачный бордер, по ховеру просто цвет менять. Либо вместо прозрачного бордера - margin. Или использовать outline.
|
К сожалению такие попытки были, всё равно видно как строки ниже (textarea там) ёрзают, такого бы не хотелось. margin-top помог, но только если вешать на одну картинку, тогда она получается чуть ниже остальных, но ничего не ёрзает(((
Визуально как то так, разумеется оптимизирована для этого вывода, просто что бы был понятен основной смысл... Когда нажимается кнопка смайликов (она отличается от других), появляется меню со смайликами, только вот я пытаюсь поставить 8 смайликов (или больше), а он больше 6-ти не выводит, почему так?
<style>
.b:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.i:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.u:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.s:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.hiper:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.image:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.spis:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.num:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.smile:hover {
background: #BFEFFF;
cursor: pointer;
}
/* смайлики*/
.smile-button {
position: absolute;
width: 20px;
height: 20px;
}
.smile-button .smile-open, .smile-button .smile-close {
background: url('http://st0.vk.me/images/im_smile_cross.png?3') no-repeat -2px -26px;
position: absolute;
opacity: 1;
width: 100%;
height: 100%;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
-moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease;
-ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease;
-o-transition: -o-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;
outline: 0;
}
.smile-button .smile-close {
opacity: 0;
background-position: -2px -2px;
}
.smile-button:focus .smile-close {
z-index: 1;
opacity: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.smile-button:focus .smile-open {
opacity: 0;
}
.smile-button .smile-box {
display: none;
position: absolute;
opacity: 0;
bottom: -500%;
left: 90px;
color: #fff;
border-radius: 5px;
width: 200px;
height: 100px;
background: #000;
margin-bottom: 10px;
outline: 0;
-webkit-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-moz-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-ms-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-o-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
transition: opacity 0.3s ease, margin-bottom 0.3s ease;
}
.smile-button .smile-box:after {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0;
}
.smile-button:focus .smile-box {
display: block;
opacity: 0.8;
margin-bottom: 5px;
}
.smile-button .smile-box .smile-box-wrapper {
padding: 10px;
}
.smile-button .smile-box .smile-box-wrapper .smile1,
.smile-button .smile-box .smile-box-wrapper .smile2,
.smile-button .smile-box .smile-box-wrapper .smile3,
.smile-button .smile-box .smile-box-wrapper .smile4,
.smile-button .smile-box .smile-box-wrapper .smile5
.smile-button .smile-box .smile-box-wrapper .smile6,
.smile-button .smile-box .smile-box-wrapper .smile7,
.smile-button .smile-box .smile-box-wrapper .smile8 {
display: inline-block;
width: 20px;
height: 20px;
margin: 3px;
}
.smile-button .smile-box .smile-box-wrapper .smile1 {
background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile2 {
background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile3 {
background: url('http://javascript.ru/forum/images/smilies/laugh.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile4 {
background: url('http://javascript.ru/forum/images/smilies/unsure.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile5 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile6 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile7 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile8 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
</style>
<table border="1" width="100%">
<tr>
<td>
<img class="b" style="margin-left: 0px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<span class="smile-button" tabindex="1">
<div class="smile-box">
<div class="smile-box-wrapper">
<a class="smile1" href="#"></a>
<a class="smile2" href="#"></a>
<a class="smile3" href="#"></a>
<a class="smile4" href="#"></a>
<a class="smile5" href="#"></a>
<a class="smile6" href="#"></a>
<a class="smile7" href="#"></a>
<a class="smile8" href="#"></a>
</div>
</div>
<div class="smile-close" tabindex="2"></div>
<div class="smile-open"></div>
</span>
</td>
</tr>
</table>