6

このようにトップにナビゲーションメニューがあるテーマを作りました。

width="100%" height="100"

左側の領域には、高さ 100px の顧客のロゴが含まれています。ただし、ロゴの側面を大きくしたいと考えています。たとえば、200px です。div のサイズを大きくしたくない代わりに、200px-200px で新しい div を作成し、その中にロゴを配置し、そのロゴ div をナビゲーション div の上に配置します。

このような独立した div を作成するにはどうすればよいですか?

4

4 に答える 4

5

これはあなたが意味するものですか？もちろん、スタイルは別の css で行う必要があります。htmlにはありません！

<div id="topnavigation" style = "height:100px;width:100px;position:relative;z-index:5;">
  <div id="logo" style="width:200px;height:200px; position:absolute;z-index:10; top:15px;left:15px;"> <img src ="logo.jpg" width="200px" height="200px"/> </div>
</div>
于 2012-07-13T09:05:34.027 に答える
4

ナビゲーション div 内に div を作成しますが、position:absolute; width:200px; height:200px; top:0; left:0;ナビゲーションの高さに影響を与えずにナビゲーションの左上に配置する必要があります。

代わりに、ナビゲーション要素が同じスタイルを使用する前にロゴを配置して、両方を同じページの場所から開始するように配置することもできます。

例：

#logo{
 position:absolute;
 top:0;
 left:0;
 width:200px;
 height:200px;
}


#navigation{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

<div id='logo'></div>
<div id='navigation'></div>

プロジェクト全体を見ることができないため、最善の解決策を見つけるために実験することをお勧めします。

それが役に立てば幸い。

于 2012-07-13T09:10:21.180 に答える
0

サンプルの jsfiddle を次に示します: http://jsfiddle.net/ZzaZp/

ここにコードをコピーします：

HTML:

<div class="navigation">
    <div class="logo">
        <img src="http://placekitten.com/200/200" />
    </div>
</div>

CSS:

.navigation{
    height:100px;
    background-color:#f3f3f3;
    position:relative;
}

.logo img{
    width:200px;
    height:200px;
    border:0px;
    display:block;
}

.logo{
    position:absolute;
    width:200px;
    height:200px;
    border:2px solid #eee;
    left:20px;
    top:20px;
}
于 2012-07-13T09:25:22.410 に答える