HTML Google maps einbinden (rechts)

[puttyfly]

Hallo,
ich möchte für unseren Tennisverein eine Google Maps Karte einstellen, mit der genauen Adresse.
So weit so gut.
Allerdings möchte ich das Ganze nach rechts schieben, so dass der Text links stehen kann.

Wie setze ich das um:
<p class="right"><iframe width="600" height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2588.129272078628!2d5.8654199159237645!3d49.55758395917406!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47eab5e3da079e59%3A0xaf3be84cbbe271b3!2s52+Rue+Pierre+Hamer%2C+4702+P%C3%A9tange!5e0!3m2!1sde!2slu!4v1501449563533" frameborder="0" allowfullscreen="allowfullscreen" style="border: 0;"></iframe></p>

Den roten TExt habe ich hinzugesetzt, klappen tut es allerdings nicht.

Vielen Dank im Voraus

 

[Mihawk90]

Zunächst mal ist <p> streng genommen (rein semantisch) nicht das richtige Element für sowas, dann eher <div>, aber funktional macht es hier keinen Unterschied.

Allerdings dem Element nur eine Klasse zu geben tut an sich nichts, für die Klasse muss auch ein Style in CSS definiert werden. Hast du schon eine CSS Regel dazu? Wenn ja mal posten.

Wenn nicht:

p.right {
  text-align: right;
}

Wenn du in das gleiche Element noch Text schreibst wird das aber so nicht funktionieren (dann wäre <p> übrigens semantisch korrekt), da dann auch der Text rechtsbündig ist.

 

[Jxn]

Hallo,

das ist eigentlich ein gutes Anwendungsbeispiel für Flexbox.
Du machst zwei divs, eins für die Karte und das andere für den Text. Beiden gibst du "width: 50%;". Diese beiden Divs tust du in einen Container.
Dem Container der die anderen umschließt, gibst du die Eigenschaften: "display: flex; justify-content: space-between; flex-direction: row;".

Lies dir gerne mal einen Guide zu Flexbox durch. Ist sehr hilfreich für sowas.

Grüße

 

[Mihawk90]

Bei Flexbox nutzt du keine Breite sondern nur ein Verhältnis... das ist standardmäßig 1, also brauch man es auch nicht angeben wenn's 50/50 werden soll.

Man kann ggf. noch eine mindest-breite angeben, aber eine feste Breite steht dem Sinn von Flexbox entgegen.

Abgesehen davon, Browsersupport. Wenn man einige ältere Besucher hat die nur IE kennen wird's schon eng.

 

[Jxn]

Dann sehen halt die übrigen 17% die Boxen untereinander. Das ist jetzt die Entscheidung des TE.

Flexbox hat keinen eigenen Sinn wie du es benutzen sollst. Du kannst alles intuitiv nutzen.
Normalerweise wäre dies auch ein guter Fall für float. Aber Flexbox löst float ab.

In Sachen Positionierung und Zentrierung habe ich schon vermehrt gelesen dass Flexbox im Vormarsch ist.

Ist jetzt die Entscheidung des TE.

 

[character]

Es gibt wirklich so gut wie keinen Grund mehr, Flexbox nicht zu verwenden. IE11 kann Flexbox "gut genug" und damit sind wir bei über 95% Marktanteil in Deutschland. Außer in obskuren Ausnahmefällen, ist das mehr als genug.

(Das eigentliche Problem ist jetzt, dass der IE11 uns noch die nächsten 10 Jahre begleiten wird und daher zumindest im B2B-Bereich wieder alles hängt. Mist da. Spielt hier aber keine Rolle.)

 

[puttyfly]

HAllo,
danke für die Rückmeldung.
Doch komplizierter als meine eingerosteten HTML Kenntnisse, welche ich mir vor 15 Jahren in Eigenregie beigebracht habe.
Ich habe die Seite übernommen um sie am Leben zu halten, aber das scheint meine Kentnisse mehr als zu übersteigen.
Eine CSS Regel habe ich noch nie erstellt.
Aber das hat wohl überhaupt nichts damit zu tun.
Ich denke mit der Flexbox bin ich überfordert

Wäre eine Tabelle nicht auch eine "ichhabekeineahnung - Möglichkeit"?

<table>
<tr>
<th><h3><strong><span style="color: #ff0000; text-decoration: underline;">By car: </span>(parking free of charge)</strong>
<strong> Hall QT 52, rue Pierre Hamer&nbsp; L-4737 Petange</strong></h3>
<h3><strong><span style="color: #ff0000; text-decoration: underline;">By train:</span></strong></h3>
<h3><strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="http://www.tennispetange.lu/wp-content/uploads/2017/07/depliant_L60.20160403-20161210.pdf" target="_blank">Line 60 (Luxembourg - Pétange)</a></span></strong></h3>
<h3><strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="http://www.tennispetange.lu/wp-content/uploads/2017/07/depliant_L70_2016.pdf">Line 70 (Luxembourg - Pétange)</a></span></strong></h3>
<h3><strong><span style="color: #ff0000; text-decoration: underline;">By plane:</span></strong></h3>
<h3><strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="http://www.tennispetange.lu/wp-content/uploads/2017/07/Airport-busline-16-29-2017.pdf">Shuttle to the railwaiy station in Luxembourg</a></span></strong></h3></th>
<th><iframe width="600" height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2588.129272078628!2d5.8654199159237645!3d49.5575839591 7406!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47eab5e3da079e59%3A0xaf 3be84cbbe271b3!2s52+Rue+Pierre+Hamer%2C+4702+P%C3%A9tange!5e0!3m2!1sde!2slu!4v15 01449563533" frameborder="0" allowfullscreen="allowfullscreen" style="border: 0;"></iframe></th>
</tr>

 

[Jxn]

Klar ist es mit einer Tabelle möglich. Leider kann ich mir dein Beispiel gerade nicht anschauen - bin am Handy.

Wegen Flexbox: So kompliziert ist das nicht. Hier mal eine sehr schöne und leicht dargestellte Dokumentation:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Lohnt sich reinzuschauen!
Du musst nur die Parameter festlegen, wie ich sie dir oben vorgegeben habe. Das dazu, ist ja deine Entscheidung.
Bin nur großer Fan.

 

[puttyfly]

Habe es mit der Tabelle lösen können.
Es hat unten nur ein </table> gefehlt.
Es macht seine Aufgabe.
Wenn ich nochmals solche ein Problem vorfinden werden, werde ich mich in die Flexbox reinknien.

Danke an alle!
Schönen Abend!