0

ロゴの左端で<div id="green_bar">オーバーラップして停止するにはどうすればよいですか? <div id="top_header">画面幅拡大時に緑のバーが左に拡大するようにしたいのですが、ロゴの左端で止めてほしいです。

試着position: absolute;しまし#green_barたが、画面全体に 100% 拡大されます。

JSFiddle: http://jsfiddle.net/hfgQt/14/

HTML:

<div id="header_bar"></div><!-- Grey line on top -->
        <div id="top_header"><!-- begin top header -->
        <div id="green_bar"></div>
        <div class="wrap">
            <div id="logo">
                <a><h1>info</h1></a>
            </div>
        </div>
        </div><!-- end top header -->​

CSS

.wrap {
    margin:0px auto;
    width:960px;
}

#header_bar {
    background-color: #424243;
    height: 25px;
}

#top_header {
    padding:0px 0px;
    background-color:#24303d;
    background-image:url("http://i.imgur.com/kGjGG.png");
    border-bottom:1px solid rgba(0,0,0,.4);
    overflow:hidden;
}


#green_bar {
    display: block;
    height: 10px;
    width: 100%;
    background-color: green;
}

#logo {
    float:left;
    clear:both;
}

#logo h1 {
    margin:0px; 
    padding:0px;
    background:url(../images/logo.png) no-repeat;
    text-indent:-9999px;
    width:258px;
    height:56px;
}
​
4

1 に答える 1

2

以下のスニペットを試してください。

あなたの問題を理解しているので、トリックは（ブラウザの幅 - 960px）の半分のものを取得することです。それが左余白の量です。追加のラッパー div を使用して、固定幅を切り出しました (960px のはずですが、jsfiddle で適切に見えるように 480px に変更しました)。position: absolute流れから外すことです。次に、内側の div ( #green_bar) を単純にwidth: 50%、両方のマージンを合わせた幅の半分 (左マージンのみの幅) に切り詰める必要があります。

あなたが何を望んでいるかを理解するのは難しいので、間違ったことをしたかもしれません。さらにサポートが必要な場合はお知らせください。

header {
    padding-bottom:5px;
    margin-bottom:35px;
    background:#ffdf85;
    border-bottom:1px solid #d4d4d4;
    background-color:#ffdf85;
}

.wrap {
    margin:0px auto;
    width:480px;
    background: rgba(128, 128, 0, .5);
    overflow: hidden;
}

#header_bar {
    background-color: #424243;
    height: 25px;
}

#top_header {
    padding:0px 0px;
    background-color:#24303d;
    background-image:url("http://i.imgur.com/kGjGG.png") no-repeat;
    border-bottom:1px solid rgba(0,0,0,.4);
    overflow:hidden;
    position: relative;
}


#green_bar_wrapper {
    position: absolute;
    padding-right: 480px;
    left: 0;
    right: 0;
    top: 0;
}
#green_bar {
    width: 50%;
    height: 10px;
    background-color: green;
}

/*    3.0.0 Logo
----------------------------------------*/

#logo {
    float:left;
    clear:both;
}

#logo h1 {
    margin:0px; 
    padding:0px;
    background:url(http://i.imgur.com/kGjGG.png) no-repeat;
    width:258px;
    height:56px;
}

#logo h1 span {
    text-indent: -9999px;
}
<header><!-- BEGIN HEADER -->
<div id="header_bar"></div><!-- Grey line on top -->
        <div id="top_header"><!-- begin top header -->
        <div id="green_bar_wrapper"><div id="green_bar"></div></div>
        <div class="wrap">
            <div id="logo">
                <h1><a><span>info</span></a></h1>
            </div>
        </div>
</div><!-- end top header -->
</header><!-- END HEADER -->

于 2012-11-09T02:22:58.520 に答える