CSS Positioning -> Проблем

[Angel]

Здравейте,

Работя върху една страница и попринцип резолюцията, на която работя попринцип е 1280 х 600 и днес седнах да го работя на резолюция 1920 х 1080, при което позицията на менюто ми се измени и отиде по-нагоре и по-наляво а когато е на по-малката резолюция си е както го искам. Как да го направя така,че да стой на едно място при която и да е резолюция.

Ето го CSS кода ми:
[css]

body {
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

.logo {
position: absolute;
left:0px;
top:0px;

}

/* MENU DESIGN STARTS */

.menu {
position: absolute;
left:600px;
top:550px;
}

.News_Button {
color:#0fa5ff;
font-style:inherit;
font-size:14pt;
}

.News_Button:hover {
color:#FFF;
}

.My_Career_Button {
color:#0fa5ff;
font-style:inherit;
font-size:14pt;
}

.My_Career_Button:hover {
color:#FFF;
}

.My_Life_Button {
color:#0fa5ff;
font-style:inherit;
font-size:14pt;
}

.My_Life_Button:hover {
color:#FFF;
}

.Gallery_Button {
color:#0fa5ff;
font-style:inherit;
font-size:14pt;
}

.Gallery_Button:hover {
color:#FFF;
}

.Videos_Button {
color:#0fa5ff;
font-style:inherit;
font-size:14pt;
}

.Videos_Button:hover {
color:#FFF;
}

.Contact_Button {
color:#0fa5ff;
font-style:inherit;
font-size:14pt;
}

.Contact_Button:hover {
color:#FFF;
}

.underline {
position: absolute;
left:600px;
top:570px;
}


/* MENU DESIGN ENDS */

a {
text-decoration:none;
}
[/css]

и ето кода за менюто:

<div class="logo">
<img src='images/logo.gif' height="150" width:"150" />
</div>
<div class='menu'>
<a  href="news.php"><span class="News_Button">NEWS</span></a><img src='images/point.gif'/ height="3" width="3" hspace="10" vspace="3.5" ><a href="news.php"><span class="My_Career_Button">MY CAREER</span></a><img src='images/point.gif'/ height="3" width="3" hspace="10" vspace="3.5" ><a href="news.php"><span class="My_Life_Button">MY LIFE</span></a><img src='images/point.gif'/ height="3" width="3" hspace="10" vspace="3.5" ><a href="news.php"><span class="Gallery_Button">GALLERY</span></a><img src='images/point.gif'/ height="3" width="3" hspace="10" vspace="3.5" ><a href="news.php"><span class="Videos_Button">VIDEOS</span></a><img src='images/point.gif'/ height="3" width="3" hspace="10" vspace="3.5" ><a href="contact.php"><span class="Contact_Button">CONTACT</span></a>
</div> 
<div class='underline'>
<img src="images/underline.gif" height="10" width="610"/>
</div>

 

[exec]

Към body може да добавиш и ширина:

body {
width: 1280px;
}

Все пак добра идея е да се съобразяваш с най-разпростанените резолюции на потребителите, не с твоята.

 

[teroristd]

Много трябва да учиш цсс-а още НО прави се един div който да ти бъде контейнер на целия сайт, задаваш му определена широчина например 1000 пиксела, също така му слагаш margin: 0 auto; за да го центрираш и всичко останало слагаш в него, като работи с маргин и падинг а абсолютните позиции ги избягвай като дявол тамян . Също така е добре да си правиш отделни контейнери за разните части на сраницата като хедъра менюто и т.н, като естествено те трябва да са вътре в главния контейнер. Така ако действаш първо много по лесно ще ги манипулираш и второ няма да имаш никакво разместване под каквато и да е резолюция.