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="https://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%
}