Databases
StackOverflow2013
Postsdbo
POCSS background compile from 5 part images, size to text
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS background compile from 5 part images, size to text
    text
    copied!<p>I'm currently working on a heading in joomla with background formed from 5 parts of images. Should look like this (just an ASCII example)</p> <p><code>{=&lt;Text&gt;=--------}</code></p> <p>which is split into </p> <ol> <li>Left (<code>{=&lt;</code>)</li> <li>Title (Background for the text)</li> <li>Title-Right (<code>&gt;=-</code>)</li> <li>Middle (<code>-</code>)</li> <li>Right (<code>-}</code>)</li> </ol> <p>Hope you guys can visualize this. Now, Title and Middle need to be repeated x, but I want Title to size according to the text, supposedly background for the text's div. I can't seems to get the right combination of div and css to do it correctly. Right now I wrap div in div for each part until the text. After the text, they just goes to the next line. <code>display: inline</code> can't help much also. Guess I'm not so good with CSS after all.</p> <p>Thanks in advance.</p> <p>NOTE: I can't attach print screen as the images are copyrighted.</p> <p>EDIT: the Middle part has to expand so that the Right part hits the end, basically occupying the whole width.</p> <p><code> |&lt;-----------------------------Full Width of DIV-------------------------------&gt;| {=&lt;Short Text&gt;=------------------------------------------------------------------} {=&lt;Much Longer Text&gt;=------------------------------------------------------------} {=&lt;Much Much Much Longer Text&gt;=--------------------------------------------------} </code></p> <p>Thanks to Bazzz, I've found a way to do it.</p> <p>Since Middle when set to <code>width: 100%</code> will reach the right end, so the only way to pull back a little is by using a shorter wrapper. Then place the "Right" part after the wrapper.</p> <p>HTML</p> <pre><code>&lt;div id="Header"&gt; &lt;div id="Wrapper"&gt; &lt;span id="Left"&gt;&amp;nbsp;&lt;/span&gt; &lt;h1 id="Title"&gt;Title text&lt;/h1&gt; &lt;span id="Title-Right"&gt;&amp;nbsp;&lt;/span&gt; &lt;span id="Mid"&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;span id="Right"&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>#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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload