CSS 热点 &居中问题

发布于 2024-12-23 03:32:29 字数 1041 浏览 3 评论 0原文

我正在创建一个网站，我遇到了一个我不知道如何解决的问题，在网站上有一个矩形图像，中心有一个热点，我使用了以下 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%;
                }

第一行居中图像并允许页面可缩放，以下代码定义并创建热点。一切正常，热点和热点均可用。图像保持在正确的位置，但是在设计方面，我需要图像比页面顶部的当前位置低约 20px。每次我尝试使用边距或填充或任何形式的定位时，图像都会跳到页面的右上角，我不知道为什么。

我需要图像和热点保持相同，并且热点的位置保持相对，无论浏览器窗口大小如何，但对于设计，我需要将图像向下移动 20px

我哪里出错了以及如何实现这？

编辑 - 我已经创建了 JsFiddle 版本，所以你可以明白我的意思，黑色代表整个图像，浅绿色代表热点，我需要整个块（黑色和浅绿色）向下移动 20 像素，同时仍然保持居中，可扩展。

链接到 JSFIDDLE - http://jsfiddle.net/cT3Eu/

谢谢。

原文

I am midway through creating a website and I have come across an issue that I do not know how to fix, on the site there is a rectangular image with a hotspot in the center, I have used the following css code -

 #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%;
                }

The first line centers the image and allows the page to be scale-able, the following code defines and creates the hotspot. Everything works fine and the hotspot & Image remain in their correct position, however on the design side I need the image about 20px lower than its current position at the top of the page.
Every-time I try and use margins or padding or any form of positioning the image jumps to the top right hand corner of the page, and I have no Idea why.

I need the image and the hotspot to stay the same and the position of the hotspot to remain relative regardless of the browser window size but for the design I need the image to be moved down by 20px

Where am I going wrong and how can I achieve this?

EDIT - I have created JsFiddle Version, so you can see what I mean, the black represents the entire image and the aqua represents the hotspot, I need the entire block (black and aqua) to move down by 20 pixels while still remaining centered and scale-able.

Link to JSFIDDLE - http://jsfiddle.net/cT3Eu/

Thank you.

分享到QQ

分享到微博