1 Востаннє редагувалося FakiNyan (09.12.2013 19:36:57)

Тема: Чому при зміні висоти блока, сайт "з'їжджає" вліво?

Привіт. Хтів був зробити дроп-даун менюшку. Типу наводите мишку на назву категорії, і під нею вилазять підкатегорії. Ну, вирішив для початку зробити це за допомогою зміни висоти блоку при наведенні на нього мишкою. От я зробив сайт собі, щоб вам все показувати, наведіть мишкою на "Hardware products" і побачите, в чому проблема... http://exmpl.bl.ee/  Взагалі не розумію, як висота якогось блока може впливати на розміщення сайту, я навіть не знаю, на що воно там впливає, але гадаю, що на лівий або правий margin, а ви як гадаєте? от коди
html

Прихований текст

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="header">
            <div class="content">
                <div id="logo">
                    <div id="img-logo"><img src="images/comp.png" alt=""></div>
                    <div id="img2-logo"><img src="images/gigaspace.png" alt=""></div>
                    <div id="text-logo">We provide the power for your computer system</div>
                </div>
                <div id="text">Customer service 555 865 1247 6</div>
            </div>
        </div>
        <div id="nav">
            <ul>
                <li><a href="#"><span>HOME</span></a></li>
                <li><a href="#"><span>HARDWARE</span></a></li>
                <li><a href="#"><span>SOFTWARE</span></a></li>
                <li><a href="#"><span>ENTERTAINMENT</span></a></li>
                <li><a href="#"><span>PC/NOTEBOOKS</span></a></li>
                <li><a href="#"><span>SERVER/NETWORK</span></a></li>
                <li><a href="#"><span>CONTACT</span></a></li>
            </ul>
        </div>
        <div class="middle">
            <div id="log-block">
                <div class="caption">If you wish to save your shopping card, you will need to log in:</div>
                <div class="img"></div>
                <form action="#">
                    <div id="login" class="field"><input type="text" placeholder="Username"></div>
                    <div id="password" class= "field"><input type="password" placeholder="Password"></div>
                    <div id="button"><input type="submit" value="Log in"></div>
                </form>
            </div>
            <div id="basket">
                <div class="wrap">
                    <div class="img"></div>
                    <div class="wrap1">
                        <div class="label">There are currently 5 items in your basket!</div>
                        <div id="speed-menu">
                            <ul>
                                <li><a href="#">View basket-</a></li>
                                <li><a href="#">Save busket-</a></li>
                                <li><a href="#">Last item added: 1x Asus GTX456 GFX Card</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="main-content">
            <div id="left-menu">
                <div id="search">
                <div class="head">
                    <div class="start-bg"></div>
                    <div class="mid-bg">
                        <div class="icon-bg">
                            <div class="zoom"></div>
                        </div>
                        <div class="text">Search an item</div>
                    </div>
                    <div class="end-bg"></div>
                </div>
                <form action="#">
                <div class="inputs">
                    <div class="brand">
                    <select name="brand" id="brand">
                        <option value="1">Brand</option>
                    </select>
                    <div class="img">
                        <div class="icon"></div>
                    </div>
                    </div>
                    <div class="product">
                    <select name="product" id="product">
                        <option value="1">Product</option>
                    </select>
                    <div class="img">
                        <div class="icon"></div>
                    </div>
                    </div>
                        <div class="search-btn">
                            <div class="text-btn">Search any product in our database.</div>
                            <div class="btn">
                            <input type="submit" value="">
                            </div>
                        </div>
                </div>
                </form>
                </div>
                <div id="category">
                    <ul class="outer">
                        <li class="first"><img class="left" src="images/category-left.png" alt="">
                        <div class="category-mid">Hardware products</div>
                        <img class="right" src="images/category-right.png" alt="">
                        <div class="clear-fix"></div>
                            <ul class="inner">
                                <li><a href="#">Beamers</a></li>
                                <li><a href="#">Computer casing</a></li>
                                <li><a href="#">DVD/BluRay</a></li>
                                <li><a href="#">Graphic cards</a></li>
                                <li><a href="#">Memory</a></li>
                                <li><a href="#">Motherboards</a></li>
                                <li><a href="#">Data/Hard Disc Drivers</a></li>
                                <li><a href="#">Processors</a></li>
                                <li><a href="#">Monitors</a></li>
                                <li><a href="#">Cooling</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="content"></div>
        </div>
        </div>
    </body>
</html>

CSS

Прихований текст

* {
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
    background: url('images/bg.png');
}

#header {
    position: relative;
    height: 109px;
    background: url('images/head-bg.jpg');
    border-bottom: 1px solid black;
    padding-top: 1px;
    min-width: 960px;
}

#header .content {
    width: 960px;
    margin: 0 auto;
}

#logo {
    overflow: visible;
    height: inherit;
    margin-top: 1px;
    float: left;
    width: 50%;
}

#img-logo {
    margin-top: 30px;
    float: left;
}

#img2-logo {
    margin-top: 43px;
    margin-left: 13px;
}

#text-logo {
    font-family: Tahoma;
    font-size: 12px;
    font-weight: bold;
    margin-top: -10px;
    color: #545454;
    position: relative;
    left: 2px;
}

#text {
    color: #545454;
    width: 50%;
    float: left;
    text-align: right;
    margin-top: 45px;
    font-family: Tahoma;
    font-size: 12px;
}

#nav {
    height: 56px;
    padding-top: 1px;
    background: url('images/nav-bg.png');
    border-top: 1px solid #fcdda4;
    border-bottom: 1px solid #a16013;
    min-width: 960px;
}

#nav ul {
    width: 960px;
    margin: 13px auto;
}

#nav li {
    float: left;
    list-style: none;
    margin-right: 35px;
}

#nav li a {
    color: #333;
    font-family: 'Myriad Pro',Tahoma;
    font-size: 13px;
    text-decoration: none;
    float: left;
    text-align: left;
    padding-right: 13px;
    padding-bottom: 7px;
    padding-top: 7px;
}

#nav li a:hover {
    background: url('images/nav-link-left-side.png');
    background-repeat: no-repeat;
    background-position: right center;
}

#nav span {
    padding-left: 13px;
    padding-top: 7px;
    padding-bottom: 7px;
}

#nav a:hover span{
    background: url('images/nav-link-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-position: left;
    color: orange;
}

.middle {
    width: 960px;
    margin: 0 auto;
    margin-top: 18px;
    overflow: hidden;
}

.caption {
    color: #6a6a6a;
    font-family: 'Myriad Pro', Tahoma;
    font-size: 12px;
    margin-bottom: 12px;
}

.field input{
    width: 172px;
    height: 26px;
    background: url('images/login-bg.png');
    border: 1px solid #ddd;
    padding-left: 8px;
    padding-right: 8px;
    display: inline-block;
}

#button input {
    height: 27px;
    width: 49px;
    background: url('images/button-bg.png');
    border: 1px solid black;
    color: #bf7600;
    font-family: 'Myriad Pro', Tahoma;
}

#login,#password {
    margin-right: 10px;
    float: left;
}

#log-block .img {
    height: 27px;
    width: 27px;
    background: url('images/icons.png');
    float: left;
    margin-right: 14px;
}

#log-block,#basket, form, #button {
    float: left;
}

#speed-menu ul li {
    display: inline-block;
}

#speed-menu ul {
    list-style: none;
    margin-left: 44px;
}

#speed-menu a {
    text-decoration: none;
    font-family: "Myriad Pro",Tahoma;
    font-size: 12px;
    color: #c0c0c0;
}

.label {
    font-family: "Myriad Pro", Tahoma;
    font-size: 12px;
    color: #ff9d00;
    margin-left: 44px;
}

#basket .img {
    width: 32px;
    height: 28px;
    float: left;
    background: url('images/icons.png');
    background-position: -30px 0;
}

#basket {
    float: right;
}

#log-block {
    float: left;
    margin: 0;
}

.wrap {
    margin-top: 24px;
}

#main-content {
    width: 960px;
    background: white;
    margin: 0 auto;
    margin-top: 16px;
    padding: 1px;
}

#left-menu {
    width: 310px;
    margin: 10px;
}

#content {
    width: 620px;
    margin:10px;
}

#search {
    height: 180px;
    width: 310px;
    margin-bottom: 15px;
}

#search .head {
    height: 30px;
    width: 310px;
}

#search .start-bg {
    height: 30px;
    width: 6px;
    background: green;
    float: left;
    background: url("images/search-head-start-bg.png");
}

#search .mid-bg {
    height: 30px;
    width: 298px;
    background: pink;
    float: left;
    background: url('images/search-head-bg.png');
}

#search .icon-bg {
    width: 37px;
    height: 37px;
    background: magenta;
    margin-left: 3px;
    float: left;
    background: url('images/icon-bg.png');
    position: absolute;
}

#search .icon-bg .zoom {
    height: 13px;
    width: 13px;
    background: url('images/icons.png');
    background-position: 24px 0;
    position: relative;
    top: 10px;
    right: -12px;
}

#search .end-bg {
    height: 30px;
    width: 6px;
    background: blue;
    float: right;
    background: url("images/search-head-end-bg.png");
}

.mid-bg .text {
    margin-top: 6px;
    float: left;
    margin-left: 50px;
    color: orange;
    font-size: 13px;
}

#search .inputs {
    padding: 15px 10px;
    height: 120px;
    border: 1px solid #ccc;
    border-top: none;
    background: url('images/inputs-bg.png');
    margin-bottom: 15px;
}

.inputs #brand {
    position: relative;
    width: 288px;
    height: 30px;
    border: 1px solid #ccc;
    color: #b9b9b9;
    padding-left: 10px;
    background: url('images/input-bg.png');
}

.inputs #product {
    margin-top: 15px;
    position: relative;
    width: 288px;
    height: 30px;
    border: 1px solid #ccc;
    color: #b9b9b9;
    padding-left: 10px;
    background: url('images/input-bg.png');
}

.brand, .product {
    position: relative;
}

.brand .img {
    width: 34px;
    height: 28px;
    background: url('images/img-bg.png');
    background-repeat: repeat-x;
    position: absolute;
    top: 0px;
    right: -2px;
    border: 1px solid #d88119;
    pointer-events: none;
}

.product .img {
    width: 34px;
    height: 28px;
    background: url('images/img-bg.png');
    background-repeat: repeat-x;
    position: absolute;
    top: 15px;
    right: -2px;
    border: 1px solid #d88119;
    pointer-events: none;
}

.inputs .icon {
    width: 10px;
    height: 10px;
    position: relative;
    background: url('images/icons.png');
    background-position: 10px 0;
    top: 10px;
    left: 12px;
}

.search-btn {
    height: 30px;
    width: 288px;
    margin-top: 20px;
    color: #b4b4b4;
    font-family: "Myriad Pro", Tahoma;
    font-size: 12px;
}

.search-btn .text-btn {
    margin-left: 0;
    width: auto;
    float: left;
}

.search-btn .btn{
    height: 28px;
    width: 78px;
    border: 1px solid #d88119;
    float: right;
    background: url('images/btn-bg.png');
    background-repeat: repeat-x;
    position: relative;
    top: -5px;
}

.search-btn .btn input{
    height: 28px;
    width: 78px;
    border: none;
    background: url('images/btn-text.png') no-repeat;
    background-position: center;
}

#category ul {
    list-style: none;
}

.outer .first {
    width: 310px;
    height: 42px;
    overflow: hidden;
    font-family: "Myriad Pro", Tahoma;
    font-size: 14px;
    font-weight: bold;
    color: #5b5b5b;
    text-align: left;
    line-height: 42px;
    position: relative;
    background: url('images/category-bg.png');
}

.outer .first:hover {
    height: 500px;
}

.first .left {
    float: left;
}

.category-mid {
    float: left;
    margin-left: 16px;
}

.first .right{
    float: right;
}

.clear-fix {
    clear: both;
}

Post's attachments

lab.rar 39.59 kb, 149 downloads since 2013-12-09 

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...

2

Re: Чому при зміні висоти блока, сайт "з'їжджає" вліво?

я зрозумів... через надмірну висоту того блока - з'являється полоса прокрутки зправа, і через це розмір сайту змінюється, а там так зроблено, щоб він завжди по центру був. і через те він з'їжджає вліво.. а як це отрємонтіровати?

All you want is a dingle,
What you envy's a schwang,
A thing through which you can tinkle,
Or play with, or simply let hang...