Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   название не придумал. Чуть подправит css (https://javascript.ru/forum/xhtml-html-css/41730-nazvanie-ne-pridumal-chut-podpravit-css.html)

Гробовщик 26.09.2013 20:50
название не придумал. Чуть подправит 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>

danik.js 27.09.2013 08:20
Чтоб ширина элементов не менялась можешь изначально установить прозрачный бордер, по ховеру просто цвет менять. Либо вместо прозрачного бордера - margin. Или использовать outline.
Второй вопрос не понял. Куда смотреть? Сделай предпросмотр.

Гробовщик 27.09.2013 11:34
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>

danik.js 27.09.2013 12:31
Ой ты чудик. Как же они не будут ерзать если изначально они впритык, а бордеру же где-то нужно разместиться? Об этом не подумал?
Прозрачный бордер работает нормально. Или margin, но у тебя там в коде зачем-то разный margin для разных картинок прописан. зачем - хз

Гробовщик 01.10.2013 19:27
danik.js,
Да знаю что чудик, но как я не старался из отодвинуть, или убрать рамку, объекты всё равно ёрзают, у меня очень туго со стилями, да и код полуоформленый с элементами проб и ошибок

Deff 02.10.2013 13:55
Добавить красным
<table border="1" width="100%" height="38">
<tr valign="bottom">


Часовой пояс GMT +3, время: 01:34.