Грешка при кодирането

[Anton40]

Кодирам дизайн и има някаква грешка, защото с hovera заено отдолу се мести и бокса - наляво и надясно в зависимост кой линк си посочил:
HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Counter-Strike - твоят игрален свят! </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Counter-Strike - твоят игрален свят!" />
<meta name="keywords" content="cs, counter-strike, counter strike, cs 1.6, модове, пачове, ботове, скинове, плъгини, сървъри, карти" />
<meta name="author" content="Antonpram" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="container">
<div id="overline">
TEXT TEXT TEXT TEXT TEXT
</div>
<div id="logo">   </div>
<div id="menu">
<a href="#"> НАЧАЛО </a>
<a href="#"> ФОРУМ </a>
<a href="#"> СЪРВЪРИ </a>
<a href="#"> SMS УСЛУГИ </a>
<a href="#"> БАНЛИСТ </a>
<a href="#"> БАНЕРИ </a>
<a href="#"> КОНТАКТИ </a>

</div>


<div id="left_column">

<div class="top"> ПОТРЕБИТЕЛСКИ ПАНЕЛ </div>
<div class="content"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
<br />

<div class="top"> ПОТРЕБИТЕЛСКИ ПАНЕЛ </div>
<div class="content"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>

</div>

CSS код:

body, html {
background-color: #fff;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: verdana;
}

#container {
width: 1000px;
margin: 0 auto; }

#overline {
background: url("images/overline.png") no-repeat;
width: 1000px;
height: 35px;
font-family: arial;
color: #fff;
padding-top: 10px;
padding-left: 10px;
 }

 #logo {
 background: url("images/logo.png") no-repeat;
 width: 1000px;
 height: 215px;
 margin-top: -10px;
 }
 
 #menu {
 background: url("images/menu.png") no-repeat;
 width: 1000px;
 height: 33px;
 font-family: Myriad Pro;
 color: #fff;
 }
 
 #menu a {
color: #fff;
display: block;
float: left;
padding: 8px 15px;
text-decoration: none;

}

#menu a:hover {
background: url("images/hover.png") no-repeat;
height: 33px;
text-decoration: none;
color: #fff;
}

#left_column {
	margin-top: 15px;
	width: 231px;
	float: left;
}

.top {
	width: 231px;
	height: 33px;
	background: url('images/top.png') no-repeat;
	color: white;
	text-align: center;
	padding-top: 8px;
	margin-top: -8px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	
	}

.content {
	background-color: #fff;
	width: 231px;
	background-repeat: repeat-y;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
    text-align: center;
	margin-top: -3px;
	width: 231px;
	
	
}

 

[marian]

#menu {
background: url("images/menu.png") no-repeat;
width: 1000px;
height: 33px;
font-family: Myriad Pro;
color: #fff;
}

След като слагаш float трябва да го чистиш т.е. слагаш <div style="clear:both"></div> след последния линк. Прочети за box-model. Накратко бокс модела е:
крайната дължина = border-left + padding-left + width + padding-right + border-right
крайната височина = border-top + padding-top + height + padding-bottom + border-bottom
В твоя случай крайната височина на #menu е 49px. Не ти препоръчвам да ползваш отрицателни маргини, ако не са наложителни. Дай пълно демо, ако не успееш да се оправиш.

 

[Anton40]

Използвам отицателни margini защото примерно са с margin-bottom не иска да се вдига нагоре, а като използвам margin-top: -px става