Разместване под различни резолюции

[confiscate]

Здравейте ,
Може ли да ми кажете къде бъркам ? Проблемът ми е следния: на моята резолюция всичко се вижда добре , но като я сменя менюто си остава на същото място , тоест бутончетата , но се забиват в надписа photographer-bg.com.... защо така ?

Ето код:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="topLine"></div>
<div id="navigation">
<div class="menu">
<ul>
<li><a href="#">Начало</a></li>
<li><a href="#">За мен</a></li>
<li><a href="#">Фотогалерии</a></li>
<li><a href="#">Статии</a></li>
<li><a href="#">Слайдове</a></li>
<li><a href="#">Интересно</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</div>
<div id="logo">
<img src="img/logo.png" width="500" height="106" alt="logo" />
</div>
</div>
<div id="separateLine"></div>
</div>
</body>
</html>

css

ul , p {margin:0; padding:0;}
html,body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.5em;
	text-align:left;
	width:100%;
	height:100%;
	margin: 0;
	padding:0;
}

#topLine {background:url(../img/topLine.jpg); height:5px;}
#navigation {background:url(../img/navigation.jpg) ; height:106px;}
.menu {position:absolute; right:5px;}
.menu ul {list-style-type:none; }
.menu li {float:left; font-size:17px; font-weight:600;}
.menu a {padding:42px 15px; display:block;}
.menu a:link {color:#767676; text-decoration:none; border-left:1px solid #ccc; ;}
.menu a:visited {color:#767676;}
.menu a:hover {background:url(../img/buttondec.jpg); color:#d46432; text-decoration:none; font-weight:600;}
.menu a:active { background:url(../img/buttondec.jpg); color:#d46432; text-decoration:none; font-weight:600;}
.menu li:last-child { border-right:1px solid #ccc;}
#separateLine {background:url(../img/separateLine.jpg); height:25px;}

Благодаря предварително !!!

 

[dakata__92]

Пробвай вместо пиксели да задаваш в проценти ! Примерно 100 пиксела са ти 50 % -та

 

[confiscate]

За съжаление пак не става А като правя сайт , който не се разтяга на цял екран , а примерно в контейнер от 1000px всичко се получава. Просто много искам да се науча да правя на цял екран , но уви ... нещо не ми се получава

 

[somebody]

Ами така като гледам не си наясно с позиционирането на блоковите елемнти,релативни,абсолютни позиции и т.н.Като съвет бих ти казал да научиш хубавичко изборените по-горе неща и тогава чак да започнеш с кодирането на дизайн на сайт.Също абсолютната позиция на навигацията е аматъорско и не добро решение.. запознай се по-добре с плаващите елементи(float). Другото нещо което виждам е че правиш всичко в огромни размери... не го прави.Като залъгалка ще ти дам следното допълнение към твоя код:
[css]#container { min-width:1400px;position:relative; }[/css]
Така при по-малки резолюции няма да се наслагват навигацията и логото,като това няма да попречи да се разтяга при по-големи. :wink: