1

私はそのようなばかげたものを見たことがありません。あるいは、午前2時30分で幻覚を見ているのかもしれません。ヘッダー内に単純なアンカー リンクを作成しましたが、それらをクリックすることがまったくできません。それらは単なるプレーンテキストであり、完全にクリックできません。

私が HTML/CSS デーモンに従っていない箇所について、ヒントをいただければ幸いです。

HTML

<header>
    <div class="confine">

        <div class="complete-head-content">

              <div class="left-width-less logo-width">
                  <img src="./imgs/twit-logo.png" />
              </div>

              <div class="right-width-less">
                  <div class="top-header-content">

                         <h1 class="pres-title">Defining Twisted Strategy</h1>
                  </div>

                  <div class="lower-header-content">

                        <div id="navcontainer">
                          <ul>
                            <li><a href="http://www.google.com">Meet the Hobos</a></li>
                            <li><a href="#">Why me?</a></li>
                            <li><a href="#">Our Work in Oblivion</a></li>
                            <li><a href="#">Our Perspective</a></li>
                            <li><a href="#">Our Approach</a></li>
                          </ul>
                        </div>

                  </div>
              </div>

              <div class="c"> </div>
        </div>

    </div>

  </header>

  <div id="contend"> 
  ... ... ...

CSS

a {
  color: #EA2E49;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #EA2E49;
  cursor: pointer;
}

header {
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
}

.complete-head-content {
  width: 100%;
  background-color: #a0c654;
  height: 130px;
}

.left-width-less {
  float: left;
  background-color: #fff;
  width: 15%;
  text-align: center;
  height: 130px;
    vertical-align: middle;
}

.left-width-less img {

  width : 76px; 
  height: 100px;
  margin-top: 10px;
}

.right-width-less {
    float: right;
    width: 85%;
}

.top-header-content {
  width: 100%;
  height: 70px;
  background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}

.lower-header-content {
  width: 100%;
  height: 70px;
}

.logo {
  cursor: pointer;
}

/* Navigation */

#navcontainer {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 19px;
}
#navcontainer ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
  text-decoration: none;
  padding: .2em 1.7em;
  color: #fff;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

編集

Nikhil のおかげで、削除するとバグが修正された Z-index:1 がありました。

ありがとう。

4

2 に答える 2

1

あなたが何かを忘れない限り。それはcssの有無にかかわらず私のために働いています。IE 8 でテスト済み

どのようにCSSを含めましたか？

于 2013-09-18T06:42:00.260 に答える