Wetter Template über iframe mittig ausrichten

[jailbreaker07]

auf meine Homepage möchte mit iFrame ein Wetter Template von Awekas einbinden. Mir gelingt es jedoch nicht dies mittig unter den Bild der Webcam auszurichten. Wen ich hierfür eine zuvor mittig ausgerichteten Textblock nehme, dort das statt den Text das iFrame einbinde ist dies trotzdem linksbündig.

Vielen Dank schonmal

hier noch die Homepage um die es geht:

www.Wetter-Keppeln.de

[Tommy Herrmann]

Moin,

da Du das Standard-Thema "Mobirise 5" verwendest, wird bei Dir auch schon das neue "Bootstrap 5" verwendet.

"Bootstrap 5" verwendet teilweise ganz andere CSS-Klassen als noch "Bootstrap 4", da muss man aufpassen.

"Bootstrap 5" benutzt diese Bootstrap CSS-Class zum Zentrieren:

... zum besseren Verständnis gucke bitte hier auf der Bootstrap-Seite:

https://getbootstrap.com/docs/5.0/utili ... fy-content

Nachtrag:

ich sehe gerade, dass Du noch Software Version 5.3.10 verwendest. Dort wird noch "Bootstrap 4" verwendet, das aber in diesem Fall die gleiche CSS-Class benutzt:

https://getbootstrap.com/docs/4.0/utili ... fy-content

class="d-flex justify-content-center"

Du wendest das also am einfachsten so an, indem Du einen simplen Text-Block aus der Kategorie "Article" aufziehst:

Block Article.JPG

Dann ersetzt Du im "Code Editor" den Mobirise-Beispieltext innerhalb des <p> Tags </p> (Paragraph / Absatz) mit Deinem Iframe-Code vom Widget (nicht im <h3> Tag </h3> (Überschrift) wie Du):

Code: Alles auswählen

<iframe src="https://widget.awekas.at/widget2.php?id=12149&amp;lng=de&amp;uni=c&amp;wuni=km&amp;rad=0&amp;bg=ffffff1f&amp;co=#000000ff&amp;bo=0d0c0dff" width="300" height="100" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="AWEKAS Wetterwidget"></iframe>

Anschließend schreibst Du noch einen <div> Bereich </div> mit dieser Bootstrap-Class außen drum herum um den Inhalt innerhalb dieser Class zentriert darzustellen:

Code: Alles auswählen

<div class="d-flex justify-content-center">
    
    <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
    
        <iframe src="https://widget.awekas.at/widget2.php?id=12149&amp;lng=de&amp;uni=c&amp;wuni=km&amp;rad=0&amp;bg=ffffff1f&amp;co=#000000ff&amp;bo=0d0c0dff" width="300" height="100" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="AWEKAS Wetterwidget"></iframe>
        
    </p>
    
</div>

Iframe-Code.JPG

Dann sieht das so aus:

Wetter Widget Zentriert.JPG

[Tommy Herrmann]

Tipp:

falls Du nicht möchtest, dass das Widget direkt an Deinem Wetter-Bild "klebt", könntest Du dem Bild-Selektor "img" noch ein "padding" (Innenabstand) im Bereich "CSS Editor" geben - von z.B. "bottom" (unten) 20px wie im Screenshot unten.

.image-wrap img {
display: block;
margin: auto;
width: 80%;
padding-bottom: 20px;
}

Padding.JPG

[jailbreaker07]

Guten Morgen Tommy,

Erstmal vielen dank für deine Hilfe. Manchmal liegt es auch einfach daran das man falsch sucht. Ich habe vorher immer mit NOF gearbeitet, da ist ja so ziemlich alles anders. Das Zentrieren habe ich heute früh noch schnell umgesetzt, das optimieren kommt heute noch, danke auch hier für deinen Tip Werde mich mal näher mit den css Klassen beschäftigen….
Ich habe auch noch unter Wetterdaten eine Tabelle auch über css, da muss ich auch noch heraus finden wie man die erste Spalte etwas breiter machen kann. Da wird teilweise etwas angeschnitten… deswegen die Pfeile statt min und Max

Gruß

Thorsten

[Tommy Herrmann]

Mobirise verwendet ja (im Gegensatz zu NOF) das Framework "Bootstrap", das ursprünglich von "Twitter" erfunden wurde, damit die Mitarbeiter komfortabel CSS verwenden können.

Du kannst aber in Mobirise ganz genauso das normale CSS verwenden, nur kann es passieren, dass die in Bootstrap bereits erstellten Klassen eine höhere Priorität haben als die CSS von Dir. Da muss man dann im Einzelfall probieren.

Bootstrap ist nichts anderes als ein riesiges Archiv an bereits fertig erstellten CSS-Klassen.

Für Deine Tabelle frage dann bitte in einem neuen Beitrag ganz gezielt - mit Link zu betroffenen Seite.

https://getbootstrap.com/docs/5.0/content/tables/

Es gibt z.B. das HTML <td> colspan Attribut colspan="2", das z.B. dann 2 Spalten zusammenfasst. Aber auch hier könnte man jeder einzelnen Spalte auch ein "padding" (Innenabstand) geben.

https://getbootstrap.com/docs/5.0/conte ... ive-tables


in Deinem Fall wird doch die Spaltenbreite genau über Pixel definiert (400) das kannst Du doch anpassen.

Spalten-Breite.jpg

[jailbreaker07]

Die angegebenen Spaltenbreiten haben glaube ich Seitdem ist die Tabelle auf responsiv umgestellt habe keinen Einfluss mehr. Das muss ich mir mal in Ruhe anschauen, werde denke ich mal die Tabelle mit denn css Klassen aus deinen Link anpassen, da ist das ja sehr gut beschrieben. Erstmal war es mir wichtig das die Tabelle responsive ist….
Gruß

[Tommy Herrmann]

Dafür könntest Du doch aber wahrscheinlich auch die responsiven Standard-Tabellen von Mobirise verwenden.

Hier Beispiele auf meiner Seite:

https://www.mobirise-tutorials.com/Tabellen/

[jailbreaker07]

Hey,
Der Vorteil bei meiner gefundenen Variante ist, dass die erste Spalte mit den Sensoren fixiert ist beim Scrollen….

Gruß

Thorsten

[Tommy Herrmann]

... ah - OK - verstehe