26.09.2013, 20:50
|
|
Профессор
|
|
Регистрация: 10.03.2013
Сообщений: 169
|
|
|
название не придумал. Чуть подправит css
Доброго времени суток. В css я новичок, и даже фантазия плохо работает. Зашёл в тупик. Есть код (местами скопипастеный):
1. Когда я навожу на кнопку, то таблица начинает двигаться (рамочка раздвигает границу), как ей это запретить?
2. Не могу вставить больше 6-ти смайликов, и не понимаю почему. Где запрет?
|
Код:
|
.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('/img/tag/im_smile_cross.png') 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: 100%;
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;
} |
<td>
<img class="b" style="margin-left: 0px;" src="/img/tag/bold.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/italic.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/underline.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/strikethrough.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/createlink.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/insertimage.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="/img/tag/spis.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="/img/tag/num.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>
|
|
27.09.2013, 08:20
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Чтоб ширина элементов не менялась можешь изначально установить прозрачный бордер, по ховеру просто цвет менять. Либо вместо прозрачного бордера - margin. Или использовать outline.
Второй вопрос не понял. Куда смотреть? Сделай предпросмотр.
__________________
В личку только с интересными предложениями 
|
|
27.09.2013, 11:34
|
|
Профессор
|
|
Регистрация: 10.03.2013
Сообщений: 169
|
|
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>
Последний раз редактировалось Гробовщик, 27.09.2013 в 11:39.
|
|
27.09.2013, 12:31
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Ой ты чудик. Как же они не будут ерзать если изначально они впритык, а бордеру же где-то нужно разместиться? Об этом не подумал?
Прозрачный бордер работает нормально. Или margin, но у тебя там в коде зачем-то разный margin для разных картинок прописан. зачем - хз
__________________
В личку только с интересными предложениями
|
|
01.10.2013, 19:27
|
|
Профессор
|
|
Регистрация: 10.03.2013
Сообщений: 169
|
|
|
danik.js,
Да знаю что чудик, но как я не старался из отодвинуть, или убрать рамку, объекты всё равно ёрзают, у меня очень туго со стилями, да и код полуоформленый с элементами проб и ошибок
|
|
02.10.2013, 13:55
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Добавить красным
<table border="1" width="100%" height="38">
<tr valign="bottom"> |
|
|
|
