0

ナビゲーションリンクをコンテナの背後に配置するためのサポートが必要です。これを行うと、リンクにジャンプ効果を与えて画像を追加できます。フォルダのように見せたいのですが、リンクにカーソルを合わせると、各リンクがジャンプして新しいフォルダに移動するように見えます。何らかの理由で、リンクをジャンプさせるコードを挿入すると、リンクがコンテナに押し下げられました。その外観を得るには、コンテナの少し下と後ろに必要です。助けてくれませんか。

BODY {
overflow:hidden;
      margin: 150px; 
      padding: 0; 
      background: url ();
      color: #404040; 
      font: normal 12px arial;}


#header {
      margin:35px auto;
      width: 800px;
      height: auto;
      padding: 10px 0px 0px 0px;
      background: #900}



A.main:link, A.main:active, A.main:visited
       {
       margin-bottom: 0px; 
       padding: 5px 20px 20px 10px;
       margin: 0px 2px 0px 2px;
       background: url('file:///C|/Users/JESS/Desktop/none');
       border:double;
       float:left;
       margin: 25px;}

A.main:hover  
     {color: #303030;
      border: double;
      margin:4px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;} 

#content {
     float: none;
     width: 800px;
     padding: 0px 0px 100px 0px;
     height: auto;
     text-align: justify;
     overflow: auto;}


<div id="header">
      <center>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      </center>
</div>



<div id="container">



<div id="content">
4

2 に答える 2

0

追加z-indexしてみpositionましたか？#header#container

#header {
  margin:35px auto;
  width: 800px;
  height: auto;
  padding: 10px 0px 0px 0px;
  background: #900;
  position: relative;
  z-index: -10;
}


#container {
  margin: 0px auto;
  padding-left:15px;
  width: 800px;
  height: auto;
  background: #000;
  border-style:double;
  z-index: 5;
  box-shadow: 15px 15px 5px #333;
  -moz-box-shadow: 10px 10px 5px #333;
  -webkit-box-shadow: 10px 10px 5px #333;
}
于 2012-06-01T00:08:38.643 に答える
0

設定するには、設定z-indexする必要がありますposition。ただし、値は相対、絶対、または固定にすることができます。あなたが説明しているようにそれを「ジャンプ」させるために、あなたは次のようにマージンをいじくり回すことができます：

A.main:link, A.main:active, A.main:visited {
       z-index: 5;
       position: relative;
       margin-bottom: 0px;
       padding: 50px;
       padding-top: 0px;
       border:double;
       float:left;
       margin: 10px;}

A.main:hover {
      color: #303030;
      border: double;
      margin:10px;
      margin-top:0px;
      margin-bottom:20px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     position:relative;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;}
于 2012-06-01T00:46:24.330 に答える