1

コンテンツと同じ幅のリボンを配置しようとしていますが、側面が本体に「こぼれます」。例はこちら。これは私が今まで持っていたHTMLです。リボンの中央部分と 2 つの側面の 3 つの画像があります。中央部分を h1 に配置し、現在は側面を揃えようとしています。

<body>

  <div id="container">

   <div id="leftside">
   </div>

   <div id="rightside">
   </div>


   <div id="content">

      <header>
          <h1>This is the body of the ribbon</h1>
      </header>
   </div>
</div>

</body>

CSSでの私のショット。私は実験してきましたが、これは必要なことを行いますが、より良い解決策が100万あると確信しています. ここで多くのルールに違反していると確信しているので、これに対するベストプラクティスが何であるかを知りたいです。

#container {
    width: 825px;
    min-height: 960px;
    margin: 0 auto;
}

#left {
     background-image: url(side.jpg);
     background-repeat: no-repeat;
     width: 59px;
     height: 48px;
     position: absolute;
     margin-top: 20px;
     margin-left: -58px;

 }

#right {
    background-image: url(side.jpg);
    background-repeat: no-repeat;
    width: 59px;
    height: 48px;
    position: absolute;
    margin-top: 20px;
    margin-left: 825px;
}

#content {
    width: 825px;
    min-height: 700px;
    margin: 0 auto;
    background: url(other.jpg) repeat;
    margin-top: 20px;
    margin-bottom: 20px;
    top:0;
    overflow: auto;
}

h1 {
    text-indent: -9999px;
    background-image: url(banner.jpg);
    background-repeat: repeat-x;
    margin-top: 0;
    height: 48px;
}
4

3 に答える 3

2

これを達成する方法は間違いなく無数にあります。最適なアプローチは、サイトの進行状況によって大きく異なります。

つまり、相対位置と絶対位置です。

これを実現する 1 つの方法は、サイトを次のように構成することです。

<body>
    <div id="header">
        <div id="ribboncenter"></div>
        <div id="ribbon1"></div>
        <div id="ribbon2"></div>
    </div>

    <div id="content">
        Your content
    </div>

    <div id="footer">
        Your footer
    </div>
</body>

これは、典型的なサイトにとって非常に緩いフレームワークです。CSS は次のようになります。

#header{
    width:800px; //Subjective to however big you want your site
    margin:0 auto; //Positions the header in the center
    position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
    position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
    width:50px; //Subjective to whatever the width of your "ribbon" is
    top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
    width:100%; //Sets width to the width of #header
    background:url(ribboncenter.png); //Subjective to image
#ribbon1{
    left:-50px; //Subjective to the width of the image, moves it 50px left of #header
    background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
    right:-50px; //Subjective to the width of the image, movesit 50px right of #header
    background:url(my-ribbon2.png); //Subjective to whatever your image is
}

これが例ですhttp://jsfiddle.net/NZ8EN/

これはすべて非常に大雑把ですが、進むべき方向についてのアイデアが得られることを願っています。

これを解決する他の方法も間違いなくあります。

于 2013-10-23T18:03:19.893 に答える
0

#rightand を#left divsの中に入れてみて、 of#content divを与え#contentて(それが子andの親参照になるように)、 andを絶対に配置してみてください:positionrelative#left#right#left#right

HTML:

<body>
    <div id="container">
      <div id="content">
            <div id="leftside"></div>
            <div id="rightside"></div>
          <header>
              <h1>This is the body of the ribbon</h1>
          </header>
       </div>
    </div>
</body>

CSS:

#left {
    position: absolute;
    top: 0;
    left: -59px;
}
#right {
    position: absolute;
    top: 0;
    right: 59px;
}
于 2013-10-23T18:05:18.207 に答える
0

あなたがIE7をサポートしていない限り、私はおそらく次のようなものに行きます：

http://jsfiddle.net/G5jkt/

これは、追加する必要がある CSS です。

h1 {
    position: relative;
}

h1:before {
    content: '';
    height: 100%;
    left: -59px;
    top: 0;
    position: absolute;
    background-image: url(side.jpg);
    background-repeat: no-repeat;
    width: 59px;
}

h1:after {
    content: '';
    width: 59px;
    height: 100%;
    background-image: url(side.jpg);
    background-repeat: no-repeat;
    right: -59px;
    top: 0;
    position: absolute;
}

そして、次のように HTML を変更する必要があります。

<div id="container">
  <div id="content">
    <header>
      <h1>Hello Here</h1>
    </header>
  <div>
</div>

:before と :after を使用すると、ドキュメントからデザイン固有の HTML を削除し、作業を完了できます。

重要なのは、絶対配置を使用することです。あなたの例では、ページの上部にリボンの端があります。位置を基にしようとしている H1 とは関係がありません。

これを行う最も簡単な方法は、このリボンを担当する HTML を H1 内にドロップすることです。ただし、これは意味的に最適とは言えません。リボンの端と H1 の周りにラッパーを追加できますが、それは余分なマークアップです。

:after と :before を使用すると、H1 は相対的な位置にあるため親として使用し、疑似 :before 要素と :after 要素をその H1 に対して絶対的に配置します。疑似要素が高さ、背景色などを継承できるようになったため、これは理想的です。

于 2013-10-23T18:31:35.110 に答える