CSS фон компилируется из 5 частей изображения, размер к тексту - PullRequest
Новая
       3

CSS фон компилируется из 5 частей изображения, размер к тексту

1 голос
/ 01 апреля 2011

В настоящее время я работаю над заголовком в Joomla с фоном, состоящим из 5 частей изображений. Должно выглядеть так (просто пример ASCII)

{=<Text>=--------}

который разбивается на

  1. Слева ({=<)
  2. Заголовок (Фон для текста)
  3. Заголовок справа (>=-)
  4. Средний (-)
  5. Справа (-})

Надеюсь, вы, ребята, можете это визуализировать. Теперь необходимо повторить заголовок и середину x, но я хочу, чтобы заголовок соответствовал размеру текста, предположительно фону для текстового элемента div. Я не могу получить правильную комбинацию div и css, чтобы сделать это правильно. Прямо сейчас я заключаю div в div для каждой части до текста. После текста они просто переходят на следующую строку. display: inline тоже мало чем может помочь. Думаю, я не очень хорош в CSS.

Заранее спасибо.

ПРИМЕЧАНИЕ. Я не могу прикрепить экран печати, так как изображения защищены авторским правом.

РЕДАКТИРОВАТЬ: Средняя часть должна расширяться так, чтобы правая часть достигла конца, в основном занимая всю ширину.

|<-----------------------------Full Width of DIV------------------------------->| {=<Short Text>=------------------------------------------------------------------} {=<Much Longer Text>=------------------------------------------------------------} {=<Much Much Much Longer Text>=--------------------------------------------------}

Благодаря Bazzz я нашел способ сделать это.

Поскольку значение Middle, установленное на width: 100%, достигнет правого конца, так что единственный способ немного отступить - использовать более короткую обертку. Затем поместите правую часть после обертки.

HTML 

<div id="Header">
    <div id="Wrapper">
        <span id="Left">&nbsp;</span>
        <h1 id="Title">Title text</h1>
        <span id="Title-Right">&nbsp;</span>
        <span id="Mid">&nbsp;</span>
    </div>
    <span id="Right">&nbsp;</span>
</div>

CSS 

#Header span, #Header h1 {
    display: inline-block;
    white-space:nowrap;
    overflow: hidden;
    width: 570px;
}
#Wrapper span, #Header h1 {
    display: inline-block;
    white-space:nowrap;//Don't wrap into 2nd line
    overflow: hidden;//This help with the 100% width setting
    width: 550px;//Header width - "Right" width
}
#Left {
    width: 20px;
    background: blue;
}
#Title {
    background: yellow;
}
#Title-Right {
    width: 20px;
    background: grey;
#Mid {
    width: 100%; //Maximize this
    background: green;
}
#Right {
    width: 20px;
    background: red;
}

1 Ответ

1 голос
/ 01 апреля 2011

Вот моя попытка создать то, что вы просили, посмотреть, соответствует ли это вашему требованию:

http://jsfiddle.net/47Aej/

Вы, очевидно, можете заменить background: blue;, background:red; и т. Д.с вашими изображениями.также не стесняйтесь изменять «Текст заголовка», чтобы видеть, что желтая часть будет иметь размер в соответствии с текстом (это то же самое h1 в конце).

HTML 

<div id="Header">
<span id="Left">&nbsp;</span><h1 id="Title">Title text</h1><span id="Mid">&nbsp;</span><span id="Right">&nbsp;</span>
</div>

CSS

#Header span, #Header h1 {
    display: inline-block;
}
#Left {
    width: 20px;
    background: blue;
}
#Title {
    background: yellow;
}
#Mid {
    width: 60px;
    background: green;
}
#Right {
    width: 20px;
    background: red;
}
...