5

これは「ばかげた」ものですが、特に必要ではないにしても正当なものであり、デザイナーがどこでも再利用できるものであると確信しています。

私はWYSIWYG風のエディター（MS Expression Web 4）を使用しており、実際の制作のベースとなるHTMLベースのワイヤーフレームを制作しようとしています。生/クリーンなHTMLが最大の目的であるため、プレースホルダーのパターンを作成して、次のHTMLを指定できるようにします（高さ、幅、テキスト以外は変更されます）。これは長方形で表示されます。 「X」が入ったボックスとテキスト（この場合は「ロゴ」）が下部、または中央に表示され、テキストの後ろに白い背景が表示されます。

<div class="placeholder" style="width: 200px; height: 50px;">Logo</div>

私の質問は、CSSと、私が望むものを達成するために必要なHTMLマッキング（例：imgタグ）の最小量は何ですか？たとえば、代わりに次のHTMLが使用されている場合：

<div class="placeholder">
    <img src="placeholder-xbox.png" width="200" height="200"/>
    Logo
</div>

また

<div class="placeholder">
    Logo
    <img src="placeholder-xbox.png" width="200" height="200"/>
</div>

これはHTML側では許容できる妥協案ですが、これを機能させるためのCSSは何でしょうか。

jQueryを使用してクリーンなHTMLをハイジャックし、やっかいなHTMLを生成して、自分がやろうとしていることを実現できることは知っていますが、これは設計時に必要です。

以下のこの偽のスクリーンショットは、私が探しているものです。クリーンなHTMLの小さなスニペットをドロップし、WYSIWYGインターフェイスのアンカーポイントを使用してプレースホルダーをスケーリングし、ラベルを中央下部または中央中央に配置したいと思います。 ゴール

黒のXが透けて見える白の画像があります。 プレースホルダー画像

CSSがHTMLを台無しにすることなく、私が望むものをサポートするかどうかは非常に疑わしいです。しかし、それが実行可能かどうか誰かが知っているかどうかを確認したいと思います。これが私が始めたものですが、背景画像が拡大縮小されない、テキストが垂直方向に整列しないなどの理由で、もちろん機能しませんでした。

.placeholder { 
 display: inline;
 background-image: url('placeholder-xbox.png');
 border: 2px solid black;
    vertical-align: bottom;
}

だから今、私はどのような妥協をするべきかを理解しなければなりません。私はHTMLをいじくりまわすのが嫌いで、CSSクラスは再利用可能であるため、CSSをいじくりまわしてもかまいません。

4

2 に答える 2

2

そのようなプレースホルダーが必要な場合、私は次のようなことをする傾向があります。

<div id="logo">logo</div>および#logo{ background:#ccc; border:1px solid red }。

したがって、次のようになります。

<div class="placeholder" style="width: 200px; height: 50px">
    Logo
</div>

.placeholder {
    background: #ccc;
    border: 1px solid red;
    text-align: center
}

下部のテキストを取得するには、追加のマークアップが必要です。

<div class="placeholder" style="width: 200px; height: 50px">
    <span>Logo</span>
</div>

.placeholder {
    background: #ccc;
    border: 1px solid red;
    text-align: center;
    position: relative
}
.placeholder span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}

ライブデモ

それをすべて書いたばかりで、あなたが説明した作品にそれを変更するのがいかに簡単であるかを実感しました。これを試して：

ライブデモ

<div class="placeholder" style="width: 200px; height: 50px">
    <img src="http://i.stack.imgur.com/yZlqh.png" />
    <span>Logo</span>
</div>

.placeholder {
    background: #ccc;
    border: 1px solid #000;
    text-align: center;
    position: relative;
    font-weight: bold
}
.placeholder span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}
.placeholder img {
    width: 100%;
    height: 100%
}
于 2011-01-22T01:06:26.297 に答える
0

（スクリーンショットのように）プレースホルダーを使用してXの変更アスペクトを作成するには、次のようにします。

<div class="placeholder">
    <img src="placeholder-xbox.png" />
</div>

と

.placeholder {  
    display: block;/* or display: inline-block; */
    width: 200px;
    height: 50px;
    background: url(logo.png) no-repeat center bottom;
}

.placeholder img {
    width: 100%;
    height: 100%;
    border: 2px solid black;
}
于 2011-01-22T01:09:48.090 に答える