1

divの上に、背景色、ボックスシャドウ、および境界線のあるボタンがあります。ボタンには境界線の半径のコーナーがあり、上部のdivの背景色やその他のスタイルが透けて見えます。

説明する最も簡単な方法は、このjsfiddleです。

http://jsfiddle.net/wCppN/1/

HTML：

<div class="journal-content-article">
    <div class="button">
        Hello Button
    </div>
</div>

<div class="journal-content-article">
    Normal article with white background.
</div>

CSS：

.journal-content-article {
    background-color: white;
    border: 1px solid black;
    box-shadow: 5px 5px 5px darkgrey;
}

.button {
    border-radius: 20px;
    background-color: green;
}

'通常の記事'divをそのままにしておきたいのですが、'ボタン'から白い背景、黒い境界線、ボックスシャドウを削除することができます。

これはLiferayWebコンテンツを介して行われているため、HTMLの変更を行うことができるものに制限されています。div'journal-content-article'内のHTMLのみを変更でき、そのdivまたは親divにクラスを追加することはできません。

また、ユーザー（CSS / HTMLの経験がない）が入力する必要があるため、「通常の記事」のdivコンテンツを変更することはできません。

これを達成する方法についてのアイデアはありますか、それとも私はJavascriptを使用することを余儀なくされていますか？

ありがとう！

4

3 に答える 3

1

多分これ：

http://jsfiddle.net/wCppN/7/

<div class="journal-content-article">
    <div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
    <div class="myClass">Normal article with white background.</div>
</div>

.journal-content-article {
    margin: 20px 20px;
    width: 150px;
}
.myClass {
    background-color: white;
    border: 1px solid black;
    box-shadow: 5px 5px 5px darkgrey;
}
于 2013-02-21T07:18:23.400 に答える
0

fredsbendが提案するようなことをするか、div自体を編集することなしに、.journal-content-articleのスタイルをオーバーライドすることはできないと思います。次のように、白い背景を効果的にオーバーライドできます。

div class="journal-content-article">
   <div class="journal-content-inside">
    <div class="button">
        Hello Button
    </div>
    </div>
</div>

.journal-content-inside {
    background-color: black;
    margin: 0 auto;
    padding: 0;
    width: 150px;
    overflow: hidden;
    border: none;
 }

ただし、境界線とボックスシャドウの問題は修正されません。javascriptやdivの外で編集する他の手段がなくても、それらが本当に修正可能かどうかはわかりません。

于 2013-02-21T07:22:52.110 に答える
0

他の誰かを助けるかもしれない1つの方法は、ボタンに負のマージンを設定することです:

.button {
    margin: -10px;
}

http://jsfiddle.net/wCppN/11/

これにより、ボタンが境界線と影よりも大きくなり、overflow: hiddenオフにすると問題が隠蔽されます。

ただし、ボタンが必要以上に大きくなるという欠点があります。一部のデザインでは問題ないかもしれませんが、ボックス/カラム構造があり、わずか -2 ピクセルの余白は、私がこれを使用するにはあまりにもずれているように見えます (私は完璧主義者です)!

それは他の誰かを助けるかもしれません！

于 2013-02-22T05:14:03.700 に答える