2017-01-26 6 views
0

私のページには、ロゴと青い背景と同じレベルにあるTwitterアイコンがあるべきですが、それはその下にあります。私のサイトのヘッダー部分にあるはずのアイコンはその下にありますか?

パディングと問題の原因を確認しました。ここで

は私のコードです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <!-- set character encoding for the document --> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <meta name="description" content="A description of the page"> 
     <link rel="stylesheet" href="style.css"> 
     <link rel="stylesheet" media="screen" href="superfish.css"> 
     <script src="https://use.fontawesome.com/7a86a996d7.js"></script> 
     <script 
     src="https://code.jquery.com/jquery-3.1.1.js" 
     integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
     crossorigin="anonymous"></script> 
     <script src="hoverIntent.js"></script> 
     <script src="superfish.js"></script> 
     <script> 
     jQuery(document).ready(function(){ 
      jQuery('ul.sf-menu').superfish(); 
     }); 

     </script> 
    </head> 
    <body> 
     <div id="header"> 
     <p id="headerleft"> 
      <a href="http://www.wdwfantasy.com/" title="Disney Information"><img src="wdwfantasy.png" alt="Disney Information" height="100px" width="105px"></a> 
     </p> 
     <p id="headerright"> 
      <a href="http://www.twitter.com/wdwfantasy" target="_blank"><img src="twitter.png" alt="twitter" height="100px" width="105px" </a> 
     </p> 
     </div> 
     <div id="nav"> 
     </div> 
    </body> 
</html> 

そして、ここでは私のCSSは、問題の原因かもしれない何

div{ 
    display:block; 

} 

#header_container { 
    background: #FFF url(https://images.wdwinfo.com/design/header-bg.jpg); 
    height: 75px; 
    zoom: 1; 
} 

#header{ 
    background: white; 
    margin: 0 auto; 
    width: 950px; 
    height: 110px; 
    background: #ebf1f6; 
    background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); 
    background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); 
    background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0); 
} 

#headerright{ 
    float: right; 
    width: 100px; 
    height: 50px; 
    border: 0; 
    margin: 0; 
    display: inline; 
} 

} 

#headerleft { 
    float:left; 
    width:850px; 
    background-color: grey; 
    height:50px; 
    width: 850px; 
} 

のですか?

何かが役に立ちます。

答えて

0

#headerrightの後に}が追加され、コードが破損しています。それを削除すると、あなたのロゴをよりインラインで浮かせることができます。

---> Check external Fiddle <---

enter image description here

+0

ありがとうございました!問題を修正しました! –

関連する問題