2017-01-16 11 views
0

私は自分のサイトに追加しようとしている次のイメージタグを持っています。私はそれがで表示されるように、私はタグを追加する必要があり、両方の頭の中でこのタグを追加しようとしただけでなく、私の_Layout.cshtmlページのbodyタグとそれだけでheader.Where下回ってしまいましたヘッダーASP.NETのサイトロゴコアMVC

<a href="@Url.Action("Index", "core")" class="navbar-brand"> 
    <img src="~/images/core.png" title="core" alt="additional title" /> 
</a> 

サイトの左上隅?

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

<title>@ViewData["Title"] - core</title> 

<environment names="Development"> 
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> 
    <link rel="stylesheet" href="~/css/site.css" /> 
</environment> 
<environment names="Staging,Production"> 
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" 
      asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" 
      asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> 
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> 
</environment> 
@Html.ApplicationInsightsJavaScript(TelemetryConfiguration) 
</head> 
<body> 

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a asp-area="" asp-controller="core" asp-action="Index" class="navbar-brand">core</a> 
     </div> 
     <div class="navbar-collapse collapse"> 

     </div> 
    </div> 
</div> 
<div class="container body-content"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>&copy; 2017 - core Inc. - core</p> 
    </footer> 
</div> 

<environment names="Development"> 
    <script src="~/lib/jquery/dist/jquery.js"></script> 
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="~/js/site.js" asp-append-version="true"></script> 
</environment> 
<environment names="Staging,Production"> 
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" 
      asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
      asp-fallback-test="window.jQuery"> 
    </script> 
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js" 
      asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" 
      asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"> 
    </script> 
    <script src="~/js/site.min.js" asp-append-version="true"></script> 
</environment> 

@RenderSection("scripts", required: false) 
</body> 
</html> 

ボディーでは、これはロゴを頭の下に置きます。

<body> 
<a href="@Url.Action("Index", "core")" class="navbar-brand"> 
    <img src="~/images/core.png" title="core" alt="additional title" /> 
</a>  
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     . 
     . 
     . 

enter image description here

+0

CSSを使用してページの左上隅に配置します。マージンやCSSの絶対位置と相対位置を使用してアイコンを配置することができます。浮動小数点も役立ちます。いくつかのコードを投稿できる場合に役立ちます。 – user2330678

+0

完全な 'HTML'を共有できますか?または少なくともヘッダー部分? –

+0

セクションには追加しません。これは、ブラウザだけが気にするメタ情報用です。画像内の黒いバーがどのような要素であっても、タグの内側を見たいと思うでしょう。デベロッパーツールを使用して、要素が不明な場合にそれがどれであるかを調べます。 – JakeParis

答えて

0

私はmyself.Itが<div class="navbar navbar-inverse navbar-fixed-top">

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <a href="@Url.Action("Index", "core")" class="navbar-brand"> 
     <img src="~/images/core.png" title="core" alt="" /> 
    </a> 
    <div class="container">   
     <div class="navbar-header"> 

enter image description here

0

試してみるの内側に行く必要がそれを考え出した: 位置:相対 トップ:(ここで追加画素数)

別のオプションは、 ポジションを使用することです:絶対とロゴの場所を変更する、私にプライベートメッセージを送るかもしれないし、あなたのサイトへのより多くのコード/直接リンクでより多くを手伝ってくれるでしょう

関連する問題