0

私は友人のためにかなりシンプルなウェブサイトをデザインしています。デザインでは、リボンがページの中央で横に伸びるようにしたいと考えています。

そのようです：

https://i.imgur.com/Hz4SH4Hh.png

これを行うための私の試みは、左右の「リボン」部分を切り取って、それらの画像を左右に浮かせながら表示することでした。次に、コンテンツ div を作成し、中央に配置してリボンの中央を埋めます。このソリューションは非常にずさんで、まったくうまくいきません。これがその写真です

https://i.imgur.com/66C2kj5h.png

解像度は少しずれていますが、中央の div の境界線が外れていることがわかります。ページを拡大または縮小すると、中央の div のパーセント幅が全体を台無しにします。

ここに私のHTML / CSSがあります

<div class='ribbon-container'>
    <div id='ribbon-left'>
    </div>
    <div id='ribbon-right'>
    </div> 
    <div class='clear'></div>
    <div id='ribbon-middle'>
    </br>
        <center>
            <span class='ribbon_header'>Food Around Your School</span>
        </center>
    </div>
</div>

.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid;  border-color:#61615f;top:0; margin:0 auto;}
4

3 に答える 3

0

一応設定してみる

.ribbon-middle{
    width: auto;
    padding: 0 120px;
}

ここで、リボンのパディングは左右の画像の幅です。そうすれば、テキストが常に表示されます。

于 2013-08-13T22:15:53.340 に答える
0

同じ単位ですべてのサイズを調整する必要があります。レスポンシブ デザインを使用する場合を除き、ピクセルのみを使用することをお勧めします。レスポンシブ デザインを使用する場合は、foundation.jsのようなものを使用することをお勧めします。

編集：Michael PetersonのSVGアイデアに+1。それもいいですね。

于 2013-08-13T22:09:34.780 に答える
0

バナーの高さは変わらないため、バナーの背景として水平方向に繰り返される画像を使用し、バナーの左右の部分に絶対配置を使用することで、これを実現できます。

html は次のようになります。

<div class='ribbon-container'>
    <div id='ribbon-left'></div>
    <div id='ribbon-right'></div>
</div>

css は次のようになります。

.ribbon-container {
    width: 100%;
    height: 120px;
    position: relative;
    background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 112px;
    height: 120px;
    background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 97px;
    height: 120px;
    background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}

あなたが投稿した最初の画像を使用して、非常に大雑把なモックアップを作成しました。問題は、画像自体が完全に水平ではないため、私のフィドルでは右側が揃っていないように見えますが、最初の画像を作成する際にもっと注意を払うと、これでうまくいきます。テキストを追加していませんが、これは絶対配置または別の方法を使用して行うことができます。

例はhttp://jsfiddle.net/M3GmY/にあります。

于 2013-08-13T22:42:51.507 に答える