Header с меню

[crazy_dog]

Здравейте колеги.
Да не изпадам в обяснения направо ще покажа една снимка:

Това примерно ми е картинката за header--a. Черните черти (доста грозновато) искам да са позици за бутончета с картинки.
Но незнам как да ги фикстирам точно на тези места и без значение с какъв браузер се отваря да не се разместват.

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

 

[adrian]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
#header { position: relative; width: 400px; height: 400px; border: 1px solid red; }
#link1 { position: absolute; top: 20px; left: 20px; }
#link2 { position: absolute; top: 100px; left: 20px; }
#link3 { position: absolute; top: 20px; left: 200px; }
#link4 { position: absolute; top: 100px; left: 200px; }
</style>
</head>
<body>
<div id="header">
<a href="#" id="link1"><img src="#" width="100px" height="40px" /></a>
<a href="#" id="link2"><img src="#" width="100px" height="40px" /></a>
<a href="#" id="link3"><img src="#" width="100px" height="40px" /></a>
<a href="#" id="link4"><img src="#" width="100px" height="40px" /></a>
</div>
</body>
</html>

Задължително е header да има position: relative; и после на всички линкове им даваш position: absolute; и си ги наместваш с top, left, bottom и right.

 

[shterev]

Същото бих предложил като @Adrian

 

[crazy_dog]

Благодаря adrian!
+1