ヘッダーに画像を保存

-1

私はこの問題を解決しようとすると時間を過ごし、そしてどこにもなっていませんでした:(

私は、ヘッダーの左側に、画像（p）は、ヘッダ内に固定されるように取得しようとしています。主な問題は、私は、ヘッダー内の画像を維持するために管理することはできませんです。

すべてのヘルプははるかに高く評価される。

CSS

.wallpaperlogo{ 
background-image: url('../images/p'); 
position: absolue; 
width: 100px; 
height:100px; 
padding: 5px; 
margin: 0; 
} 

.wallpaper img{ 
height: 100%; 
width: 100%; 

}

HTML

<body> 
<div class="background"> 
    <div class="header"> 
     <div class="wallpaperlogo"> 
    <div class="menu"> 
     <ul class="nav"> 
      <li id="nav-products"><a href="#">Products</a></li> 
      <li id="nav-contact"><a href="#">Contact</a></li> 
      <li id="nav-about"><a href="#">About</a></li> 
     </ul> 
    </div> 
</div>

EDIT

私はそれが今、ヘッダ内にとどまるんだと思うが、私はそれが消えずにサイズを変更できないようです。ヘッダーの左隅にどのようにサイズを変更する必要があるのか不思議です。

Here's what's happening

CSS

.header { 
border-bottom: 1px solid #CCC; 
width: 100%; 
height: 80px; 
position: relative; 
overflow: hidden; 
} 

.wallpaperlogo { 
background-image: url('../images/p'); 
position: absolute; 
height: 100%; 
width: 100%; 

}

出典

2017-10-01 SubZeroFish

'position：fixed;' try –

絶対位置決め位置項目絶対相対最も近い位置する祖先です。だからあなたはあなたの要素の位置の別の1つを設定する必要があります：これが動作するためには相対的です。

私はあなたが達成しようとしているものを正確に描写するのに苦労していますが、ヘッダーをposition：relativeに設定すると、.wallpaperlogoで設定した絶対的な位置付けが機能します。

PS - HTML5は今、あなたのようなタグを使用することができますし、代わりにその名前であなたのdivのid /クラスを与える:)

Here's a linkポジショニングのW3Schoolの説明に。

出典

2017-10-01 20:05:11 Ashley

お返事ありがとうございます。私は相対的にヘッダーの位置を変更し、wallpaperlogoで絶対位置を追加しました。何らかの理由で、テキストがヘッダーの左側に移動します。私はさらに見ていきます。 – SubZeroFish

さて、私はそれを修正しました。最大の高さと幅を使ってヘッダーの内側に配置しようとしています。 – SubZeroFish

イメージを左側に移動したい場合は、背景イメージとして設定する代わりに、タグを使用してイメージを含めることができます。私はあなたの質問に答えるかどうか分からない - 私はあなたがここで達成しようとしていることを完全に理解しているとは思わない。その場合、navリンクを保持するdivを開く前にこのイメージを保持するdivも閉じます。 – Ashley

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wallpaperlogo{ 
 
background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/0a/Ulan_Spiral_2000x2000.png'); 
 
width: 100px; 
 
height:100px; 
 
padding: 5px; 
 
margin: 0px; 
 
/*position:absolute;*/ 
 
/*position:fixed; /* to fix the header at the left top then */ 
 
position:fixed; 
 
} 
 

 

 
.wallpaperlogo img{ 
 
height: 100%; 
 
width: 100%; 
 

 
}

<body> 
 
<div class="background"> 
 
    <div class="header"> 
 
     <div class="wallpaperlogo"> 
 
    <div class="menu"> 
 
     <ul class="nav"> 
 
      <li id="nav-products"><a href="#">Products</a></li> 
 
      <li id="nav-contact"><a href="#">Contact</a></li> 
 
      <li id="nav-about"><a href="#">About</a></li> 
 
     </ul> 
 
    </div> 
 
    
 
</div> 
 
<br><br><br> 
 
<br><br><br> 
 

 
<p> 
 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 

 

 
</p>

注：

あなたが側に左側上部にヘッダーを修正するためにposition:fixed;を使用しすることができ、ヘッダ
あなたをスクロールしたい場合は、その後position:absolute;を使用
* { margin: 0; padding: 0; }これを使うデフォルトのパディングとマージンをブラウザのデフォルト設定から削除することができます。

出典

2017-10-01 20:10:54

答えて

関連する問題