WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 10.06.2020 12:32:55

bbs2
Member

Class-Eigenart in CSS

Hallo,

ich finde keine Erklärung für folgende CSS-Eigenart

Klassendefinition in der css-file:

. logo {
width: 25%;
height: auto;
float: left;
position: relative;
background-size: contain;
max-height: 16em;
}

in der Index.php
<img class="logo" src="<?php echo TEMPLATE_DIR;?>/img/LogoBBSII.jpg">

Sobald ich bei ". logo" in der CSS-Datei das Leerzeichen hinter dem Punkt entferne. funktioniert die Klasse nicht mehr.
Bei allen anderen Styles habe ich kein Leerzeichen hinter dem Punkt, so wie es sein soll. Dort
funktioniert es aber.

Eigentlich kein Problem, ich lasse einfach das Leerzeichen hinter dem Punkt und alles funktioniert wunderbar.
Aber wo ist die Erklärung. Vielleicht ist es von allgemeinem Interesse.

Viele Grüße
Heinz

Offline

#2 10.06.2020 13:06:12

florian
Administrator

Re: Class-Eigenart in CSS

Durch den (syntaktisch falschen) Leerschritt zwischen Punkt und Klassenname logo wird die CSS-Definition ignoriert. D.h. es ist genauso, wie wenn in der index.php <img class="heuteistmittwoch" src="<?php echo TEMPLATE_DIR;?>/img/LogoBBSII.jpg"> stünde.
Wir der Leerschritt rausgenommen, wird die Klasse angewendet, und dann gibt es den Darstellungsfehler durch die Anweisungen

float: left;
position: relative;

Wenn Du diese Zeilen (Z. 176f. im Stylesheet) rausnimmst, tritt der Darstellungsfehler nicht mehr auf.

Offline

#3 10.06.2020 13:14:25

bbs2
Member

Re: Class-Eigenart in CSS

Hallo,

das war es. Sorry für meine CSS-Fehler, die bei mir zu einem falschen Schluss geführt haben.

Danke
Heinz

Offline

#4 10.06.2020 13:28:29

florian
Administrator

Re: Class-Eigenart in CSS

Du brauchst Dich nicht dafür zu entschuldigen, und es gibt ja in der Tat Fälle, wo ein Leerschritt oder kein Leerschritt einen Unterschied machen (.foo.bar ist etwas anderes als .foo .bar).
Ich habe das übrigens mit Hilfe der Browserkonsole herausgefunden, die ist wirklich ganz hilfreich in solchen Fällen. Da lassen sich direkt im CSS Änderungen simulieren und man sieht sofort, was diese bewirken.

Offline

Board footer

Powered by FluxBB

up