Я на полпути к созданию веб-сайта, и я столкнулся с проблемой, которую я не знаю, как исправить, на сайте есть прямоугольное изображение с точкой доступа в центре, я использовал следующий код CSS -
#image_map
{
display: block; margin-left: auto; margin-right: auto;
width:302px;
height:65px;
background:url(Images/ManordLogo.png) no-repeat;
position:relative;
}
#image_map a
{
display:block;
position:absolute;
}
#image_map a#link1
{
width:42px;
height:49px;
top:11%;
left:43%;
}
Первая строка центрирует изображение и позволяет масштабировать страницу, следующий код определяет и создает точку доступа. Все работает отлично, и точка доступа и изображение остаются в правильном положении, однако на стороне дизайна мне нужно изображение примерно на 20 пикселей ниже его текущей позиции вверху страницы.
Каждый раз, когда я пытаюсь использовать поля или отступы, или любое другое расположение изображения, переход в верхний правый угол страницы, и я понятия не имею, почему.
Мне нужно, чтобы изображение и точка доступа оставались неизменными, а положение точки доступа оставалось относительным независимо от размера окна браузера, но для дизайна мне нужно, чтобы изображение было уменьшено на 20px
Где я иду не так и как этого добиться?
РЕДАКТИРОВАТЬ - Я создал версию JsFiddle, так что вы можете видеть, что я имею в виду, черный цвет представляет собой все изображение, а аква представляет собой точку доступа, мне нужен весь блок (черный и аква), чтобы двигаться вниз на 20 пикселей, в то время как все еще оставаясь в центре и масштабируемым.
Ссылка на JSFIDDLE - http://jsfiddle.net/cT3Eu/
Спасибо.