CSS for placeholder box (design-time WYSIWYG) - html

Question

This is a "silly" but hopefully legitimate if not particularly needful challenge, one that can be reused everywhere by designers, I'm sure, if an answer can be had.
I'm using a WYSIWYG-ish editor (MS Expression Web 4) and am trying to produce HTML-based wireframes which I intend to be the base for actual production. With raw/clean HTML being the #1 objective, I'd like to have a pattern for placeholders whereby I might specify the following HTML (and nothing else, except height, width, and text will vary), which should appear as a rectangular box with an 'X' through it and the text (in this case "logo") appearing at the bottom, or in the middle with white background behind the text:
<div class="placeholder" style="width: 200px; height: 50px;">Logo</div>
My question is what is the CSS and the minimum amount of HTML mucking (e.g. img tag) that is required to achieve what I want? For example, if the following HTML is used instead:
<div class="placeholder">
<img src="placeholder-xbox.png" width="200" height="200"/>
Logo
</div>
or
<div class="placeholder">
Logo
<img src="placeholder-xbox.png" width="200" height="200"/>
</div>
This would be an acceptable compromise on the HTML side, but then what would be the CSS to make this work?
I know I can use jQuery to hijack clean HTML to generate mucky HTML to achieve what I'm trying to do, but I need this at design-time.
This fake screenshot below is what I'm looking for. I want to drop a tiny snippet of clean HTML and possibly use the anchor points in the WYSIWYG interface to scale the placeholder, while the label stays in the center-bottom or center-middle.
I have an image that is white with a black X through it.
I'm highly doubtful that CSS will support what I want without mucking up the HTML. However, I'd like to see if anyone knows if it's doable. Here's what I started with, which of course didn't work because the background image won't scale, the text won't vertically align, etc., etc.
.placeholder {
display: inline;
background-image: url('placeholder-xbox.png');
border: 2px solid black;
vertical-align: bottom;
}
So now I have to figure out what compromises to make. I hate mucking up the HTML and don't mind mucked up CSS because a CSS class is reusable.

Answer 1

When I want placeholders like that, I tend to just do something like:
<div id="logo">logo</div> and #logo{ background:#ccc; border:1px solid red }.
So, it would look like this for you:
<div class="placeholder" style="width: 200px; height: 50px">
Logo
</div>
.placeholder {
background: #ccc;
border: 1px solid red;
text-align: center
}
It takes extra markup to get the text at the bottom:
<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%
}
Live Demo
Having just wrote all that, I realised how easy it is to modify it into the creation you described; try this:
Live Demo
<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%
}

Answer 2

To make the X change aspect with the placeholder (as in your screenshot) I would do something like
<div class="placeholder">
<img src="placeholder-xbox.png" />
</div>
with
.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;
}