Mobirise-Tutorials.com

Moin.
Jetzt brauche ich mal echt Hilfe. Das ganze ist nur eine Idee.
Lasst mal die Qualität der png Bildchen außen vor.
(Obwohl mir diese von der Brauerei zur Verfügung gestellt wurden!)
Ich würde eventuell die Bier Logos einbauen, die es im Lokal auch flüssig gibt.

Wie bekomme ich die Dinger in einer vernünftigen Größe auf die Seite?
Alle Logos sind 100x100 px. (zu groß?)
Die Seite ist dann auch "zweigeteilt". Links Text. Rechts die Logos. Von mir aus auch umgekehrt.
Baue ich die Getränkeleiste jetzt ein, erschlagen mich die Logos mit Ihrer Größe.
Was tun?

Es geht um die Seite
https://tsad17.de

Eingebaut habe ich Sie allerdings noch nicht. Soll auf die Getränkeseite. Wenn ....

Moin;

Du musst dem Bild eine maximale Breite mitgeben. Schreibe dann an das <img> Tag im Code Editor mit ran:

style="max-width: 100px;"

Moin.
Ich brauche mal Hilfe.
Schaut Euch bitte mal die URL an:
https://tsad17.de/Getraenke.html#Getraenke

Ich möchte auf der Getränkeseite die Biere aufführen. Da fehlen sogar noch welche.
Die sollten rechts oben in den Textblock. Untereinander. Eben bei Bier.
Irgendwie haue ich mir die Logos selbst um die Ohren. Zu groß. Zu klein. Schlecht angeordnet.
Und ich habe sogar die Original Logos von der Brauerei. Also Qualitativ top.
Im Moment sind Sie unten drunter.
Verschiedene Größen. Schlecht angeordnet. Mist.
Jemand eine Idee?

Moin,

also - das kann ich gar nicht sehen. Ich denke, die würde in dem Textblock total komisch aussehen, viel zu klein und wie aufgereiht. Ob die dann alle da rein passen würden ist die nächst Frage.

Mobirise hat doch genau für solche Zwecke einen Slider. Da würden die Logos wunderbar zur Geltung kommen und gleichzeitig die Seite noch etwas beleben.

Im Textfeld müsstest Du die auch alle händisch einsetzten und eben auf eine maximale Breite von vielleicht 40 oder 50px begrenzen. Dann müsstest Du den Bildern eine fest Position zuordnen oder (vielleicht) mit "float" arbeiten, ähnlich wie in diesem Beispiel:

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

Versuche ich gleich mal......

Da muss ich mal am Wochenende hin und her probieren.
Jetzt kommt mir erstmal der BVB in die Quere.

… ich denke ja, ein Slider mit den Logos und eine kleinen Beschreibung darunter wäre vielleicht nicht schlecht.

Alternativ habe ich Dir mal hier beispielhaft eine Bootstrap Tabelle händisch erstellt:

Beispielseite-gelöscht-Tutorials.com/Vorlageseite/Tutorial.html#Biere

Wie man so eine Tabelle erstellen kann, habe ich mal hier vor langer Zeit beschrieben:

https://www.mobirise-tutorials.com/Tuto ... belle.html

Man könnte diese also auch scrollbar, sortierbar, etc machen - oder auch noch eine Suchen-Option hinzufügen.

Die kann daher natürlich auch noch komplett anderes aussehen.

Im Moment habe ich diesen Code anstelle eines Textes - also anstelle des <p> Tags von Mobirise eingefügt:

Code: Alles auswählen

<div style="font-size: 1.2rem;" class="mbr-text mbr-fonts-style table-responsive">
    <table class="table table-striped table-hover">
      <thead mbr-text>
        <tr>
          <th scope="col">Sorte</th>
          <th scope="col">Beschreibung</th>
          <th scope="col">Preis</th>
          <th scope="col">Logo</th>
        </tr>
      </thead>
      <tbody mbr-text>
         <tr>
          <td>Brinkhoff's No. 1</td>
          <td>Frisch gezapft</td>
          <td>12,00 EUR</td>
          <td><img src="https://www.mobirise-tutorials.com/Vorlageseite/Biere/brinkhoffs-no.1-200.png" alt="Brinkhoff's No. 1" title="Brinkhoff's No. 1"></td>
         </tr>
         <tr>
          <td>Schlösser Alt</td>
          <td>Frisch gezapft</td>
          <td>12,00 EUR</td>
          <td><img src="https://www.mobirise-tutorials.com/Vorlageseite/Biere/schlsser-alt-1.png" alt="Schlösser Alt" title="Schlösser Alt"></td>
         </tr>
         <tr>
          <td>Schöfferhofer</td>
          <td>Als Flaschenbier</td>
          <td>8,00 EUR</td>
          <td><img src="https://www.mobirise-tutorials.com/Vorlageseite/Biere/schfferhofer-grapefruit.png" alt="Schöfferhofer" title="Schöfferhofer"></td>
         </tr>         
      </tbody>
    </table>
</div>

… und diese CSS-Einstellungen in den Bereich "CSS-Editor" kopiert, das verhindert eine Bildgröße von mehr als 200px Breite sowie einen horizontalen Scroller der gesamten Seite am Handy. Die Tabelle habe ich ganz bewusst am Handy horizontal scrollbar gemacht, da eine Tabelle sonst die Beschriftung total unschön umbricht.

Code: Alles auswählen

img {
  max-width: 200px;
}
html {
  overflow-x: hidden;
}

Moin.
Ich habe ein Problem was wahrscheinlich gar keines ist.
Schaut bitte mal oben auf der Getränkeseite. Dort ist mein Testblock.
Logos der Getränkemarken und der Text sollen miteinander weiterscrollen.
Und nicht wie im Moment. Auf dem PC sind die Bildchen und der Text noch nebeneinander.
Am Phone ist dann alles vorbei und die Logos stehen unter dem Text.
Ich weiß das wenig Platz in der Breite ist. Trotzdem.
Denn das sind jetzt nur die alkoholfreien Getränke. Ein paar.
Sobald ich in der Bierschiene etc. angelangt bin, wird es ein bisschen mehr.
Danke und Gruß
Thomas

https://tsad17.de/Getraenke.html#HeaderGetraenke

Moin,

Du, was erwartest Du denn anderes.

Links hast Du ein zusammenhängendes Bild mit allen Logos übereinander und rechts den Text.

Die Blockbreite teilen sich diese beiden Container. Wenn der Platz nicht reicht, brechen diese Container untereinander um. Das ist das Prinzip vom responsiven Design.

Ich verschiebe diesen Beitrag mal unter dem ursprünglichen Board ab, denn das ist doch die gleiche Frage, die ich Dir schon versucht hatte zu erklären.

Wenn Du die Logos immer neben dem dazugehörigen Text anzeigen willst, bleibt eigentlich nur eine Tabelle, wie ich sie Dir oben schon beschrieben hatte oder die Variante mit einem Bild-Slider mit Beschriftung.

Man könnte das natürlich mal mit einem einfachen Textblock, aus der Gruppe "Article", probieren, der eben nur eine Spalte hat.

Das ist dann aber etwas fummelig, weil man ja die Abstände ausprobieren muss.

Hier mein temporäreres Beispiel:

gelöscht-mobirise-tutorials.com/Vorlageseite/

(Seite wird später wieder gelöscht)

Ansicht Desktop:

Ansicht am Handy:

Der Code für das Bild, das ich noch ein wenig höher gemacht habe, damit es sich besser neben dem Text positioniert:

Code: Alles auswählen

<img src="https://www.example.com/logofeld.png" alt="Logo" title="Logo">

Hier habe ich diese CSS im "CSS Editor" vom Block angewendet:

Code: Alles auswählen

img {
  float: left;
  width: 96px;
}
.mypadding-text {
  padding-left: 300px;
}
@media (max-width: 767px) {
  .mypadding-text {
    padding-left: 130px;
  }
}

Dem <img> Tag habe ich also die Originalbreite von 96px gegeben und ein "float: left", damit bricht das Bild nach links um und steht somit neben dem Text.

Dann braucht man etwas Abstand vom Bild zum Text, dieser Abstand rechnet nun aber nicht ab dem Bild, sondern ab dem linken Blockrand, hier im Beispiel 300px vom linken Blockrand. Diese class="mypadding-text" habe ich dann an das <h4> Tag der Überschrift und an <p> Tag vom Text mit hinzugeschrieben (rot markiert im Screenshot unten).

Für das Handy dann noch die Media-Abfrage und dort dann nur noch 130px, damit der Text nicht zu weit rechts steht.

So sieht das dann im Block aus:

So wäre es wahrscheinlich etwas eleganter - mit der Bootstrap class="d-flex justify-content-between"

Code: Alles auswählen

img {
  width: 96px;
  height: 390px;
  padding-top: 80px;
  padding-right: 20px;
}

Code: Alles auswählen

                <!-- Row d-flex -->
                <div class="d-flex justify-content-between mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                    <!-- Image -->                   
                    <img src="https://www.mobirise-tutorials.com/Vorlageseite/logofeld-3.png" alt="Logos" title="Logos">
                        
                    <!-- Text style="float: right;" -->
                    <div style="float: right;" class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                        <h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5">Alkoholfrei und heiß<br></h4>
                        
                        <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">Pepsi, Miranda, Seven Up
                        <br>Normal oder Zero
                        <br>
                        <br>Schweppes
                        <br>Verschiedene Sorten
                        <br>
                        <br>Oder einfach nur ein
                        <br>Mineralwasser von Selters
                        <br>
                        <br>Oder Sie fordern unsere
                        <br>Kaffeemaschine heraus.
                        <br>Oder die Teekanne.
                        </p>
                        
                    </div>
                    
                </div>

Moin.
Tschuldigung Tommy wenn ich schon mal gefragt habe.
Passiert in meinem Alter schon mal .....

Aber das ist genau dass, was ich wollte.
Die Logos scrollen mit dem Text nach oben weg.

Danke.

Mobirise-Tutorials.com

Mehrere png-Bilder einbauen

Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Logos sollen direkt neben dem Text bleiben

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen

Re: Mehrere png-Bilder einbauen