Почему ширина растягивается в одну сторону

@Johnlion · Регистрация: 11.05.2011

Author24 — интернет-сервис помощи студентам

При hover на каком-то из трех элементов его ширина тянется в правую сторону, а нужно, чтобы во все стороны равномерно растягивалась. Подскажите, пожалуйста. И как, кстати, без align="center" выровнять по центру эти кнопки (шапка, содерж и подвал)?

Почему ширина растягивается в одну сторону

HTML5

<div class="contentBlock">
                <div>
                    <div class="openBlock" align="center">
                        <input type="button" value="Шапка" class="spoilerBtn">
                    </div>
...

CSS

.contentBlock {
    width: 70%;
    min-height: 70%;
    margin: 90px auto;
    padding: 15px;
}
.spoilerBtn {
    width: 100%;
    height: 60px;
    margin: 3px auto;
    font-size: 17pt;
    font-family: Georgia, Trebuchet MS, Arial;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    border-radius: 15px;
    cursor: pointer;
}
 
.spoilerBtn:hover {
    width: 102%;
}

@maximus2011 · 06.03.2014, 08:13

CSS

1
2
3

.spoilerBtn:hover {
    width: 102%;
}

Вот из-за этого у вас увеличивается при ховере. Поставьте 100%;

Чтобы отцентрировать по другому, нужно кнопкам задать фиксированную ширину и прописать margin:0 auto;

Но у вас там все в процентах, так что это будет геморрой )) Пусть будет как есть или нужно все переписывать

@Taatshi · 06.03.2014, 09:35

Johnlion, кода недостаточно. нужен весь код и окружающего пространства тоже

@Johnlion · 06.03.2014, 10:08 **[ТС]**

Taatshi, maximus2011, вот весь код

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
        <link rel="stylesheet" type="text/css" href="style/buttonstyle.css">
        <link rel="stylesheet" type="text/css" href="style/spoilerbutton.css">
        <script src="jquery-2.1.0.js"></script>
        <script src="script.js"></script>
 
        <title>Сделай сайт</title>
    </head>
    <body>
        <div class="main">
            
            <!-- Header of generator -->
            <div class="header">
                <div class="rect">
                    <span>Website generator</span>
                </div>
            </div>
            <div class="contentBlock">
                <iframe id="fr1" style="display:none"></iframe>
                <iframe id="fr2" style="display:none"></iframe>
                
                <div>
                    <div class="openBlock" align="center">
                        <input type="button" value="Шапка" class="spoilerBtn">
                    </div>
                    
                        <div class="part">
                            <span class="headOfMiniPart">Логотип</span>
                            <div class="miniPart">
                                        <form action="uploadHead.php" target="fr1" enctype="multipart/form-data" method="post">
                                            <input type="file" name="uploadfileHead" accept="image/*">
                                            <input type="submit" value="Загрузить" class="classname">
                                        </form><br>
                                        
                                        <span>Ширина X Высота:</span>
                                            <input type="text" name="inpLogoW" class="InForSize"></input>
                                            <span>X</span>
                                            <input type="text" name="inpLogoH" class="InForSize"></input>
                                            <span>px</span><br><br>
                                        
                                        <span>Расположение:</span>
                                            <form class="formWithoutBr">
                                                <input type="radio" name="radioL" id="radioInL" onClick="radioFunL();" value="Слева" checked> Слева</input>
                                                <input type="radio" name="radioR" id="radioInR" onclick="radioFunR();" value="Справа"> Справа</input>
                                                <input type="radio" name="radioC" id="radioInС" onclick="radioFunCenter();" value="По центру"> По центру</input>
                                            </form><br><br>
                                        <span>Отступ <span id="indent">слева:</span></span>
                                            <input type="text" name="indentIn" id="indentFromSideField" class="InForSize"></input>
                                            <span>px</span><br><br>
                                        <span>Отступ сверху:</span>
                                            <input type="text" name="TOPindentIn" class="InForSize" ></input><br><br>
                                        <span>Отступ снизу:</span>
                                            <input type="text" name="BOTTOMindentIn" class="InForSize" ></input>
                            </div> <!-- конец мини-части -->
                                    <hr>
                            <span class="headOfMiniPart">Текст напротив логотипа</span><br>
                                    <span>Цвет:</span>
                                        <input type="text" name="ColorIn" class="InPoint"></input>
                                        <input type="color" id="palette" name="color"><br><br>
                                    <span>Шрифт:</span>
                                        <select name="fontSelect">
                                            <option value="Times New Roman">Times New Roman</option>
                                            <option value="Arial">Arial</option>
                                            <option value="Comic Sans">Comic Sans</option>
                                            <option value="Georgia">Georgia</option>
                                        </select>
                                        <select name="fontWSelect">
                                            <option value="10">10</option>
                                            <option value="12">12</option>
                                            <option value="14">14</option>
                                            <option value="16">16</option>
                                            <option value="18">18</option>
                                            <option value="24">24</option>
                                            <option value="28">28</option>
                                        </select>
                                        <input type="checkbox" value="B"> B</input>
                                        <input type="checkbox" value="I"> I</input>
                                        <input type="checkbox" value="U"> U</input>
                                        <br><br>
                                    <span>Расположение:</span>
                                        <form class="formWithoutBr">
                                            <input type="radio" name="radioL2" id="radioInL2" onclick="radioFunL2();" value="Слева"> Слева</input>
                                            <input type="radio" name="radioR2" id="radioInR2" onclick="radioFunR2();" value="Справа" checked> Справа</input>
                                        </form><br><br>
                                    <span>Отступ <span id="indent2">слева:</span></span>
                                        <input type="text" name="indentIn" class="InForSize"></input>
                                        <span>px</span><br><br>
                                    <span>Отступ сверху:</span>
                                        <input type="text" name="TOPindentIn2" class="InForSize"></input><br><br>
                                    <span>Отступ снизу:</span>
                                        <input type="text" name="BOTTOMindentIn2" class="InForSize"></input><br><br>
                                    <div>
                                        <span class="headText">Текст:</span>
                                        <textarea class="TA"></textarea>
                                    </div><br><br><br><br><br>
                                    <hr>
                                    <details>
                                        <summary style="cursor:pointer">посмотреть код</summary>
                                        <pre>появляющаяся информация</pre>
                                    </details>
                            <span class="headOfMiniPart">Меню</span><br>
                                    <span>Цвет блока:</span>
                                        <input type="text" name="ColorIn" class="InPoint"></input>
                                        <input type="color" id="paletteMenuBlock" name="color"><br><br>
                                    <span>Высота блока</span>
                                        <input type="text" class="InForSize"></input>
                                        <span>px</span><br><br>
                                    <span>Цвет шрифта:</span>
                                        <input type="text" name="ColorIn" class="InPoint"></input>
                                        <input type="color" id="paletteFontMenu" name="color"><br><br>
                                    <span>Шрифт:</span>
                                        <select name="fontSelect">
                                            <option value="Times New Roman">Times New Roman</option>
                                            <option value="Arial">Arial</option>
                                            <option value="Comic Sans">Comic Sans</option>
                                            <option value="Georgia">Georgia</option>
                                        </select>
                                        <select name="fontWSelect">
                                            <option value="10">10</option>
                                            <option value="12">12</option>
                                            <option value="14">14</option>
                                            <option value="16">16</option>
                                            <option value="18">18</option>
                                            <option value="24">24</option>
                                            <option value="28">28</option>
                                        </select><br><br>
                                    <span>Пункты меню:</span><br><br>
                                        <div id="divForPointAndButton">
                                            <input type="text" size="20" name="inPoint_1" class="InPoint"></input>
                                            <input type="submit" onclick="delPoint('1');" value="X" name="delBtn_1" title="Удалить пункт" id="minusBtn" class="classname"></input>
                                        </div>
                                        <br>
                                        <input type="submit" value="Новый пункт" onclick="addNewPoint();" class="classname new_p"></input>
                        </div>
                </div>
                
                <div>
                    <div class="openBlock">
                        <input type="button" value="Содержимое" class="spoilerBtn">
                    </div>
                    <!-- Content block -->
                        <div class="part">
                            <span class="headOfMiniPart">Оформление</span>
                            <div class="miniPart">
                                    <span>Цвет фона:</span>
                                        <input type="text" name="ColorIn" class="InPoint"></input>
                                        <input type="color" id="palette" name="color">
                                    <span>Ширина X Высота:</span>
                                        <input type="text" name="inpContW" class="InForSize"></input>
                                        <span>X</span>
                                        <input type="text" name="inpContH" class="InForSize"></input>
                                        <span>px</span><br><br>
                            </div>
                                <hr>
                            
                            <span class="headOfMiniPart">Картинка</span><br>
                            <div class="miniPart">
                                    <form action="uploadContent.php" target="fr2" enctype="multipart/form-data" method="post">
                                        <input type="file" name="uploadfileContent" accept="image/*">
                                        <input type="submit" value="Загрузить" class="classname">
                                    </form>
                                    <br>
                                    <span>Ширина X Высота:</span>
                                        <input type="text" name="inpPicW" class="InForSize"></input>
                                        <span>X</span>
                                        <input type="text" name="inpPicH" class="InForSize"></input>
                                        <span>px</span><br><br><br>
                                    
                                    <span>Расположение:</span>
                                        <form class="formWithoutBr">
                                            <input type="radio" name="radioL3" id="radioInL3" onClick="radioFunL('radionInR3');" value="Слева" checked> Слева</input>
                                            <input type="radio" name="radioR3" id="radioInR3" onclick="radioFunR('radionInL3');" value="Справа"> Справа</input>
                                        </form><br><br>
                            </div>
                                    <hr>
                            
                                    
                            <span class="headOfMiniPart">Текст</span>
                            <div class="miniPart">
                                    <span>Цвет:</span>
                                        <input type="text" name="ColorIn" class="InPoint"></input>
                                        <input type="color" id="palette" name="color"><br><br>
                                    <span>Шрифт:</span>
                                        <select name="fontSelect">
                                            <option value="Times New Roman">Times New Roman</option>
                                            <option value="Arial">Arial</option>
                                            <option value="Comic Sans">Comic Sans</option>
                                            <option value="Georgia">Georgia</option>
                                        </select>
                                        <select name="fontWSelect">
                                            <option value="10">10</option>
                                            <option value="12">12</option>
                                            <option value="14">14</option>
                                            <option value="16">16</option>
                                            <option value="18">18</option>
                                            <option value="24">24</option>
                                            <option value="28">28</option>
                                        </select><br><br>
                                    <div>
                                        <span class="headText">Текст:</span>
                                        <textarea class="TA"></textarea>
                                    </div><br><br><br><br><br>
                            </div>  
                                    <hr>
                            <span class="headOfMiniPart">Блок обратной связи</span>
                            <div class="miniPart">
                                    <span>Ширина X Высота текстового поля:</span>
                                        <input type="text" name="inpContW" class="InForSize"></input>
                                        <span>X</span>
                                        <input type="text" name="inpContH" class="InForSize"></input>
                                        <span>px</span><br><br>
                                    <span>Ширина поля имени отправителя:</span>
                                        <input type="text" name="inpContW" class="InForSize"></input>
                                        <span>px</span><br><br>
                                    <span>Ширина поля e-mail:</span>
                                        <input type="text" name="inpContW" class="InForSize"></input>
                                        <span>px</span><br>
                            </div>
                            <!--<span class="headOfMiniPart">Таблица</span>
                            <div class="miniPart">
                                    <span>Название таблицы:</span>
                                        <input type="text" class="InPoint"></input><br><br>
                                    <span>Цвет фона:</span>
                                        <input type="text" class="InPoint"></input><br><br>
                                    <span>Толщина границы:</span>
                                        <input type="text" class="InForSize"></input>
                                        <span>pt</span><br><br>
                                    <span>Цвет границы:</span>
                                        <input type="text" class="InPoint"></input><br><br>
                                    <span>Количество строк X столбцов:</span>
                                        <input type="text" class="InForSize"></input>
                                        <span>X</span>
                                        <input type="text" class="InForSize"></input><br><br>
                                    <input type="button" value="Сформировать таблицу" onclick="createTable();" class="classname btTable"></input>
                            </div>-->
                        </div><!-- end of part 'Content'-->
                </div><!-- end of Content block with caption-->
                
                <div>
                    <div class="openBlock">
                        <input type="button" value="Подвал" class="spoilerBtn">
                    </div>
                    
                        <div class="part">
                            <span class="headOfMiniPart">Оформление</span>
                            <div class="miniPart">
                                        <span>Ширина X Высота:</span>
                                            <input type="text" name="inpLogoW" class="InForSize"></input>
                                            <span>X</span>
                                            <input type="text" name="inpLogoH" class="InForSize"></input>
                                            <span class="forSpace">px</span>
                                        <span>Цвет фона:</span>
                                            <input type="text" name="ColorIn" class="InPoint"></input>
                                            <input type="color" id="palette" name="color"><br><br>
                            </div> <!-- конец мини-части -->
                                    <hr>
                            <span class="headOfMiniPart">Текст</span><br>
                            <div class="miniPart">
                                    <span>Цвет:</span>
                                        <input type="text" name="ColorIn" class="InPoint"></input>
                                        <input type="color" id="palette" name="color">
                                    <span>Шрифт:</span>
                                        <select name="fontSelect">
                                            <option value="Times New Roman">Times New Roman</option>
                                            <option value="Arial">Arial</option>
                                            <option value="Comic Sans">Comic Sans</option>
                                            <option value="Georgia">Georgia</option>
                                        </select>
                                        <select name="fontWSelect">
                                            <option value="10">10</option>
                                            <option value="12">12</option>
                                            <option value="14">14</option>
                                            <option value="16">16</option>
                                            <option value="18">18</option>
                                            <option value="24">24</option>
                                            <option value="28">28</option>
                                        </select>
                                        <input type="checkbox" value="B"> B</input>
                                        <br><br>
                                    <span>Расположение:</span>
                                        <form class="formWithoutBr">
                                            <input type="radio" name="radioL2" id="radioInL2" onclick="radioFunL2();" value="Слева"> Слева</input>
                                            <input type="radio" name="radioR2" id="radioInR2" onclick="radioFunR2();" value="Справа"> Справа</input>
                                            <input type="radio" name="radioR2" id="radioInC2" onclick="radioFunR2();" value="По центру" checked> По центру</input>
                                        </form><br><br>
                                    <div>
                                        <span class="headText">Текст:</span>
                                        <textarea class="TA"></textarea>
                                    </div><br><br><br><br><br>
                            </div>
                        </div>
                </div><!-- end of Footer block with caption-->
            </div>
            
            <!-- Footer of generator -->
            <div class="footer">
                Bambam
            </div>
        </div> <!-- end of "main" div -->
        
    </body>
</html>

Кликните здесь для просмотра всего текста

CSS

* {
    margin: 0;
    padding: 0;
}
 
html, body {
    width: 100%;
    /*height: 10%;*/
    background: url('../img/back.png');
}
.main {
    height: 100%;
    min-height: 100%;
}
 
.header {
    background: url('../img/back.png');
    width: 72%;
    height: 50px;
    margin: 5px auto 10px;
    border-radius: 10px;
    position: relative;
}
 
.content {
    background-color: rgba(0, 0, 0, 0.3);
    width: 70%;
    min-height: 70%;
    margin: 90px auto;
    padding: 15px;
    color: #F1F2F3;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.35);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 1px 1px rgba(255,255,255,0.35);
    -ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 1px 1px rgba(255,255,255,0.35);
    -o-box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 1px 1px rgba(255,255,255,0.35);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.35);
    font-family: Monaco, monospace, sans-serif;
}
 
.contentBlock {
    width: 70%;
    min-height: 70%;
    margin: 90px auto;
    padding: 15px;
}
 
.part {
    background-color: rgba(255, 255, 255, 1);
    display: inline-block;
    min-height: 800px;
    margin: -8px 0 8px 26px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 0 0 10px 10px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 1);
box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 1);
    font-family: Georgia;
    width: 94.5%;
    display: none;
    z-index: 0;
    padding-top: 15px;
}
 
.headOfMiniPart {
    color: #1C3648;
    font-size: 14pt;
    padding-left: 20px;
}
 
.miniPart {
    width: 100%;
    padding-left: 40px;
    padding-top: 15px;
}
 
.forSpace {
    margin-right: 45px;
}
 
.footer {
    width: 100%;
    height: 200px;
    background: black;
}
 
/*.classname.btTable {
    width: 200px;
}/*
 
.part hr {
    margin: 10px 1px;
}
 
.formWithoutBr {
    margin: 0; 
    padding: 0; 
    display: inline;
}
 
.InForSize {
    border-radius: 5px;
    width: 55px;
    margin: 0px 5px;
}
    
#btGen {
    top: 50px;
    left: 50px;
}
 
.InColor {
    border-radius: 5px;
    width: 200px;
    margin: 0px 5px;
}
 
.InPoint  {
    border-radius: 5px;
    width: 200px;
    margin: 0 5px 5px 0;
}
 
#minusBtn {
    width: 22px;
    height: 22px;
    color: #A00;
    margin: 0 100px 0 0;
}
 
#fontBtB, #fontBtI, #fontBtU {
    width: 30px;
    height: 40px;
}
 
#btIn {
    border-radius: 5px;
    width: 200px;
    margin: 0px 5px;
}
 
.TA {
    width: 360px;
    height: 90px;
    float: left;
}
 
.headText {
    width: 66px;
    float: left;
}
 
.content .part p {
    font-size: 12pt;
    margin: 0px 7px;
}
 
.content p {
    font-size: 18pt;
    margin: 0px 5px;
}
 
.rect {
    position: relative;
    background: url('../img/back.png');
    border-radius: 8px;
    top: 38px;
    left: 20px;
    width: 180px;
    text-align: center;
}
 
.rect span {
    color: black;
    font-family: Arial;
    font-weight: bold;
    top: 30%;
    font-size: 14pt;
    text-shadow: 1px 1px 0px rgba(136, 149, 145, 1);
}

CSS

.spoilerBtn {
    width: 100%;
    height: 60px;
    margin: 3px auto;
    font-size: 17pt;
    font-family: Georgia, Trebuchet MS, Arial;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    border-radius: 15px;
    cursor: pointer;
}
 
.spoilerBtn:hover {
    width: 102%;
}

Vovan-VE · 06.03.2014, 15:31

Johnlion, Потому что width+padding+border > 100%.

CSS

1	box-sizing: border-box;

@Johnlion · 06.03.2014, 19:52 **[ТС]**

maximus2011, поставил, а как без align по центру выровнять? margin-способ не работает

@zme9 · 06.03.2014, 21:41

Johnlion, может не работать из за того что нету clear:both

@Johnlion · 06.03.2014, 22:13 **[ТС]**

zme9, не помогает

Добавлено через 15 минут
Vovan-VE, можете объяснить куда это вставить? я не понимаю, может что не так делаю

@zme9 · 07.03.2014, 13:07

Johnlion, Он имеет ввиду , что 100% ширина это padding+border+width , то есть все эти свойства имеют свою ширину , блок в блоке как бы , у обводки есть ширина и у пэдинга , то есть вам следует изменить значение width:100% чуть меньше. Если я правильно понял что хотел сказать Vovan-VE )

Vovan-VE · 07.03.2014, 13:57

Johnlion, http://www.quirksmode.org/css/... izing.html . Иллюстрации там же.

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	06.03.2014, 09:35	3
	Johnlion, кода недостаточно. нужен весь код и окружающего пространства тоже 0

@Johnlion 63 / 3 / 1 Регистрация: 11.05.2011 Сообщений: 666
	06.03.2014, 19:52 [ТС]	6
	maximus2011, поставил, а как без align по центру выровнять? margin-способ не работает 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	06.03.2014, 21:41	7
	Johnlion, может не работать из за того что нету clear:both 0

@Johnlion 63 / 3 / 1 Регистрация: 11.05.2011 Сообщений: 666
	06.03.2014, 22:13 [ТС]	8
	zme9, не помогает Добавлено через 15 минут Vovan-VE, можете объяснить куда это вставить? я не понимаю, может что не так делаю 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	07.03.2014, 13:07	9
	Johnlion, Он имеет ввиду , что 100% ширина это padding+border+width , то есть все эти свойства имеют свою ширину , блок в блоке как бы , у обводки есть ширина и у пэдинга , то есть вам следует изменить значение width:100% чуть меньше. Если я правильно понял что хотел сказать Vovan-VE ) 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	07.03.2014, 13:57	10
	Johnlion, http://www.quirksmode.org/css/... izing.html . Иллюстрации там же. 0