header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14 headerimage1 headerimage2 headerimage3 headerimage4 headerimage5 headerimage6
Sie sind hier: Startseite > Templates > klr-3col-flex > logo.css
Letzte Bearbeitung:

logo.css

Siehe auch dort.

In dieser Datei werden die Einstellungen für das Website-Logo und den Motto-Text der Website festgelegt.

Festlegung der Logografik (jpg, png, gif, ...):
background: url(images/name-der-grafikdatei.gif) no-repeat;

Angabe der Abmessungen der Grafik:
height: 94px;
width: 480px;

Die Höhe des Bereichs für Logo und Motto-Text wird durch die hier festgelegte Grafikhöhe bestimmt. Wenn man den Motto-Text (eingegeben in der CMS-Textvariablen Text1 [EINSTELLUNGEN ⇒ SPRACH-DATEI ⇒ Formularbereich TEMPLATE ⇒ Feld Text1]), wie auf dieser Seite, zweizeilig gestaltet (entweder durch Textlänge oder <br> im Text) sollte die Logo-Höhe > 90 Pixel betragen. Bei einzeiligem, kurzem Motto-Text kann die Grafik auch niedriger sein.

Damit bei schmäleren Bildschirmen / Fenstern die Grafik keinen zu breiten Teil des Headers in Anspruch nimmt, wird sie begrenzt auf 45%:
max-width: 45%;

Damit der Motto-Text bei schmalen Bildschirmen / Fenstern nicht in die Grafik hineinfließt muss er auf den Rest der Header-Breite begrenzt werden:
max-width: calc(52vw - 40px);
100% - 45% (Grafik) - 3% (Sicherheitsabstand) = 52%
52% - 2 * 20px (Randabstand) = max-width

Wenn man also eine schmale Grafik verwendet, dann kann man den Platz für den Motto-Text vergrößern. Die Summe der beiden Prozentwerte (hier 45 und 52) sollte nicht größer als 97 sein.

Bei der Schriftgrößen - Festlegung kann man mit der minimalen und maximalen Schriftgröße 'spielen', je nachdem wie lang der Motto-Text ist. Die hier verwendete Berechnung ist auf einigen Webseiten im Netz beschrieben worden, z. B. hier: https://www.mediaevent.de/css-fluid-font-size/

Hier im Bespiel ist die minimale Schriftgröße 11px und die maximale 36px.
font-size: calc(11px + (36 - 11) * ((100vw - 480px) / (1920 - 480)));
font-size: 36px;

Dateiname: templates/krl-3col-flex/logo.css

/* krl-3col-flex-V1 - last update 02.08.2021 */

/* Layout - Logo */
#logo a {
background: url(images/krl-software-develepment480x94-transparent.gif) no-repeat;
background-size: 99%;
height: 94px;
width: 480px;
max-width: 45%;
float: left;
margin: 10px 20px 10px;
text-decoration: none;
border: none;
}
#logoTxt {
position: absolute;
top: 10px;
right: 20px;
max-width: calc(52vw - 40px);
font-size: calc(11px + (36 - 11) * ((100vw - 480px) / (1920 - 480)));
font-weight: bold;
line-height: 120%;
text-align: right;
border: none;
}
@media only screen and (min-width : 1920px) {
#logoTxt {
font-size: 36px;
}
}
/* Layout - Logo-Ende */

| Seitenanfang | |  - - - By CrazyStat - - -

Please activate JavaScript in your browser.

» Sitemap