CODEWITHSUNDEEP
csshtml
bebbi
bebbi

Reputation: 2539

simplify css for nested divs

I have a DOM like this:

<div class='container'>
  <div class='visual'>
    indent indicator
  </div>
  <div class='nomove'>
    text in this class is always left-aligned
  </div>
  <div class='container'>
    <div class='visual'>
      indent indicator
    </div>
    <div class='nomove'>
      text in this class is always left-aligned
    </div>
    <!-- more container nesting possible -->
  </div>
</div>

The CSS is

.container .visual {
    margin-left:20px;
}
.container .container .visual {
    margin-left:40px;
}
.container .container .container .visual {
    margin-left:60px;
}

which has to be done for every depth level and is of course silly.

Here's a jsfiddle (Updated: more structure, more lines of text)

Is there a simpler solution that maintains the tree-like HTML and has the same effect?

Upvotes: 2

Views: 34730

Answers (4)

S&#233;bastien Garmier
S&#233;bastien Garmier

Reputation: 1263

This code works fine:

<html>
<head>
<style type="text/css">
    .container {
        margin-left: 20px;  
    }

    .nomove {
        position:absolute;
        left: 0px;
    width: 100px;
    }

    .dummie {
        color:transparent;
        width: 100px;
    }
}
</style>
</head>
<body>
<div class="container">
    <div class="visual">indent indicator</div>
    <div class="nomove">text in this class is always left-aligned</div>
    <div class="dummie">text in this class is always left-aligned</div>
    <div class='container'>
        <div class='visual'>indent indicator</div>
        <div class='nomove'>text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
        <div class="dummie">text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
    </div>
</div>
</body>
</html>

The .nomove div is moved with position:absolute and left:0px to the left side. The dummie div makes a gap between two divs, because position:absolute has no height.

PS: Sorry for my english ;)

EDIT:

Now the dummie and the nomove div have the same text, the same width, but the dummie is transparent.

Upvotes: 0

xpy
xpy

Reputation: 5621

I know this is not a very elegant solution:

.container{
    padding:20px 0 0 20px;
}

.nomove {
    position:absolute;
    left:10px;
}

DEMO

Upvotes: 2

Andrew
Andrew

Reputation: 1880

You can do it like this: http://jsfiddle.net/TMAXa/3/

Which is taking on from what @KevinBowersox said. but you dont need to use as much HTML code if you have an increment on the CSS.

<div class='visual1'>
    indent indicator
</div>
<div class='nomove'>
    text in this class is always left-aligned
</div>

<div class='visual2'>
    indent indicator
</div>
<div class='nomove'>
    text in this class is always left-aligned
</div>

<div class='visual3'>
    indent indicator
</div>
<div class='nomove'>
    text in this class is always left-aligned
</div>

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

You could remove some of the container classes and simply rely on three visual classes.

HTML

<div>
  <div class='visual1'>
    indent indicator
  </div>
  <div class='nomove'>
    text in this class is always left-aligned
  </div>
  <div>
    <div class='visual2'>
      indent indicator
    </div>
    <div class='nomove'>
      text in this class is always left-aligned
    </div>
    <div>
      <div class='visual3'>
        indent indicator
      </div>
      <div class='nomove'>
        text in this class is always left-aligned
      </div>
      <!-- more nested containers possible -->
    </div>
  </div>
</div>

CSS

.visual1 {
    margin-left:20px;
}
.visual2 {
    margin-left:40px;
}
.visual3 {
    margin-left:60px;
}

Upvotes: 0

Related Questions