Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Thanks for the prompt responses. I'll try out what you are suggesting.</p> <p>I'm currently trying to do this using a list, although I also got nowhere with divs.</p> <p>I've tried pulling some HTML of my JSPs in order to try and demonstrate where I'm up to with this.</p> <p>The spans have a class of "navigation" which basically draws a background image around the text to make it look like a button, as well as setting margins/paddings/etc. I've omitted the CSS which is directly related to the button drawing, since this is standard framework stuff in our system to draw a button. I have included the CSS which I'm using which is directly related to the workflow.</p> <p>I'm trying to draw a starting image before the first button and then draw background images behind each button in order to draw a line between each button to represent the flow. I've then got an ending image at the end of the flow.</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;STYLE&gt; #nav, #nav ul { list-style: none; margin: 0px; width: 700px; } #nav li { list-style: none; float: left; padding-left: 10px; padding-right: 10px; width: auto; background-image: url(/lookandfeel/images/navMenuDiv.gif); background-repeat: repeat-x; } li#ending { background-image: url(/lookandfeel/images/navMenuRight.gif); background-repeat: no-repeat; } li#start { background-image: url(/lookandfeel/images/navMenuLeft.gif); background-repeat: no-repeat; } .navigation a { background-image: url(/pdr/images/navigation.gif); } &lt;/STYLE&gt; &lt;ul id="nav" style="width: 100%;border: 1px solid"&gt; &lt;li id="start" /&gt; &lt;LI &gt; &lt;SPAN class="navigation" &gt;AAAAAAAAAA&lt;/SPAN&gt; &lt;/li&gt; &lt;LI &gt; &lt;SPAN class=navigation &gt;BBBB&lt;/SPAN&gt; &lt;/li&gt; &lt;LI &gt; &lt;SPAN class=navigation&gt;CCCCCCCCCCCCCCCCC&lt;/SPAN&gt; &lt;/li&gt; &lt;LI&gt; &lt;SPAN class=navigation&gt;DDDDDDDDD&lt;/SPAN&gt; &lt;/li&gt; &lt;LI&gt; &lt;SPAN class=navigation&gt;EEEEEEEE&lt;/SPAN&gt; &lt;/li&gt; &lt;LI&gt; &lt;SPAN class=navigation&gt;FFFFFFFFFFFFFF&lt;/SPAN&gt; &lt;/li&gt; &lt;li&gt; &lt;SPAN class=navigation&gt;GGGGGGGGGGGGGGGGGGGGGGGGGGGGG&lt;/SPAN &lt;/LI&gt; &lt;li id="ending" /&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </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