Wetter Template über iframe mittig ausrichten
-
- Mitglied (Level 2)
- Beiträge: 16
- Registriert: Sa 4. Sep 2021, 21:07
Wetter Template über iframe mittig ausrichten
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
Vielen Dank schonmal
hier noch die Homepage um die es geht:
www.Wetter-Keppeln.de
- Tommy Herrmann
- Site Admin
- Beiträge: 5874
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wetter Template über iframe mittig ausrichten
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:
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):
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:
Dann sieht das so aus:
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:
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&lng=de&uni=c&wuni=km&rad=0&bg=ffffff1f&co=#000000ff&bo=0d0c0dff" width="300" height="100" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="AWEKAS Wetterwidget"></iframe>
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&lng=de&uni=c&wuni=km&rad=0&bg=ffffff1f&co=#000000ff&bo=0d0c0dff" width="300" height="100" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="AWEKAS Wetterwidget"></iframe>
</p>
</div>
Dann sieht das so aus:
- Tommy Herrmann
- Site Admin
- Beiträge: 5874
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wetter Template über iframe mittig ausrichten
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.
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;
}
-
- Mitglied (Level 2)
- Beiträge: 16
- Registriert: Sa 4. Sep 2021, 21:07
Re: Wetter Template über iframe mittig ausrichten
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
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
- Site Admin
- Beiträge: 5874
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wetter Template über iframe mittig ausrichten
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.
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.
-
- Mitglied (Level 2)
- Beiträge: 16
- Registriert: Sa 4. Sep 2021, 21:07
Re: Wetter Template über iframe mittig ausrichten
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ß
Gruß
- Tommy Herrmann
- Site Admin
- Beiträge: 5874
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wetter Template über iframe mittig ausrichten
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/
Hier Beispiele auf meiner Seite:
https://www.mobirise-tutorials.com/Tabellen/
-
- Mitglied (Level 2)
- Beiträge: 16
- Registriert: Sa 4. Sep 2021, 21:07
Re: Wetter Template über iframe mittig ausrichten
Hey,
Der Vorteil bei meiner gefundenen Variante ist, dass die erste Spalte mit den Sensoren fixiert ist beim Scrollen….
Gruß
Thorsten
Der Vorteil bei meiner gefundenen Variante ist, dass die erste Spalte mit den Sensoren fixiert ist beim Scrollen….
Gruß
Thorsten
- Tommy Herrmann
- Site Admin
- Beiträge: 5874
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wetter Template über iframe mittig ausrichten
... ah - OK - verstehe
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 129 Gäste