-1

誰かが私を助けてくれることを願っています！themeforest のこのワードプレス テンプレートで見られる望ましい効果を達成しようとしています ( http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 -- 右下にスクロールします)。

基本的に、ピクセル ディバイダーをページ全体に繰り返し配置し、左側にテキストを埋め込みます。私は非常に多くの異なる CSS コードと html を試しました...簡単なことのはずですが、取得できないようです。

この効果を達成するために私が得た最も近いものは、その下にテキストがある水平方向の仕切りです...

////////////////////////////

TEXT(中央揃え)

しかし、私はしたいです

文章 ///////////////////////////

これが私のコードです！

div.divider17a {
height:5px; width:100%; border:0; background:url(images/divider17.png) repeat-x;
margin:35px 0 25px;
padding:0;
text-align:left;
float:left;
width:100%;
}
div.divider_notext {
margin:50px 0 20px;
}
div.divider_left1 {
text-align:left;
}

HTML

<div class="divider17a divider_left1"><h3>Strategic Planning</h3></div>

どんな助けでも大歓迎です...ありがとう= D

4

3 に答える 3

1

とにかく彼らが使用するのと同じスタイリングを使用していない理由はありますか?

<h3 class="widget-heading separator-heading">
    <span class="text-holder">Companies that trust us</span>
</h3>

.separator-heading {
    background-image: url(../img/separator-heading-diagonal.png);
    background-repeat: repeat-x;
    background-position: 0 50%;
}

.separator-heading .text-holder {
    display: inline-block;
    padding: 0 .6em 0 0;
    background-color: white;
}
于 2013-03-11T14:32:19.567 に答える
0

テキストを使用する必要がある場合は、次の CSS スタイルを使用できます。

.divider17a h3:after{
    content:"//////////////////////////////////////";
    overflow:hidden;
}

コンテナに以下を追加します。

div.divider17a{
    overflow:hidden;
    white-space:nowrap;
}

デモ: http://jsfiddle.net/kyBaN/1/

または、背景画像を使用します。

于 2013-03-11T14:33:18.747 に答える
0

あなたのページとそれに続くコードへのリンクを提供できますか? また、彼らのコードを見ると、これは彼らがしていることです:

.separator-heading, hr.diagonal {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;

}

于 2013-03-11T14:33:31.300 に答える