Я нахожусь на середине создания веб-сайта, и я столкнулся с проблемой, которую я не знаю, как исправить. На сайте есть прямоугольное изображение с горячей точкой в центре, я использовал следующий код CSS -CSS Hotspot & Centering Issue
#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
Где я Я ошибаюсь и как могу это достичь?
EDIT - я создал версию JsFiddle, поэтому вы можете видеть, что я имею в виду, черный представляет изображение целиком, а aqua представляет собой точку доступа, мне нужен весь блок (черный и аква), чтобы двигаться вниз на 20 пикселей, а все еще оставаясь центрированным и масштабируемым.
Ссылка на JSFIDDLE - http://jsfiddle.net/cT3Eu/
Спасибо.
Вы можете попробовать пример в jsfiddle ??? –
Я не совсем уверен, что вы имеете в виду, вы имеете в виду, что он помещен в jsfiddle, чтобы дать вам пример того, что я имею в виду? – user1116846