Тема: Чому при зміні висоти блока, сайт "з'їжджає" вліво?
Привіт. Хтів був зробити дроп-даун менюшку. Типу наводите мишку на назву категорії, і під нею вилазять підкатегорії. Ну, вирішив для початку зробити це за допомогою зміни висоти блоку при наведенні на нього мишкою. От я зробив сайт собі, щоб вам все показувати, наведіть мишкою на "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, 382 downloads since 2013-12-09