Идея как да позиционирам менютата при различни резолюций!

[rosko]

Здравейте!
Имам проблем, който не мога да реша от около седмица!
Разработвам си сайт, който разбира се му трябват менюта, но искам нищо да не се размества при каквато и да е резолюция!
Ето ви скрийнове, как изглежда при нормална резолюция, и как при маалко увеличение от браузъра, което съответно е изкуствено повишаване на резолюцията!
И ако имате идея също да не се размества при друг браузър освен Опера и Файърфокс(при лисичко се размества малко от дясно, ноо ще го оправя)!

НОРМАЛНО:

120% УВЕЛИЧЕНО:

И така ето го и кода(знам, че за това, което искам да постигна кода е грешен, и питам вас):

<div class="menu_ban"></div>
<div class="menu_end"></div>
<div id="head_menu" style="position:absolute;top:165px;">
<div id="head_2" style="position:absolute;left:223px;"><a href="./index.php"><img src="./images/menu/1_out.jpg" oversrc="./images/menu/1_over.jpg" title="Начало" alt="Начало"></a></div>
<div id="head_3" style="position:absolute;left:319px;"><a href="./issies.php"><img src="./images/menu/2_out.jpg" oversrc="./images/menu/2_over.jpg" title="" alt=""></a></div>
<div id="head_4" style="position:absolute;left:413px;"><a href="./forum/"><img src="./images/menu/3_out.jpg" oversrc="./images/menu/3_over.jpg" title="Форум" alt="Форум"></a></div>
<div id="head_4" style="position:absolute;left:509px;"><a href="for.php"><img src="./images/menu/4_out.jpg" oversrc="./images/menu/4_over.jpg" title="За...(показва информация-За нас и За проекта)" alt="За...(показва информация-За нас и За проекта)"></a></div>
<div id="head_6" style="position:absolute;left:603px;"><a href="./gallery.php"><img src="./images/menu/5_out.jpg" oversrc="./images/menu/5_over.jpg" title="Галерия" alt="Галерия"></a></div>
<div id="head_7" style="position:absolute;left:699px;"><a href="./news.php"><img src="./images/menu/6_out.jpg" oversrc="./images/menu/6_over.jpg" title="Новини" alt="Новини"></a></div>
</div>

Ето и на двата класа "menu_ban" и "menu_end":

.menu_ban {
background-image: url(images/menu_ban.jpg);
top: 165px;
position: absolute;
width: 193px;
height: 35px;
left: 33px;
}

.menu_end {
background-image: url(images/menu_end.jpg);
top: 165px;
position: absolute;
width: 182px;
height: 35px;
left: 802px;
}

Ето ви всичко, кажете как да стане това!
АА..И още нещо- Пробвах с   , но не става(пак се размества)!

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

 

[master_code]

Самия размер на Image-ите няма как да се промени при по-голяма резолюция.Можеш да центрираш винаги сайта да е в центъра като сложиш всичко в един див.Или на лявото меню да сложиш padding:left а на дясното padding:right за да ходят на страни...

 

[shterev]

Само да ти кажа ,че когато ползваш position:absolute; е добре родителя в който се намират тея елементи да е position:relative; , нали ако трябва да си има родителя width и height, за да не има проблеми . Защото ако родителя ти е релатив и няма височина може да се бъгва. Така тези абсолютните ще се влияят от тоя релативен родител. Иначе може да праят проблеми.

 

[rosko]

Мислех, че няма да потрябват, но ето ви снимка на реалните менюта!
Това бяха само първият и последният елемент(просто за красота, а и за да видите как се размества менюто)!

Това не е увеличено, просто не съм доизпипал, но когато увелича вече се вижда, че нещо не е наред!

 

[rosko]

Никой ли не знае!?

 

[mrqnka]

Аз точно код не мога да ти дам, защото не съм мн добре с хтмл-то и цсс-то, но например не може ли за бутоните изображението да е с ширина 1рх. И после всеки бутон ти е един div, казваш ширината им да е в проценти, тази картинка е фон и й даваш repeat-x. Малко тъпичко решение, ама...

ТЦ, сега като се замисля, може цялото меню да го сложиш в един див с височина колкото бутоните ти и ширина 100%, даваш на тази картинка пак repeat-x и за разделителите между бутоните не знам как да измислиш някаква отвесна чертичка. може да я направиш на картинка и след всеки линк в <li> да я слагаш.