Databases
StackOverflow2013
Postsdbo
POhtml + CSS: Make position relative some other element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhtml + CSS: Make position relative some other element?
    text
    copied!<p>I'm building a tree using lists in lists the ordinary way. Now, what I would like to do is to have an extra label that is absolute (horizontally) to the start of the outermost tree.</p> <p>The effect I'm trying to achieve is the below, where the farLeft are labels on each li (see similar html below):</p> <p><img src="https://i.stack.imgur.com/k0Yw3.png" alt="Tree"></p> <p>I can easily do this, but my css will be unclean, to say the least, something along the lines of:</p> <pre><code>/* each indentaion level is 20 px to teh right, so I need to offset */ ol.topLevel li label.farLeft { position absolute; left=-218px; ...} ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...} ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...} </code></pre> <p>A usage could be like the below, but with more nesting levels:</p> <pre><code>&lt;ol class="topLevel"&gt; &lt;li&gt; &lt;label&gt;Some niceLabel&lt;/label&gt; &lt;label class="farLeft"&gt;Far left text&lt;/label&gt; &lt;/li&gt; &lt;ol&gt; &lt;li&gt; &lt;label&gt;Some niceLabel&lt;/label&gt; &lt;label class="farLeft"&gt;Far left text&lt;/label&gt; &lt;/li&gt; &lt;/ol&gt; &lt;/ol&gt; </code></pre> <p>The above sucks in many ways, notably I have to change value in plenty of places if I move something, and I have to make one line per indention level.</p> <p>Is there a better way to solve this, perhaps make my 'left' being the left of my top level tree, or some other good html mechanism.</p> <p>It might be the time to mention I'm a total css newbie, so I might easily have missed somethnig completely obvious.</p>
 

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