CSS для поля заполнителя (время разработки WYSIWYG) - PullRequest
Новая
       6

CSS для поля заполнителя (время разработки WYSIWYG)

4 голосов
/ 22 января 2011

Это «глупая», но, надеюсь, законная, если не особенно нужная задача, которую, я уверен, могут использовать дизайнеры повсеместно.

Я используюРедактор WYSIWYG (MS Expression Web 4), и я пытаюсь создать каркас на основе HTML, который я намерен использовать в качестве основы для реального производства.Поскольку необработанный / чистый HTML является целью № 1, я хотел бы иметь шаблон для заполнителей, в котором я мог бы указать следующий 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 для масштабирования заполнителя, в то время как метка остается по центру внизу или по центру.goal

У меня есть изображение белого цвета с черным X через него.placeholder image

Я очень сомневаюсь, что CSS будет поддерживать то, что я хочу, не портя HTML.Тем не менее, я хотел бы посмотреть, если кто-нибудь знает, выполнимо ли это.Вот то, с чего я начал, что, конечно, не сработало, потому что фоновое изображение не будет масштабироваться, текст не будет выровнен по вертикали и т. Д. И т. Д. 

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

Так что теперь я должен вычислитьчто компромиссы сделать.Я ненавижу испортить HTML и не против испортить CSS, потому что класс CSS можно использовать повторно.

Ответы [ 2 ]

2 голосов
/ 22 января 2011

Когда мне нужны такие заполнители, я обычно делаю что-то вроде:

<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%
}

Live Demo

Только что написав все это, я понял, как легко превратить его в описанное вами творение;попробуйте это:

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%
}
0 голосов
/ 22 января 2011

Чтобы 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;
}
...