Question

我有一个图像作为另一个页面的链接，我有一个2个文本选项的菜单（使用ul＆amp; li）当我只使用我的图像时，它可以工作，但当我尝试将所有内容放在一起时，我的图像没有链接，只有菜单有效。我的代码在Chrome和资源管理器中运行，我看不出问题出在哪里。有人请帮助我。

谢谢！

这是我的HTML代码：

<body>
    <div id="container">
        <div id="header">

           <div id="home">
              <a href="home.html"><img id="flores" src="images/flores.jpg" alt="home" /></a>
           </div>

           <div id="connexion">
              <section id="formulario">
                  <p id="titulo">Mi cuenta</p>
                  <form action="" method="get">
                      ...
                  </form>
              </section>
           </div>

           <div id="contenido">
               <div id="contenido_menu">
                   <ul>
                       <li><a href="rosa.html">Rosa</a></li>
                       <li><a href="jasmin.html">Jasmin</a> </li>
                   </ul> 
               </div>
            </div>
        </div>
    </div>
</body>

我的css代码：

#container{
    position: relative;
    margin:auto;
    margin-top:150px;
    width:1024px;
    height:768px;
    background-color: grey;
}
#header{
    margin:auto;
    margin-top:0px;
    width:1024px;
    height: 150px;
}

#home{
    position:absolute;
    width:624px;
    height:150px; 
}

#flores {
    margin-top:0px;
    width:100%;
    height:100%;
}


#contenido{ 
    position:absolute;
    margin: auto;
    width:1024px;
    height:438px;
    background-color: pink;
}
#contenido_menu{
    position: absolute;
    margin-top:5px; 
    background-image: url("img/rosas.jpg");
    background-size: 100% 100%;
    width:619px;
    height:95px;
    line-height:95px;
    float:left;
}
#contenido_menu ul{
    margin: 0 auto;
}

#contenido_menu li{
    display:inline;
    padding-top: 50%;
    padding-bottom: 5px;
}
#contenido_menu a:link, #contenido_menu a:visited{
    font-family: Arial;
    font-size:19px; 
    font-weight:bold;
    color:#1a53ff;
    height:40px;
    padding:30px 50px;
    text-decoration:none;
}

Answer 1

我唯一能想象的就是画面上有一些div或菜单。尝试使用调试工具中的标记检查器进行检查。

Answer 2

正确检查您的代码。

在html中，您已将flores.jpg的位置指定为＆＃34; images / flores.jpg＆＃34;。
而对于其他图像rosas.jpg，在你的CSS中你输入的位置是＆＃34; img / rosas.jpg＆＃34;。

检查两个图像是否都在各自的文件夹中，或者您可能输错了其中一个。

Answer 3

问题来自以下声明。删除padding-top:50%。我希望你错误地将%改为px。

 #contenido_menu li{
 display:inline;
 padding-top: 50px;
 padding-bottom: 5px;
 }

同时从position:absolute课程中删除#home。

#home{
/*position:absolute;*/
width:624px;
height:150px; 
}

DEMO

Answer 4

你定位了主页和菜单div绝对，如果我删除绝对它工作正常：

http://jsfiddle.net/2m8rmvuh/

编辑：与旧小提琴相关联，现在是正确的小提琴;）

#home{
width:624px;
height:150px;  
}

#contenido{ 
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
margin-top:5px; 
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}

我不知道那是否是你想要的外观，但是如果你给它们属性绝对，那么它们是重叠的，如果你使用大图片。

没有链接图像

4 个答案: