Einbindung von Bild- und Textboxen auf Ihrer Startseite

Nachfolgend finden Sie einige Beispiele wie Sie die Boxen auf Ihrer Internetseite aufteilen und einbinden können.
Den jeweiligen Quelltext finden Sie direkt darunter.



Beispiel-Boxen

Mit der Klassenbezeichnung "breite2" können Sie auch den Platz von zwei Boxen z.B. für einen etwas längeren Text nutzen. Ebenso können Sie "breite3" verwenden.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Aktuelles

 
Beim Campus Festival Bielefeld feierten 2016 rund 18.500 Besucher.Foto: Patrick Piecha
 Publikationen
Foto: © Martina Mustermann

Entsprechend unseres Leitbilds erhöhen wir die Qualität der Angebote durch kontinuierliche Forschung im Feld der wissenschaftlichen Weiterbildung.

Student vor Geb?ude X
 Newsroom

Wir bieten Ihnen qualitativ hochwertige Angebote aus den unterschiedlichen thematischen Kompetenzbereichen der Universität Bielefeld an.

Code-Schnipsel - 3 Boxen pro Reihe (wie oben abgebildet)

 

<!-- Boxen -->
<div class="bild-boxen flexcontainer">

  <div class="boxen breite2">
    <h4>Den Platz von zwei Boxen nutzen</h4>
    <p><b>Mit der Klassenbezeichnung "breite2" können Sie auch den Platz von zwei Boxen z.B. für einen etwas längeren Text nutzen. Ebenso können Sie "breite3" verwenden.</b></p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>

  <div class="boxen scroll noborder" style="max-height: 230px;">
    <h4>Aktuelles</h4>
    So binden Sie RSS-Feeds in Ihre Seiten ein: <br>
    <a href="/kommunikation/internet/templates/feeds-einbinden.html" target="_blank">zur Anleitung</a>
  </div>

  <div class="boxen_trenner"> </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Dirk Ludewig moderiert die 112. Ausgabe von Campus TV" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=109564"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Veranstaltungskalender</span></div>
      </div>
    </a>
    <span class="copyright float-right">Foto: &copy; Max Mustermann</span>
    <ul>
      <li><a href="#">Seiten verlinken</a></li>
      <li><a href="#">Über eine Link-Liste</a></li>
      <li><a href="#">Ist ganz einfach</a></li>
    </ul>
  </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Beim Campus Festival Bielefeld feierten 2016 rund 18.500 Besucher.Foto: Patrick Piecha" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110344"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Publikationen</span></div>
      </div>
    </a>
    <span class="copyright float-right">Foto: &copy; Martina Mustermann</span>
    <p> Entsprechend unseres Leitbilds erhöhen wir die Qualität der Angebote durch kontinuierliche Forschung im Feld der wissenschaftlichen Weiterbildung. </p>
  </div>

  <div class="boxen noborder">
    <a href="#">
      <div class="box_bild">
        <img alt="Student vor Geb?ude X" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110104"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Newsroom</span></div>
      </div>
    </a>
    <p> Wir bieten Ihnen qualitativ hochwertige Angebote aus den unterschiedlichen thematischen Kompetenzbereichen der Universität Bielefeld an. </p>
  </div>

</div>

<div class="clear"></div>

<!-- Boxen Ende -->
Code-Schnipsel - 4 Boxen pro Reihe

Für Startseiten ohne die linke Menüspalte

 

<!-- Boxen -->
<div class="bild-boxen flexcontainer">

  <div class="boxen breite3">
    <h4> Den Platz von drei Boxen nutzen </h4>
    <p><b>Mit der Klassenbezeichnung "breite3" können Sie auch den Platz von zwei Boxen z.B. für einen etwas längeren Text nutzen. Ebenso können Sie "breite3" verwenden.</b></p>
    <p><insert file="/kommunikation/internet/lorem-ipsum.html" /></p>
  </div>

  <div class="boxen scroll noborder" style="max-height: 230px;">
    <h4>Aktuelles</h4>
    So binden Sie RSS-Feeds in Ihre Seiten ein: <br>
    <a href="/kommunikation/internet/templates/feeds-einbinden.html" target="_blank">zur Anleitung</a>
  </div>

  <div class="boxen_trenner"> </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Dirk Ludewig moderiert die 112. Ausgabe von Campus TV" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=109564"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Veranstaltungskalender</span></div>
      </div>
    </a>
    <ul>
      <li><a href="#">Seiten verlinken</a></li>
      <li><a href="#">Über eine Link-Liste</a></li>
      <li><a href="#">Ist ganz einfach</a></li>
    </ul>
  </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Beim Campus Festival Bielefeld feierten 2016 rund 18.500 Besucher.Foto: Patrick Piecha" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110344"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Publikationen</span></div>
      </div>
    </a>
    <p> Entsprechend unseres Leitbilds erhöhen wir die Qualität der Angebote durch kontinuierliche Forschung im Feld der wissenschaftlichen Weiterbildung. </p>
  </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Student vor Geb?ude X" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110104"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Newsroom</span></div>
      </div>
    </a>
    <p> Wir bieten Ihnen qualitativ hochwertige Angebote aus den unterschiedlichen thematischen Kompetenzbereichen der Universität Bielefeld an. </p>
  </div>

  <div class="boxen noborder">
    <a href="#">
      <div class="box_bild">
        <img alt="Dirk Ludewig moderiert die 112. Ausgabe von Campus TV" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=109564"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Veranstaltungskalender</span></div>
      </div>
    </a>
    <ul>
      <li><a href="#">Seiten verlinken</a></li>
      <li><a href="#">Über eine Link-Liste</a></li>
      <li><a href="#">Ist ganz einfach</a></li>
    </ul>
  </div>

</div>

<div class="clear"></div>

<!-- Boxen Ende -->


Boxen ohne Text (nur Bild mit Titel)

Code-Schnipsel - ohne Text (wie oben abgebildet)

 

<!-- Boxen -->
<div class="bild-boxen flexcontainer">

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Beim Campus Festival Bielefeld feierten 2016 rund 18.500 Besucher.Foto: Patrick Piecha" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110344"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Publikationen</span></div>
      </div>
    </a>
  </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Student vor Geb?ude X" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110104"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Newsroom</span></div>
      </div>
    </a>
  </div>

  <div class="boxen noborder">
    <a href="#">
      <div class="box_bild">
        <img alt="Dirk Ludewig moderiert die 112. Ausgabe von Campus TV" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=109564"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Veranstaltungskalender</span></div>
      </div>
    </a>
  </div>

  <div class="boxen_trenner"> </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Dirk Ludewig moderiert die 112. Ausgabe von Campus TV" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=109564"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Veranstaltungskalender</span></div>
      </div>
    </a>
  </div>

  <div class="boxen">
    <a href="#">
      <div class="box_bild">
        <img alt="Beim Campus Festival Bielefeld feierten 2016 rund 18.500 Besucher.Foto: Patrick Piecha" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110344"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Publikationen</span></div>
      </div>
    </a>
  </div>

  <div class="boxen noborder">
    <a href="#">
      <div class="box_bild">
        <img alt="Student vor Geb?ude X" src="http://ekvv.uni-bielefeld.de/bilddb/thumbnail?id=110104"/>
        <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Newsroom</span></div>
      </div>
    </a>
  </div>

</div>

<div class="clear"></div>

<!-- Boxen Ende -->




Zurück zur Style-Übersicht