4

このレイアウトは事実上Web上のいたるところにありますが、それがどのように機能するかについての情報を提供している人はいないようです。コンテンツを中央に配置し、背景をページの全幅に拡張する必要があります。例http://www.fuerstlaw.com/（青色のbgカラーが全幅に拡張）。これはCSSを使用してどのように行われますか？とてもシンプルな感じですが、理解できません。

少なくともサイトhttp://gsringolaw.com/homeのテストページへのこのリンクでヘッダーを機能させようとしているので、これが私のコードです。

body {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}

#masthead {
    min-width: 100%;
    margin: 0px;
    padding: 0px;
    background-position: 0px 0px;
    background-color: #00304F;
    position: relative;
    z-index: 0;
}
#headertext {
    position: relative;
    width: 250px;
    height: 82px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    font-size: large;
    top: -41px;
    left: 704px;
}
#glow {
    height: 170px;
    background-image: url('images/glow.png');
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    top: -192px;
    left: -13px;
    width: 973px;
}


#logo {
    position: relative;
    background-image: url('images/gayleringo.png');
    background-repeat: no-repeat;
    width: 528px;
    height: 113px;
    top: 28px;
    left: 0px;
}

<div id="wrapper">
<div id="masthead" style="height: 171px">
    <div id="logo">
    </div>
    <div id="headertext" class="auto-style1">
        Louisiana: 504-975-0180<br />
        <br />
        Florida: 850-292-7059</div>
    <div id="glow">
    </div>
</div>
<div id="top_nav">
</div>
<div id="container">
    <div id="right_col">
    </div>
    <div id="page_content">
    </div>
</div>
<div id="footer">
</div>
</div>
4

8 に答える 8

4

これを実現するには、ラッパーとコンテンツを保持する実際のdivが必要です。

<div id="wrapper">
    <div id="content">
        Content
    </div>
</div>

次に、背景をに設定し、#wrapperとwidthをmargin: 0 auto指定し#contentて中央に配置します。

#wrapper {
    background: red;
}
#content {
    width: 960px;
    margin: 0 auto;
}

外側のdivは、そのためdisplay: block、ページ幅の100％まで拡張されます。次に、内側のdivが固定幅で中央に配置されます。したがって、実際には、背景はコンテンツ自体からではなく、ラッパーからのものです。

私がやりたいのは、内側のdivにクラスを与えてから、.inside必要なdivに適用することです。例えば：

<div id="header">
    <div class="inside">
        Header
    </div>
</div>
<div id="main">
    <div class="inside">
        Main content
    </div>
</div>
<div id="footer">
    <div class="inside">
        Footer
    </div>
</div>

ここで例を見ることができます：http：//codepen.io/joe/pen/bxueF

于 2013-01-06T04:17:54.980 に答える
2

divの外に別の要素を追加#wrapperし、それに割り当てますbackground-color。

 <div id="full-width">
    <div id="wrapper">
       <div id="masthead" style="height: 171px">
          <div id="logo">
       </div>
          <div id="headertext" class="auto-style1">
             Louisiana: 504-975-0180
         <br>
         <br>
             Florida: 850-292-7059
          </div>
          <div id="glow">
          </div>
        </div>
     </div>
 </div>


 #full-width {
    width: 100%;
    background: #00304F;
 }
于 2013-01-06T02:30:02.867 に答える
0

例として使用しているページでは、背景画像を使用しています。ページの[要素の検査]を右クリックしてから[本文]を見ると、次のスタイルがカスケードされていることがわかります。

body {
  ...,
  background-image: url(images/bg-body.gif);
  background-repeat: repeat-x;
  background-position: 0px 181px;
}
于 2013-01-06T02:29:16.970 に答える
0

マストヘッドのどちらかが

width:auto

ラッパーの外側にあります

またはラッパーとマスタヘッドが持っています

width:auto
于 2013-01-06T02:29:50.883 に答える
0

あなたは試すことができます。

            <div id="wrapper">
              <div id="banner">
                <div id="banner-inside">
                   <div id="content">content</div>
                </div>
              </div>
            </div>

           //css
           #wrapper{
             width:100%;
           }
           #banner{
             width:100%;
             background-color:blue;
           }
           #banner-inside{
             width:980px;
             margin:0 auto;
           }
           #content{ position:relative; top:0;}
于 2013-01-06T02:32:36.210 に答える
0 
#content{
    width: 960px; //tells the div to be exactly 960px wide
    margin: 0 auto; //tells the content to be centered with 0 px to surrounding object
    background-color: red;
}

#background{
    width: 100%; //tells the outer div to be 100% of screen width
    background-color: blue;
}

背景と呼ばれるものの中にあるIDコンテンツを持つ2つのdivを作成します。

于 2013-01-06T02:33:22.320 に答える
0

DIVあなたは100％の幅を持つためにあなたの色を必要とするでしょう。このDIV場所の中に、残りDIVの要素とその他の要素/グラフィックのセットwidthとmarginがあり0 autoます。

#masthead {
min-width: 100%;
margin: 0px;
padding: 0px;
background-position: 0px 0px;
background-color: #00304F;
position: relative;
z-index: 0;
}

#divInsideIt {
width:800px;
margin: 0 auto;
}
于 2013-01-06T02:34:15.440 に答える
0 
    body {height:100%;font-size:12px;}

body, body > section, body > header {width: 100%;margin:0; padding:0;}

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

header {
  background: #1234ff;
  margin-bottom:3em;}

header .container {
  background: #123456;
  padding: 0 1em;
  *zoom: 1;/* clear floats fix - fix for IE*/}
header .container:after { /* clear floats fix */
  content: ""; display: table;   clear: both; }
/* Logo */
header h1, header h1 a {
  background: url('/images/logo.png') no-repeat; /*set the url of your image and make sure it does repeat*/
  height:60px; /*set this to the height of your logo*/
  width: 175px; /*set this to the width of your logo*/}

/*Now we want to float the logo and the phone number sections so that the appear on the left and right*/
header h1  {float:left;}
header aside {float:right;}
/*make logo clickable, must set anchor to same size as its parent*/
header h1 a {
  display: block;}

header aside {
  background: #123456;
  color:white;
  padding:.5em 1em;
  text-align:right;}

header p {font-size:2em;line-height: .75em;}

html

<body id="wrapper">
  <header>
     <div class="container">
       <!--use css to add image to h1--->
        <h1><a title="company name" rel="bookmark"></a></h1>
       <aside>
         <p>Louisiana: <a>504-975-0180</a></p>
         <p>Louisiana: <a>504-975-0180</a></p>
       </aside>
    </div>
  </header>
  <section>
    <div class="container" id="content">
      <p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </section>

</body>
于 2013-01-06T03:16:30.327 に答える