ovokuro ovokuro - 14 days ago 5
HTML Question

Can I use CSS to change this HTML structure?

I have a very rigid html structure which is displaying a gallery of images. Images are grouped alphabetically.

Demo: http://codepen.io/sol_b/pen/aBpbxz

HTML for each panel:

<div class="item">
<h2>A</h2>
<div class="image">
<img src="image.jpg">
</div>
</div>


What I'd like to do is separate each alphabetical group.

Like this: http://codepen.io/sol_b/pen/LbxVRr

Unfortunately I can't alter the HTML, only CSS (or JavaScript if that's necessary).

I've tried positioning, floats, widths. What makes it more difficult is that each item gets a heading, whether it displays content or not.

Is this even possible with CSS?

One thing I considered was adding a
<br>
tag before each heading that has content. Example:

var breakTag = document.createElement('br');
var element = document.getElementsByTagName('h2');

if(element.innerHTML == ""){
element.insertBefore(breakTag);
}


However I would need to target before the item, and not before the
h2
, which I'm not sure how to do.

Any help much appreciated.

Answer

var breakTag = document.createElement('br'),
    elems = document.getElementsByTagName('h2'),
    parentDiv = document.getElementsByClassName('content')[0];

for (var i = 0; i < elems.length; i++) {
  if (elems[i].innerText !== '') {
    parentDiv.insertBefore(breakTag.cloneNode(true), elems[i].parentNode);
  }
}
.wrapper {
  width: 800px;
  margin: 0 auto;
}

h2 {
  font-size: 16px;
  font-family: sans-serif;
}

br {
  display: block;
  content: "";
}

.item {
  display: inline-block;
  width: 33%;
  position: relative;
}

.image {
  width: 240px;
  height: 120px;
  position: relative;
}

.name {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  text-align: center;
  background-color: #1a1a1a;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  transition: 0.1s ease-in-out;
  width: 240px;
  height: 120px;
  display: table;
  box-sizing: border-box;
  padding: 20px;
}

.name:hover {
  opacity: 1;
}

.name span {
  display: table-cell;
  vertical-align: middle;
  cursor: default;
  font-family: sans-serif;
  letter-spacing: 3px;
}
<div class="wrapper">
  <div class="content">
    <div class="item">
      <h2>A</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2>B</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2>C</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2>D</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

  </div>
</div>

Comments