html - レイアウトが設定されていません。メインdivの上にdivを配置する方法

Question

レイアウトを次のように設定したい

このようなものを設定する必要があると私が思ったこと

main divを意味し、main divの上に、他のdivがあります。私はこのようなものを使用しました

<div id="headerImage" >

        <div id="help_About">               
            <a href="#">Help</a>
            <a href="#">About</a>                                           
        </div>

        <div id="myLogout">               
            <input type="text" value="Basit" />
            <a href="#">Logout</a>                                                          
        </div>

        <div id="myImage">
            <img width="20" height="20" src="resources/images/tools_icon.png" /> 
        </div>

        <img src="resources/images/2b.jpg"/>

    </div>

    #headerImage{ 
        border-style :solid;
        border-width: thin;
        width: 100%;
        height: 20%;           
        background: url(${imgUrl}/2b.jpg) no-repeat top left;            
        padding: 0px;
        border-top: 0px;
        border-bottom: 5px #eeeeee solid;
        z-index: 1;
    }

    #headerImage #help_About{ 
        margin-left: 10%
        margin-top: 2%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

    #headerImage #myLogout{ 
        margin-left: 30%
        margin-top: 4%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

    #headerImage #myImage{ 
        margin-right: 10%
        margin-top: 4%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

境界線のスタイルと幅と高さを物理的な外観に指定しました。しかし、私はこのようなものを手に入れています

私が間違っていることは何ですか？divのレイアウトを設定するにはどうすればよいですか？

ありがとう

Answer 1

これを試してください-http://jsfiddle.net/SQwFK/

HTML

<header>
    <div id="left"></div>

    <div id="rightTop"></div>
    <div id="rightBottom"></div>
</header>

CSS

    header {
    background: url(http://lorempixel.com/600/300);
    height: 300px;
    width: 600px;
    position: relative;
}

#left {
    position: absolute;
    top: 100px;
    left: 50px;
    background: #ffe;
    height: 100px;
    width: 250px;
}

#rightTop, #rightBottom {
    position: absolute;
    right: 50px;
    top: 25px;
    background: #fef;
    height: 100px;
    width: 100px;
}

#rightBottom {
    top: 175px;
}

新しい編集------------------------------------------------ ----------------------------

働く

<div id="headerImage" >
....
</div>
<div id="menuBodyContainer" >
    <div id="menu">
    </div>
    <div id="myBody">
    </div>  
</div>

今、私はあなたのコードを次のように試しました

  #headerImage{ 
        position: absolute;
        border-style :solid;
        border-width: thin;
        width: 100%;
        height: 20%;           
        background: url(${imgUrl}/2b.jpg) no-repeat top left;            
        padding: 0px;
        border-top: 0px;
        border-bottom: 5px #eeeeee solid;
        z-index: 1;            
    }

    #headerImage #help_About{ 
        position: absolute;
        display: inline-block;
        top: 4%;
        left: 4%;
        opacity:0.4;
        z-index: 2;            
    }

    #headerImage #myLogout{ 
        position: absolute;
        display: inline-block;
        right: 50px;
        top: 25px;
        z-index: 2;           
    }

    #headerImage #myImage{
        position: absolute;
        top: 2%;
        right: 2%;
        z-index: 2;           
    }

これは機能しています。

しかし、私は今別の問題を抱えています。ご覧のとおり、を設定し#help_About and #myLogout {display:inline-block}ます。しかし#help_About、大きな正方形を作ります。また、白い四角が表示されないようにしたいです。div内の要素が実際に画像上にあるように見えます。#myLogoutについても同じです。表示をinlne-blockに設定しましたが、2つの異なる行に表示されています。次にインラインにしたいのですが、背景として白い四角が表示されています。どうすればいいですか？透明度を設定すると、divだけでなく要素を含むdiv全体の透明度が設定されます。tありがとう

それで ？

Answer 2

ウェーブイメージの背景を使用してヘッダーdivを作成する必要があります。次に、すべての内部コントロールを配置します。

html

<div id="header">
    <ul>
        <li><a href="#">Home</a><li>        
        <li><a href="#">Help</a><li>
    </ul>
    <a class="logo" href="#"></a>
    <a class="logout">Logout</a>
</div>​

css

body { font-family: Verdana; }
#header { height:100px; background: url('http://dl.dropbox.com/u/18372729/header-bg.png')}
#header ul { top:23px; left:270px; position:absolute; }
#header ul li { display:inline; }
#header ul li a { color:#fff; text-transform:uppercase; text-decoration:none; margin:20px; font-size:10pt; font-weight:bold; }
#header ul li a:hover { text-decoration:underline; }
#header .logo { position:absolute; top:20px; right:200px; background:url('http://dl.dropbox.com/u/18372729/logo.png'); width:217px; height:75px; display:block; position:absolute; }
#header .logout { font-size:9pt; float:right; margin-top:80px; margin-right:20px; }​

デモ： http： //jsfiddle.net/xsDQP/1/

Answer 3

あなたは絶対にあなたのdivを配置する必要があります。次に、top、left、right、またはbottomプロパティを使用して、divを必要な場所に配置します。

背景として設定した画像は画像タグでも使用されており、ヘッダー画像が2倍になる原因となる可能性があります。

アップデート

親div（あなたの場合#headerImage）をに設定するposition:relative;と、すべての子divを指定する必要がありますposition:absolute;