Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Grundlagen Abstände

Großzügige Abstände sorgen für eine luftige Anmutung.

Verwendung

Abstand normal
 Zur Trennung von Abschnitten mit unterschiedlichem Inhalt, z.B. Einleitungstext und Downloads

Abstand klein
 Bei zusammengehörenden Inhalten oder Inhalten vom selben Typ, z.B. 2 Kontaktboxen untereinander

Kein Abstand
 Gestalterisches Element um bei Elementen mit Hintergrundbildern oder Verlauf einen fließenden Übergang oder eine harte Kante zu schaffen.

Trennlinie ohne Abstand
 Die Trennlinie ist Teil des Inhaltselements und besitzt selbst wieder einen kleinen Abstand nach oben und unten. Optisch entspricht dies wieder einem normalen Abstand.

Letztes Element
 Besitzt einen normalen Abstand zum Footer.

Vorschau

HTML

                
                  <div class="contentelement gap_normal">
  <img src="/img/dummy/1920x500_margin_normal.png"/>
</div>
<div class="contentelement gap_small">
  <img src="/img/dummy/1920x500_margin_small.png"/>
</div>
<div class="contentelement">
  <img src="/img/dummy/1920x500_margin_none.png"/>
</div>
<div class="contentelement separator_line">
  <img src="/img/dummy/1920x500_margin_none_border.png"/>
</div>
<div class="contentelement gap_normal">
  <img src="/img/dummy/1920x500_margin_normal_last.png"/>
</div>

CSS

              @charset "UTF-8";
.contentelement img {
  width: 100%;
  height: auto;
}
.contentelement.gap_normal {
  margin-bottom: 87px;
}
@media screen and (max-width: 991px) {
  .contentelement.gap_normal {
    margin-bottom: 87px;
  }
}
@media screen and (max-width: 767px) {
  .contentelement.gap_normal {
    margin-bottom: 60px;
  }
}
.contentelement.gap_small {
  margin-bottom: 43px;
}
@media screen and (max-width: 991px) {
  .contentelement.gap_small {
    margin-bottom: 43px;
  }
}
@media screen and (max-width: 767px) {
  .contentelement.gap_small {
    margin-bottom: 30px;
  }
}
.contentelement.separator_line:after {
  display: block;
  content: '';
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(215, 215, 215, 0)), color-stop(5%, #d7d7d7), color-stop(95%, #d7d7d7), color-stop(100%, rgba(215, 215, 215, 0)));
  background-image: -moz-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: -webkit-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: linear-gradient(to right, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-size: 100%;
  height: 1px;
  width: 100%;
  margin-bottom: 50px;
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  .contentelement.separator_line:after {
    margin-top: 25px;
    margin-bottom: 25px;
  }
}
.contentelement:last-child {
  margin-bottom: 0;
}

SCSS

              @import "../general/_general";

.contentelement {
  img {
    width:100%;
    height:auto;
  }

  &.gap_normal {
    @include ce-gap-bottom;
  }

  &.gap_small {
    @include ce-gap-bottom-small;
  }

  &.separator_line {
    &:after {
      display:block;
      content:'';
      @include ce-separator;
    }
  }

  &:last-child {
    margin-bottom:0;
  }
}