2017-06-12 9 views
0

申し訳ありません - これはおそらく本当にシンプルですが、今は私をちょっと運転しています。私のサイトリンクのフッタは新しい行にジャンプしているように見えるので、あなたをリンクに連れてこないでしょう。リンクはマウスのクリックでジャンプし続ける

これはラップトップとタブレットの横サイズのページです。モバイルフッターは正常に動作します。

私は親divに、親指を押し下げて相対的な位置を固定して固定することをやってみました。 Webで回答を検索しましたが、マウスクリックではなくマウスオーバーで問題が発生しているようです。私もすべてを自分の個人部門に入れてみました(最後に試してみました)。

私が表示してみてください、高度で jsfiddle

感謝するJSFiddleにすべてのコードを入れています。

マイク

p a:hover, 
 
a:focus, 
 
a:visited { 
 
    color: #ffffff; 
 
    background: #333333; 
 
    white-space: nowrap; 
 
} 
 

 
a:active { 
 
    border: none !important; 
 
    display: block; 
 
    white-space: nowrap; 
 
    width: 20%; 
 
} 
 

 
div.homebox a:hover { 
 
    background: #999999; 
 
    white-space: nowrap; 
 
} 
 

 
div.homebox a, 
 
a:focus, 
 
a:active, 
 
a:visited { 
 
    color: #73170E; 
 
    white-space: nowrap; 
 
} 
 

 
div.footerlink a:hover { 
 
    background: #999999; 
 
    white-space: nowrap; 
 
} 
 

 
div.footerlink a, 
 
a:focus, 
 
a:active, 
 
a:visited { 
 
    color: #ff0000; 
 
    white-space: nowrap; 
 
} 
 

 
a img { 
 
    background: none; 
 
} 
 

 
#FooterContainer { 
 
    width: 100%; 
 
    background: #ccc; 
 
    overflow: hidden; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#FooterContact { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 45%; 
 
    margin-left: 30px; 
 
} 
 

 
#FooterLatest { 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 5px; 
 
    width: 30%; 
 
} 
 

 
#FooterSocial { 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 5px; 
 
    width: 15%; 
 
    text-align: center; 
 
    padding-bottom: 10px; 
 
} 
 

 
#social { 
 
    width: 60%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#FooterLegal { 
 
    color: #ffffff; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: #000000; 
 
} 
 

 
#FooterLegalText { 
 
    border: 1px solid yellow; 
 
    display: inline-block; 
 
    float: right; 
 
    width: 55%; 
 
} 
 

 
.legalprivacy { 
 
    border: 1px solid orange; 
 
    width: 15%; 
 
    top: 0; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalcookie { 
 
    border: 1px solid orange; 
 
    width: 20%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalshoptc { 
 
    border: 1px solid orange; 
 
    width: 18%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalaccessibility { 
 
    border: 1px solid orange; 
 
    width: 19%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalsitemap { 
 
    border: 1px solid orange; 
 
    width: 9%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legaldot { 
 
    border: 1px solid orange; 
 
    width: 3%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#FooterCopyright { 
 
    border: 1px solid white; 
 
    display: inline-block; 
 
    float: left; 
 
    font-size: 12px; 
 
    width: 35%; 
 
} 
 

 
.block_padding { 
 
    padding-top: 40px; 
 
} 
 

 
.connect_fb { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_fb:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_fb .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_tweet { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_tweet:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_tweet .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_instagram { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_instagram:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_instagram .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_pinterest { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_pinterest:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_pinterest .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_gplus { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_gplus:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_gplus .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_rss { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_rss:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_rss .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
#justgive { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding-top: 10px; 
 
} 
 

 
#translate { 
 
    padding-top: 10px; 
 
} 
 

 
.contacttable { 
 
    display: table; 
 
    text-align: left; 
 
    width: 90%; 
 
    padding: 0px 0px 3px 0px; 
 
} 
 

 
.contactrow { 
 
    display: table-row; 
 
} 
 

 
.contactcell { 
 
    display: table-cell; 
 
    padding: 3px 0px; 
 
    font-size: 0.9em; 
 
} 
 

 
.contactcellicon { 
 
    display: table-cell; 
 
    width: 5%; 
 
    padding: 3px 10px; 
 
} 
 

 
.contactbody { 
 
    display: table-row-group; 
 
}
<div id="FooterContainer"> 
 
    <div id="FooterContact"> 
 
    <h4><u>Contact Us</u></h4> 
 

 
    <div id="contdetails"> 
 
     <div class="contacttable"> 
 
     <div class="contactbody"> 
 

 
      <div class="contactrow"> 
 
      <div class="contactcellicon"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
 
      <div class="contactcell">Address Here</div> 
 
      </div> 
 

 
      <div class="contactrow"> 
 
      <div class="contactellicon"><i class="fa fa-phone" aria-hidden="true"></i></div> 
 
      <div class="contactcell">phone</div> 
 
      </div> 
 

 
      <div class="contactrow"> 
 
      <div class="contactcellicon"><i class="fa fa-at" aria-hidden="true"></i></div> 
 
      <div class="contactcell"><a href="mailto:#">email</a></div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="FooterLatest"> 
 

 
    <h4><u>Latest Product News</u></h4> 
 
    <ul class="posts"> 
 
     <?php query_posts('cat=1,3&posts_per_page=4'); while (have_posts()) : the_post(); ?> 
 
     <?php $post_date = get_the_date('j M Y'); echo $post_date; ?> 
 
     <ul style="list-style: none;"> 
 
     <li><a href='<?php the_permalink() ?>'><b><?php the_title(); ?></b></a></li> 
 
     </ul><br> 
 
     <?php endwhile; ?> 
 
     <?php wp_reset_query(); ?> 
 
    </ul> 
 

 
    </div> 
 

 
    <div id="FooterSocial"> 
 
    <div id="social"> 
 
     <div class="connect_fb"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_tweet"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_instagram"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_pinterest"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_gplus"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_rss"> 
 
     <a href="#"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div id="justgive"> 
 
     <a href="#" target="_blank"><img src="#" alt="Fundraise On JustGiving"></a> 
 
    </div> 
 

 

 
    </div> 
 
</div> 
 

 
<div id="FooterLegal"> 
 

 
    <div id="FooterCopyright" class="footerlink"> 
 
    &copy; copyright info</div> 
 

 
    <div id="FooterLegalText"> 
 
    <div class="legalprivacy"><span><a href="#">Privacy Policy</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalcookie"><span><a href="#">Cookie Policy</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalshoptc"><span><a href="#">Shop T&Cs</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalaccessibility"><span><a href="#">Accessibility</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalsitemap"><span><a href="#">Sitemap</a></span></div> 
 
    </div> 
 

 
</div>

+0

:active'状態のみ(表示:ブロック、ホワイトスペース:でもNOWRAPと明示的に指定された幅) - もちろん、それがその状態に入るときにジャンプするようにします。 – CBroe

+0

btw。、p a:ホバー、a:フォーカス、a:訪問済み、div.homebox a、a:フォーカス、 a:アクティブ、a:visitedはここで選択する要素を選択しません。 – CBroe

+0

@CBroe - 「コメントを使用して詳細情報を求めたり、改善を提案する」コメントのプレースホルダテキストに記載されているように、コメント内の質問に回答することは避けてください。 –

答えて

0

@CBroe、この動作を無効にし、あなたのフッターアンカーにこのように気にいらを追加するソリューショントライの多少を提供することが、権利です。

div.footerlink a {display: inline-block;}

JS Fiddle

よろしく、 -B

あなたは基本的に `のリンクのレイアウトプロパティを変更している
+0

すべてのお返事ありがとうございます。まず、気付いてくれてありがとう、空白を追加しました:nowrap;ほぼすべてに、子Divsを離陸しました。 すべてのspan div要素を取り出してディスプレイを追加することで作業を進めることができます:inline-block; cssに。 –

関連する問題