Разобраться с блоками

wariorswars · August 25, 2014

Здравствуйте никак не могу разобраться с блоками при наведении мыши, А точнее указать размеры и поля, у блоков есть тень она считается при указании размеров? Подскажите) У меня на странице блоки при наведении разъезжаются

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />     <title></title></head><body>    <div class="wraper">        <div class="block_news">            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                    <h5>Marilyn Manson</h5>                    <p class="date_intervention">14 сентебря 2012 | 22:00</p>                    <p class="style_music">alternative, industrial, metal, rock</p>                    <p class="live_music"><a href="#">Live Music Hall</a></p>                    <form action="#" method="get">                        <button>Пойду</button>                    </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>            <div class="box_music">                <a href="#">                    <img src="images\marilyn_manson.png" alt="Marilyn Manson" />                </a>                <h5>Marilyn Manson</h5>                <p class="date_intervention">14 сентебря 2012 | 22:00</p>                <p class="style_music">alternative, industrial, metal, rock</p>                <p class="live_music"><a href="#">Live Music Hall</a></p>                <form action="#" method="get">                    <button>Пойду</button>                </form>            </div>        </div>                       </div></body></html>

CSS код:

* {    font-family: Arial;}body {    margin: 0;    padding: 0;}a {    text-decoration: none;}/*Стили обложки самого блока*/div.wraper {    width: 989px;    margin: auto;    overflow: hidden;    outline: 1px solid #ff6a00;    background-color: #e5e5e5;    border-radius: 20px;}/*Стили блока новостей*/div.block_news {    margin: 22px 12px;}/*Стили музыкальных афиш*/div.box_music {    float: left;    width: 189px;    display: block;     border: 1px solid #e2e2e2;    background-color: #fff;    border-radius: 5px;    box-shadow: 1px 8px 3px -3px rgba(159, 159, 159, 1);    line-height: 13px;    margin: 0 13px 21px 9px ;    padding: 17px 14px 17px 14px;}    div.box_music img {        border: 1px solid #fff;        width: 187px;        height: 139px;        display: block;    }    div.box_music h5 {        margin: 0;        padding: 13px 0;        font-size: 16px;        font-weight: normal;    }    p.date_intervention {        color: #aaa;        margin: 0;        font-size: 12px;        padding-left: 19px;        background: url(../images/watch.png) left no-repeat;    }    p.style_music {        font-size: 10px;        font-weight: bold;    }    div.box_music p.live_music a{        color: #4090c7;        font-size: 13px;    }/*Стили кнопки*/div.box_music form button {    height: 20px;    width: 55px;    background-color: #447bab;    color: #fff;    /*box-shadow: 0 2px 23px 2px rgba(42, 67, 89, .9);*/     border-radius: 4px;}/*Стиль выделения*/div.box_music:hover {    border: 3px solid #fff;    background-color: #e5e5e5;    width: 186px;    box-shadow: none;    margin: 0 13px 21px 13px ;    padding: 17px 13px 17px 13px;}

Всего доброго)

hypnocolor · August 25, 2014

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

Sign In

Разобраться с блоками

Question

wariorswars

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

hypnocolor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information