Bilder: float:left funktioniert nicht, float:right schon

[webeditor]

Hallo,

ich stehe vor einem etwas merkwürdigen (für mich jedenfalls) Problem:

CSS:

/* Bilder formatieren*/

article img {
	border : 1px solid Gray;
	border-radius: .2em;
	max-width: 100%;
	height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto }
	padding: 0;
}

.li {
	float : left;
	margin : .5em 1em .5em 0;	
}

.re {
	float : right;
	margin : .5em 0 .5em 1em;
}

.clear{
	clear : both;
}

article a img{
	display: inline;
}

Damit möchte ich erreichen:

• Bilder im Inhaltsbereich grundsätzlich zentriert
• außer: sie werden in die .li oder .re-Klasse gesteckt, dann sollen sie umlaufen werden
• Bilder innerhalb eines Links sollen inline angezeigt werden (z. B. pdf-Icon in einem Dokumenten-Link).

Ich möchte möglichst wenig mit CSS-Klassen im Inhalt selbst arbeiten - die Texte (incl. der bzw. möglichst vieler Bildlinks) werden in Markdown erstellt und mit HUGO in HTML-Seiten umgesetzt.

und wenn ich dann notiere:

<img class="re" src="/bilder/bild1.jpg" alt="">
<h3>Kapitel 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<br class="clear">

<img class="li" src="/bilder/bild2.jpg" alt="">
<h3>Kapitel2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<br class="clear">

dann floated das .re-Bild an den rechten Rand, aber das .li-Bild bildet einen 100%-Block und liegt selbst in der Mitte zentriert. Was läuft da falsch?

Grüße -B-

[webeditor]

kleine Ergänzung:

wenn ich display: none ergänze:

.li {
	display: none;
	float : left;
	margin : .5em 1em .5em 0;	
}
.re {
	display: none;
	float : right;
	margin : .5em 0 .5em 1em;
}

dann verschwindet das (korrekt floatende) rechte Bild, das .li bleibt stur als Block in der Mitte sichtbar ...

display: inline führt zu gar nix.

[Matthias Apsel]

Hallo webeditor,

wenn ich display: none ergänze:

.li {
	display: none;
	float : left;
	margin : .5em 1em .5em 0;	
}
.re {
	display: none;
	float : right;
	margin : .5em 0 .5em 1em;
}

dann verschwindet das (korrekt floatende) rechte Bild, das .li bleibt stur als Block in der Mitte sichtbar ...

Das kann zweierlei bedeuten: Entweder, deine Klasse (Es gibt keine CSS-Klassen) heißt nicht "li" oder deine Deklarationen werden von spezifischeren Regeln überschrieben.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

kleine Ergänzung:

damit ist klar, dass dein Syntaxfehler dazu führt, dass dein CSS die Klasse .li nicht mag. Schau dir mal in deinem ersten Posting an, was der Syntaxhighlighter rot färbt.

Gruß
Kalk

[Linuchs]

Deine Angaben sind merkwürdig.

Im CSS hast du article, im HTML aber nicht.

das .li-Bild bildet einen 100%-Block und liegt selbst in der Mitte zentriert.

100% hat links und rechts keinen Rand, was soll "zentriert" bedeuten?

Nach deinen Angaben schließe ich, dass das Bild zu groß ist, um Platz für Text zu lassen. Begrenze es doch testweise auf 50% vom Elter-Element.

[webeditor]

noch zur Vollständigkeit:

1. das HTML ist ein Ausschnitt, article umschließt "ganz außen herum" den Bereich, in dem der Ausschnitt liegt.
2. Das Bild selbst ist schmal (20% der möglichen Breite) und wird als Blockelement mittenzentriert angezeigt. Der Inspektor im Firefox hat mir angezeigt, daß es in einem Block liegt, der selbst 100% der Seitenbreite einnimmt.

Aber das ist ja auch klar aufgrund des Syntax-Fehlers im CSS-Block darüber - was ja auch die schlußendliche Lösung war - siehe unten.

[MrMurphy1]

Hallo

Was passiert wenn du das CSS korrekt schreibst. Also statt

    margin-left: auto;
    margin-right: auto }
	padding: 0;

besser

    margin-left: auto;
    margin-right: auto;
	padding: 0;

Gruss

MrMurphy

[webeditor]

DANKE!!! kaum macht man's richtig - schon geht's 😀