CSS for a placeholder box (WYSIWYG design time)

Question

This is “stupid,” but, I hope, legal, if not a particularly necessary call, which can be used everywhere by designers, I’m sure that if the answer were received.

I am using the WYSIWYG-ish editor (MS Expression Web 4), and I am trying to create HTML-based wireframes that I intend to become the basis for actual production. Since source / pure HTML is goal # 1, I would like to have a placeholder template in which I could specify the following HTML ( , and nothing but height, width and text will change )., Which should look like a rectangular box with an “X” through it, and the text (in this case the “logo”) appears at the bottom or in the middle with a white background behind the text :

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

My question is what is CSS and the minimum number of HTML deletions (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 CSS be to make this work?

I know that I can use jQuery to capture pure HTML code to create mucky HTML to achieve what I'm trying to do, but I need it during development.

This fake screenshot below is what I'm looking for. I want to drop a tiny piece of pure HTML and possibly use anchor points in the WYSIWYG interface to scale the placeholder while the label remains in the center or bottom.

I have an image white with black X through it.

I highly doubt that CSS will support what I want without omitting HTML. However, I would like to know if anyone knows if this is managing. Here I started with the fact that, of course, did not work, because the background image will not scale, the text will not be aligned vertically, 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 trade-offs to make. I don’t like deleting HTML code, and I don’t mind CSS being confused because the CSS class can be reused.

Answer 1

When I want to fill in stuff like this, I usually do something like:

<div id="logo">logo</div> and #logo{ background:#ccc; border:1px solid red } #logo{ background:#ccc; border:1px solid red } .

So for you it will look like this:

 <div class="placeholder" style="width: 200px; height: 50px"> Logo </div> .placeholder { background: #ccc; border: 1px solid red; text-align: center } 

To get the text below, additional markup is required:

 <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

---

I just wrote all this, I realized how easy it is to change it into the creation you described; try the following:

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 change aspect of X using a placeholder (as in the 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; }