Bild in Akkordeon

[scherenschlag]

Moin.
Wir hatten es schon. Ich weiß es. Ich finde es nur nicht mehr.

Ich etwas austesten.
Auf der Seite
https://www.gaststaette-zur-sonne.de
soll neben den Getränken (z.B. Bier) ein Foto den Getränkelogos.
Also neben Brinkhoffs das Brinkhoffs Logo. Neben Schlösser das Schlösser Logo usw.
Idee vom Wirt. Ich werde es mal ausprobieren auf einer Testseite.
Wie bekomme ich die Logos gerade untereinander?

[Tommy Herrmann]

Du kannst ein Bild neben einen Text setzen, indem Du diesen die Eigenschaft "float" ("schweben") mitgibst:

https://www.w3schools.com/css/css_float.asp

Hier habe ich auch Beispiele:

https://www.mobirise-tutorials.com/Lawy ... rticle6-48

Code: Alles auswählen

<img src="https://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Spatz-Hinten.jpg" alt="Bildbeschreibung" title="Spatzen">

und meine CSS für das <img> (Bild) Tag:

Code: Alles auswählen

img { 
 float: left; 
 width: 50%;
 padding: 20px; 
}

Wobei "width" die Breite des Bildes angibt - 50% wäre in einem Akkordeon wohl eher zu viel. Vielleicht 20% oder in Pixeln eintragen. Das "padding" ist der Innenabstand um das Bild herum, damit die Schrift nicht direkt am Bild anstößt.

Ein "float: right;" (nach rechts schweben) würde das Bild, anstelle links vom Text, dann rechts vom Text anordnen.

Ich habe das gerade hier mal in ein Akkordeon eingebaut - am obersten Tab (das Tab zum Öffnen 2 x klicken):

https://www.mobirise-tutorials.com/Test ... ite-Blank/

Das <img> Tag steht dann im <p> Tag am Beginn. Beispiel von meiner Akkordeon-Testseite:

Code: Alles auswählen

<p class="mbr-fonts-style panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text"><img class="my-content-img" src="file:///C:/Users/User/Documents/Mobirise/Testseite-Blank/assets/images/mbr-816x542.jpg" alt="Schmetterling">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec purus ut massa hendrerit fringilla luctus mattis diam. Integer mollis sollicitudin tincidunt.</p><br>

Meine class="my-content-img" von diesem Beispiel im "CSS-Editor" des Akkordeon-Blocks:

Code: Alles auswählen

.my-content-img {
  width: 80px;
  padding-right: 5px;
  float: left;
}

[scherenschlag]

Danke Tommy.
Habe es gerade auf 'ner Testseite ausprobiert. Funktioniert einwandfrei.
Das Problem ist im Moment die Größe des Logos auf dem PC. Auf dem Phone astrein. Auf dem PC zu groß.
Da muss ich noch ein bisschen schrauben.

[Tommy Herrmann]

Moin,

Du kannst doch dem Bild am PC eine andere Größe als am Handy geben, also z.B.

am PC 120px:

Code: Alles auswählen

.my-content-img {
    width: 120px;
    padding-right: 5px;
    float: left;
}

am Handy 80px mit dieser Media-Anweisung (schreibst Du direkt darunter), die bis zu einer Displaygröße von 767px wirkt:

Code: Alles auswählen

@media (max-width: 767px) {
    .my-content-img {
          width: 80px;
    }
}

Wie groß das Bild selbst ist, ist dabei vollkommen egal (meine sind im Original 816px breit). Da kannst Du jede beliebige "width" (Breite) eintragen.

Prozentangaben sind nicht wirklich geeignet, denn am Handy ist das Bild dann eher zu klein, wenn am Desktop gerade richtig erscheint.