当图像位于标题HTML / CSS中时，链接不起作用

时间：2016-04-25 20:21:13

标签： html css

每当我向标题添加图像时，标题和导航栏中的所有链接都会停止工作。我一直试图解决这个问题，但我只是对html有点了解，所以我被卡住了。这是HTML

＆＃13;
＆＃13; 
body { background-color: #abc67e;
      color: #666666;
      font-family:Tahoma; 
      height: 100%;
}     
header { background-color: #ffe4b5;
         color: #FFFFFF;
         font-family: Tahoma; 
         position: relative;
         margin-bottom: 0;}

h1 { line-height: 200%;
     background-image: url(sunset.jpg);
     background-repeat: no-repeat;
     background-position: right;
     padding-left: 20px;
     height: 72px;
     margin-bottom: 0;
}
nav { font-weight: bold;
      background-color: #deb887; 
}
h2 {  font-family: Tahoma; 
}
dt { color: #000033; 
     font-weight: bold;
}            
footer { font-size: 0.70em;
         text-align: center;
         font-style: italic;
         padding: 10px;
}        
h3 { color: #000033; 
}
main { padding-left: 20px;
      padding-right: 20px;
}
#wrapper { margin-left: auto;
           margin-right: auto;
           width: 55%;
           background-color: #fdf5e6;
           min-width: auto;
           box-shadow: 5px 5px 5px #523411;
           height: 100%;
           border: 4px;
           border-style: outset;
}
nav ul { list-style-type: none; 
        margin-top: 0;
        z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right; 
      border-left: 1px;
      border-left-style: dotted;
      padding-left: 50px;}
aside img { width: 100%;
          height: 100%;}
section { float: right;
        width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
     width: 225px;
     padding-bottom: 10px;
     margin: 10px;
     background-color: #EAEAEA;
     text-align: center;
     font-style: italic;
     font-family: Tahoma; }
label { float: left; 
      display: block; 
      width: 8em;
      padding-right: 25px; 
      }
input { display: block;
      margin-bottom: 1em;
      }
textarea { display: block; 
        margin-bottom: 1em;
      }
#mySubmit { margin-left: 11.5em;
      }
.navbarimg { position: absolute; 
             padding-left: 650px;
             padding-top: 110px;}
＆＃13; 
<!DOCTYPE html>
  <html lang="en">
  <head>
  <title>A Dog's Life</title>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet">
  </head>
  <body>
  <div id="wrapper">
  <header>
      <img src="images/navimg.png" class="navbarimg">
      <a href="project/index.html"><img src="images/banner.jpg" style="width:100%"></a>
      <h3></h3>
  </header>
  <nav>
      <ul>
      <li><a href="/index.html"><img src="images/home-nav.png" alt="Home"></a></li>
      <li><a href="/about.html"><img src="images/about-nav.png" alt="About"></a></li>
      <li><a href="/services.html"><img src="images/services-nav.png" alt="Services"></a></li>
      <li><a href="/gallery.html"><img src="images/gallery-nav.png" alt="Gallery"></a></li>
      <li><a href="/contact.html"><img src="images/contact-nav.png" alt="Contact"></a></li>
      </ul>
  </nav>
  <main>
      <h2>Reserve your dog's stay today!</h2>
      <aside><img src="images/dogs1.jpg" alt="Dogs playing"></aside>
      <h3>Contact Us</h3>
      <p>Required information is marked with an asterisk (*).</p>
      <form method="post" action="http://webdevbasics.net/scripts/pacific.php">
      <label for="myFName">*First Name:</label>
      <input type="text" required="required" name="myFName" id="myFName"><br>
      <label for="myLName">*Last Name:</label>
      <input type="text" required="required" name="myLName" id="myLName"><br>
      <label for="myEmail">*Email:</label>
      <input type="email" required="required" name="myEmail" id="myEmail"><br>
      <label for="myPhone">Phone:</label>
      <input type="tel" name="myPhone" id="myPhone"><br>
      <label for="arrival">Arrival Date:</label>
      <input type="date" name="arrival" id="arrival">
      <label for="nights">Nights:</label>
      <input type="number" name="nights" min="1" max="14" id="nights">
      <label for="myComments">*Comments:</label>
      <textarea name="myComments" required="required" cols="20" rows="2" id="myComments"></textarea><br>
      <input type="submit" id="mySubmit" value="Submit">
      </form>
  <br>
  <img src="images/logo.png">
  </main>
  <footer>
  <br>
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>
  Copyright &copy; 2016 A Dog's Life<br>
  <a href="mailto:pierce@jensen.com">pierce@jensen.com</a>
  </footer>
  </div>
  </body>
  </html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

标题图片与导航重叠：

SELECT tblSale.Staff_ID,
SUM(tblSale.Sale_ID*tblSale.Staff_ID) AS 
SalesPerStaff FROM tblSale

INNER JOIN tblStaff ON tblSale.Sale_ID = tblStaff.Staff_ID
GROUP BY tblSale.Sale_ID

答案 1 :(得分：1)

标题中的<img>标记实际上覆盖在您的链接之上，使其无法访问。

尝试相应地调整z-index属性：

.navbarimg {
    position: absolute;
    padding-left: 650px;
    padding-top: 110px;
    /* This will "push" the <img> tag down below the <a> tags so they can be clicked */
    z-index: -1;
}

示例代码段

＆＃13;
＆＃13; 
body { background-color: #abc67e;
      color: #666666;
      font-family:Tahoma; 
      height: 100%;
}     
header { background-color: #ffe4b5;
         color: #FFFFFF;
         font-family: Tahoma; 
         position: relative;
         margin-bottom: 0;}

h1 { line-height: 200%;
     background-image: url(sunset.jpg);
     background-repeat: no-repeat;
     background-position: right;
     padding-left: 20px;
     height: 72px;
     margin-bottom: 0;
}
nav { font-weight: bold;
      background-color: #deb887; 
}
h2 {  font-family: Tahoma; 
}
dt { color: #000033; 
     font-weight: bold;
}            
footer { font-size: 0.70em;
         text-align: center;
         font-style: italic;
         padding: 10px;
}        
h3 { color: #000033; 
}
main { padding-left: 20px;
      padding-right: 20px;
}
#wrapper { margin-left: auto;
           margin-right: auto;
           width: 55%;
           background-color: #fdf5e6;
           min-width: auto;
           box-shadow: 5px 5px 5px #523411;
           height: 100%;
           border: 4px;
           border-style: outset;
}
nav ul { list-style-type: none; 
        margin-top: 0;
        z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right; 
      border-left: 1px;
      border-left-style: dotted;
      padding-left: 50px;}
aside img { width: 100%;
          height: 100%;}
section { float: right;
        width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
     width: 225px;
     padding-bottom: 10px;
     margin: 10px;
     background-color: #EAEAEA;
     text-align: center;
     font-style: italic;
     font-family: Tahoma; }
label { float: left; 
      display: block; 
      width: 8em;
      padding-right: 25px; 
      }
input { display: block;
      margin-bottom: 1em;
      }
textarea { display: block; 
        margin-bottom: 1em;
      }
#mySubmit { margin-left: 11.5em;
      }
.navbarimg { position: absolute; 
             padding-left: 650px;
             padding-top: 110px; z-index: -1;}
＆＃13; 
<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>A Dog's Life</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    </head>
    <body>
    <div id="wrapper">
    <header>
        <img src="images/navimg.png" class="navbarimg">
        <a href="project/index.html"><img src="images/banner.jpg" style="width:100%"></a>
        <h3></h3>
    </header>
    <nav>
        <ul>
        <li><a href="/index.html"><img src="images/home-nav.png" alt="Home"></a></li>
        <li><a href="/about.html"><img src="images/about-nav.png" alt="About"></a></li>
        <li><a href="/services.html"><img src="images/services-nav.png" alt="Services"></a></li>
        <li><a href="/gallery.html"><img src="images/gallery-nav.png" alt="Gallery"></a></li>
        <li><a href="/contact.html"><img src="images/contact-nav.png" alt="Contact"></a></li>
        </ul>
    </nav>
    <main>
        <h2>Reserve your dog's stay today!</h2>
        <aside><img src="images/dogs1.jpg" alt="Dogs playing"></aside>
        <h3>Contact Us</h3>
        <p>Required information is marked with an asterisk (*).</p>
        <form method="post" action="http://webdevbasics.net/scripts/pacific.php">
        <label for="myFName">*First Name:</label>
        <input type="text" required="required" name="myFName" id="myFName"><br>
        <label for="myLName">*Last Name:</label>
        <input type="text" required="required" name="myLName" id="myLName"><br>
        <label for="myEmail">*Email:</label>
        <input type="email" required="required" name="myEmail" id="myEmail"><br>
        <label for="myPhone">Phone:</label>
        <input type="tel" name="myPhone" id="myPhone"><br>
        <label for="arrival">Arrival Date:</label>
        <input type="date" name="arrival" id="arrival">
        <label for="nights">Nights:</label>
        <input type="number" name="nights" min="1" max="14" id="nights">
        <label for="myComments">*Comments:</label>
        <textarea name="myComments" required="required" cols="20" rows="2" id="myComments"></textarea><br>
        <input type="submit" id="mySubmit" value="Submit">
        </form>
    <br>
    <img src="images/logo.png">
    </main>
    <footer>
    <br>
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
    Copyright &copy; 2016 A Dog's Life<br>
    <a href="mailto:pierce@jensen.com">pierce@jensen.com</a>
    </footer>
    </div>
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您将图像绝对定位在.navbar定义中，因此它将从文档流中取出，并自动覆盖未指定为z-index的所有内容。将z-index添加到其他元素，或者不使用绝对定位来完全避免发生这种情况的可能性。

您也不必为元素设置填充（即使它是不可见空间也会覆盖其他元素，因为遵循框模型的规则，它在元素的“内部”），但是使用左/顶部而不是padding-left / padding-top。

相关问题
最新问题