Search code examples
htmlcsstwitter-bootstrapposition

Struggling with text positioning in a div with a before class

It might be a bit odd, I worked on a diagram / chart, I managed to get everything displayed as wanted but in the legend at the bottom I can't center the text regarding to the squares, it would be also cool if you guys could quickly check if its all done OK.

CodePen: http://codepen.io/HendrikEng/pen/pNQKbp

CSS:

$main-color: #004284;
$main-light: #6FB9E8;
$main-dark: #008DE5;
$main-black: #041B15;
$main-grey: #BEBBBB;
$main-bg: #fff;

//arrows

.arrow {
  position: relative;
  background: $main-grey;
  width: 200px;
  height: 60px;
  padding-left: 30px;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: $main-black;
}

.arrow:after {
  border: solid transparent;
  content: " ";
  position: absolute;
  border-bottom-color: $main-bg;
  border-width: 30px;
  left: 0;
  top: 0;
  transform: rotate(90deg);
}

.arrow:before {
  border: solid transparent;
  content: " ";
  position: absolute;
  border-bottom-color: $main-grey;
  border-width: 30px;
  left: 200px;
  top: 0;
  transform: rotate(90deg);
}
// Square
.square:before {
   content: "";
   display: inline-block;
   width: 30px;
   height: 30px;
   margin-right: 10px;
}
.lone:before {
   background: $main-light ;
}
.ltwo:before {
   background: $main-dark ;
}
.lthree:before {
   background: $main-color ;
}
.square {
  color: $main-black;
}


// 5 columns
.col-md-15,
.col-md-20,
.col-md-40,
.col-md-50 {
    position: relative;
    min-height: 60px;
    margin: auto;
    padding: 10px;
    color: $main-bg;
}

.col-md-15 {
    width: 20%;
    float: left;
}

.col-md-20 {
    width: 40%;
    float: left;
}

.col-md-40 {
    width: 80%;
    float: left;
}

.col-md-50 {
    width: 100%;
    float: left;
}

.main,
.light,
.dark,
.white {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-right: 15px solid $main-bg;
  border-left: 15px solid $main-bg;
}

.main {
  background: $main-color
}

.light {
  background: $main-light
}

.dark {
  background: $main-dark
}

.white {
  background: $main-bg
}

.marging-bot {
    margin-bottom:10px;
}

HTML:

<div class="container">
  <div class="row marging-bot">
    <div class="col-md-15">
      <div class="arrow">Kundenanalyse</div>
    </div>
    <div class="col-md-15">
      <div class="arrow">Finanzierungs-<br>analyse</div>
    </div>
    <div class="col-md-15">
      <div class="arrow">Risikoanalyse</div>
    </div>
    <div class="col-md-15">
      <div class="arrow">Entscheidung/<br>Abschluss</div>
    </div>
    <div class="col-md-15">
      <div class="arrow">Bestand</div>
    </div>
  </div>
  <div class="row marging-bot">
    <div class="col-md-20 light">
      Modul 01
      <br> Finanzierungsstrukturen Baufinanzierung
    </div>
    <div class="col-md-15 light">
      Modul 07
      <br> Sicherheitenarten
    </div>
    <div class="col-md-15 dark">
      Modul 10
      <br> Darlehensvertrag
    </div>
    <div class="col-md-15 light">
      Modul 14
      <br> Bestandsgeschäft
    </div>
  </div>
  <div class="row marging-bot">
    <div class="col-md-15 light">
      Modul 02
      <br> Kreditkarten
    </div>
    <div class="col-md-15 dark">
      Modul 06
      <br> Scoring/Rating
    </div>
    <div class="col-md-15 light">
      Modul 08
      <br> Grundbuch
    </div>
    <div class="col-md-15 light">
      Modul 11
      <br> Legitimationsprüfung
    </div>
    <div class="col-md-15 main">
      Modul 15
      <br> Risikokredite
    </div>
  </div>
  <div class="row marging-bot">
    <div class="col-md-15 light">
      Modul 03
      <br> Bonitätsanalyse
    </div>
    <div class="col-md-15 white"></div>
    <div class="col-md-15 light">
      Modul 09
      <br> Objektwertermittlung
    </div>
    <div class="col-md-15 light">
      Modul 12
      <br> Valutierung
    </div>
    <div class="col-md-15 main">
      Modul 16
      <br> Sicherheitenverwertung
    </div>
  </div>
  <div class="row marging-bot">
    <div class="col-md-20 light">
      Modul 04
      <br> Erkennen von Negativmerkmalen
    </div>
    <div class="col-md-15 white"></div>
    <div class="col-md-15 light">
      Modul 13
      <br> Indeckungnahme
    </div>
    <div class="col-md-15 white"></div>
  </div>
  <div class="row marging-bot">
    <div class="col-md-40 light">
      Modul 05
      <br> Notwendige Unterlagen
    </div>
    <div class="col-md-15 white"></div>
  </div>
  <div class="row marging-bot">
    <div class="col-md-50 light">
      Zusatzmodul
      <br> Aktuelle Rechtsfragen (u.a. EU-Wohnimmobilienkreditrichtlinie)
    </div>
  </div>
  <div class="row marging-bot">
    <div class="col-md-5">
      <span class="square lone"></span> Inhaltliche Tiefe der Module ist nach Bedarf skalierbar
    </div>
    <div class="col-md-3">
      <span class="square ltwo"></span> Vermittlung Grundlagenwissen
    </div>
    <div class="col-md-3">
      <span class="square lthree">Spezial-Module</span>
    </div>
  </div>
</div>
Solution

  • Adding the following CSS for .square::before works:

    .square::before {
  margin-top: 10px;
  margin-bottom: -10px;
}

    Preview

    preview

    CodePen: http://codepen.io/anon/pen/YpRvey