Die Bilder im Inhaltsbereich

Worum geht es

Es geht um die Anordnung der Bilder im Inhaltsbereich. Hierfür haben wir drei Beispiele angelegt. Einmal ist das Bild links platziert und der Text fließt rechts herum, ein anderes Mal ist das Bild rechts platziert und der Text fließt links herum. Als drittes steht dann ein Bild mittig ohne Textfluß.

Allgemeine Einstellungen

Wesentliche allgemeine CSS-Einstellungen.

Max-with auf dem 'img' beschränkt die Breite der Bilder. Diese Bilder sind dann maximal so gross wie die Original-Abmessungen des Bildes bzw. des umgebenen Containers und skalieren responsive.
img {max-width: 100%;
height: auto;
margin:0 auto;
}


Hier ist das Border-Box-Modell eingeschaltet, d.h. padding und border werden in die Box hinein gerechnet und nicht oben drauf addiert.
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


BILDSYSTEM

Die Technik mit 'float':

1. Da dieses Template 'mobile-first' angelegt ist, stehen die Bilder zunächst mit 'float:none' ohne umgebenen Textfluss da.
CSS
/* bild steht links, text fliesst rechts herum */

.content  .box-text-re {float:none;
padding:0;
width: 100%;
margin:0 auto;
margin-bottom:3rem;
margin-top:3rem;
}

/* bild steht rechts, text fliesst links herum */

.content .box-text-li {float:none;
padding:0;
width: 100%;
margin:0 auto;
margin-bottom:3rem;
margin-top:3rem;
}

/* bild steht in der mitte ohne text */

.content .box-mi {
padding:0;
width: 100%;
margin:0 auto;
margin-bottom:3rem;
margin-top:3rem;
}


2. Mit den Bildschirmabfragen (Media Queries) setzen wir nun die Breakpoints. Wie immer sind diese Breakpoints nicht festgesetzt und können verändert und erweitert werden. Die Bilder bekommen für die Breakpoints andere Breiten in Prozent und mit 'float:left' sowie 'float:right' einen umgebenen Textfluß. Es kommt auch ein Blocksatz für den Text (text-align:justify) hinzu.
CSS
@media (min-width: 480px) {

.content  .box-text-re {
width: 70%; }

.content .box-text-li{
width: 70%; }

.content .box-mi{
width: 70%; }
}

@media (min-width: 768px) {
.content  .box-text-re {width: 30%;
float:left;
text-align:justify;
margin-right:2rem;
margin-bottom:1rem;
margin-top:1rem;
}

.content .box-text-li {width: 30%;
float:right;
text-align:justify;
margin-left:2rem;
margin-bottom:1rem;
margin-top:1rem;
}

.content .box-mi{
width: 50%; }

}

@media (min-width: 1024px) {
.content  .box-text-re {
margin-right:3rem;
margin-bottom:2rem;
margin-top:2rem;
}

.content .box-text-li{
margin-left:3rem;
margin-bottom:2rem;
margin-top:2rem;
}

}



3. So sieht der HTML-Code für die jeweiligen Boxen aus.
HTML
<div class="box-text-re">
<img  src="images/picture01.jpg" width="800" height="530">
</div>

<div class="box-text-li">
<img  src="images/picture01.jpg" width="800" height="530">
</div>

<div class="box-mi">
<img  src="images/picture01.jpg" width="800" height="530">
</div>

 

Die Schrift

Webfonts

In diesem Template werden Google Webfonts verwendet. Diese sind ja kostenlos und beliebt. Es sind die Schriften 'ROBOTO Light' und 'OPEN SANS Light', welche direkt im Template integriert sind und somit auch ohne Internet-Verbindung angezeigt werden. Die Schriften haben wir über das HTML Link-Element eingebunden.
HTML
<link rel="stylesheet" href="css/font-roboto-light.css" type="text/css">
<link rel="stylesheet" href="css/font-open-sans-light.css" type="text/css">
Wenn Sie diese Schriften nicht verwenden wollen bzw. sich für andere Schriften entscheiden, so nehmen Sie einfach den Link-Verweis aus der HTML-Seite heraus, damit die Schriften nicht geladen werden.

 

Icons

Wir verwenden Font-Icons

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Tipps zu den Font-Icons

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen. Der nachfolgende Link zum Anbieter zeigt weitere Infos sowie auch eine Übersicht aller Icons: fontawesome

Allgemeiner Hinweis dazu: Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.

Als Beispiel:      

 

Bilder

Hinweis: Die Fotos in dieser Vorlage sind von https://picjumbo.com/ . Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Kontakt

  • Fa. Michael, Mustermann & Sohn
  • 12345 Frankenburg
  • Am schönen Großmarkt 18

  • Phone: (0000) 2468246
  • Mobile : (+49) 0000-1234567
  • infokontaktmustersohn@mail.de
©2025 | Start A New Project