HILFE ! ANFÄNGER! google maps funktioniert nicht richtig.

Hallo Leute,

Ich bin sehr neu hier, auch allgemein hab ich wenig Erfahrung mit Webseiten erstellen oder verwalten. Nur das Grundlegende was man halt im Studium gemacht hat als Wirtschaftsinformatiker. Habe auch keinen passenden Thread gefunden zu meinem Problem. Also ich versuche die Webseite von meiner Schwester seit kurzem zu restaurieren. Dabei funktioniert die google maps Erweiterung nicht so ganz. Die Karte ist einfach ganz schwarz. Der Link dazu: http://mellowcoffee.de/index.php/anfahrt.html .

Wie kann ich das Problem beheben?
Und habt ihr allgemein Tipps für mich wie ich Contao mir aneignen kann.

LG
Bünyamin

In erster Linie ist es kein Problem von Google Maps, sondern von dem Stylehseet. Dieser weißt allen Divs einen schwarzen Hintergrund hinzu, auch das transparante Layer über der Karte, die damit nicht mehr sichtbar ist.

Code:

---

html, body, section, figure, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #000;
}

---

Hallo Bünyamin,

willkommen im Forum.
Wie webstar schon richtig sagte, ist allen Elementen ein schwarzer Hintergrund zugewiesen im Stylesheet standard.css, gleich die erste Definition.

Zu Deiner Frage bezüglich Contao lernen:
Schau Dir mal an, was es bei der Contao-Academy gibt. Einige Videos sind kostenlos. Wenn es Dir zusagt, kannst Du es kaufen, das ist nicht so dramatisch teuer. Das ist derzeit vermutlich der beste, weil aktuellste Einstieg.

Ansonsten gibt es natürlich die Contao-Dokumentation und das Forum. Die Bücher, die ich kenne, sind alle schon älter. Deine Installation ist ja aber auch noch eine 2.11, so dass Du mit den älteren Dokumentationen einsteigen kannst. Du solltest das aber dringend auf eine aktuellere Version updaten und dabei ist es gut immer auf die LTS-Versionen zu setzen, gerade, wenn man noch nicht so viel Erfahrung hat.

Viele Grüße und viel Erfolg!
Hella

Zitat:

---

Zitat von webstar

In erster Linie ist es kein Problem von Google Maps, sondern von dem Stylehseet. Dieser weißt allen Divs einen schwarzen Hintergrund hinzu, auch das transparante Layer über der Karte, die damit nicht mehr sichtbar ist.

Code:

---

html, body, section, figure, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #000;
}

---

---

Danke für die rasche Antwort. Ich habe jetzt unter Dateiverwaltung die CSS-Datei gefunden. Und wenn ich die Hintergrundfarbe auf weiß ändere, müsste es doch klappen? Oder liege ich da falsch? Es tut sich aber nichts..

Zitat:

---

Zitat von fusch

Hallo Bünyamin,

willkommen im Forum.
Wie webstar schon richtig sagte, ist allen Elementen ein schwarzer Hintergrund zugewiesen im Stylesheet standard.css, gleich die erste Definition.

Zu Deiner Frage bezüglich Contao lernen:
Schau Dir mal an, was es bei der Contao-Academy gibt. Einige Videos sind kostenlos. Wenn es Dir zusagt, kannst Du es kaufen, das ist nicht so dramatisch teuer. Das ist derzeit vermutlich der beste, weil aktuellste Einstieg.

Ansonsten gibt es natürlich die Contao-Dokumentation und das Forum. Die Bücher, die ich kenne, sind alle schon älter. Deine Installation ist ja aber auch noch eine 2.11, so dass Du mit den älteren Dokumentationen einsteigen kannst. Du solltest das aber dringend auf eine aktuellere Version updaten und dabei ist es gut immer auf die LTS-Versionen zu setzen, gerade, wenn man noch nicht so viel Erfahrung hat.

Viele Grüße und viel Erfolg!
Hella

---

Danke Hella !
Ja wir werden noch Updaten, aber muss erst mal das ganze etwas besser verstehen. Hab lange schon nichts mehr mit Programmieren am Hut gehabt.. Ich muss da wieder reinkommen.. Diese Webseite sollte für mich wieder der Einstieg in die Webseitengestaltung usw. sein. Ist schade sowas zu verlernen, zu dem man die Grundkentnisse noch nicht erweitert hat..

Zitat:

---

Zitat von bunyamin

Und wenn ich die Hintergrundfarbe auf weiß ändere, müsste es doch klappen? Oder liege ich da falsch? Es tut sich aber nichts..

---

Da liegst du falsch. Grundsätzlich allen Elementen eine Hintergrundfarbe zuweisen ist auf bayrisch gesagt "A Schmarrn" und macht null Sinn. Gib es nur dem gewünschten Element (Einzahl) das es auch wirklich braucht.

Nach Änderungen am CSS empfiehlt es sich auch immer den Cache zu leeren.

VG

Zitat:

---

Zitat von Kahmoon

Da liegst du falsch. Grundsätzlich allen Elementen eine Hintergrundfarbe zuweisen ist auf bayrisch gesagt "A Schmarrn" und macht null Sinn. Gib es nur dem gewünschten Element (Einzahl) das es auch wirklich braucht.

Nach Änderungen am CSS empfiehlt es sich auch immer den Cache zu leeren.

VG

---

okay hab es auf 0 gesetzt, müsste doch jetzt klappen? habe auch die Daten bereinigt, Tdem ändert sich nichts ..

Auf 0?

Zitat:

---

Zitat von Kahmoon

Auf 0?

---

also den Wert für den Hintergrund auf 0: background: 0

ich nehme an, dass ich meine Kentnisse wieder erfrischen muss.

LG

Hallo Bünyamin,

also, google am besten mal die Hexadezimal-Codes der Farben. Wenn Du die Eigenschaft background nicht definierst, dann ist der Hintergrund weder schwarz noch weiß.

Aber mit '0' gibst Du ja eine Definition an.

Viele Grüße
Hella

Zitat:

---

Zitat von fusch

Hallo Bünyamin,

also, google am besten mal die Hexadezimal-Codes der Farben. Wenn Du die Eigenschaft background nicht definierst, dann ist der Hintergrund weder schwarz noch weiß.

Aber mit '0' gibst Du ja eine Definition an.

Viele Grüße
Hella

---

also wenn ich dann die ganze zeile lösche, definier ich keinen Hintergrund. stimmt's?

Ja, genau.

Das hier ist eine gute Quelle, um CSS zu lernen:
https://developer.mozilla.org/de/doc...web/CSS_basics

Gruß
Hella

Ich denke das die "graue" Darstellung
einfach von dem Google Watermark "for development purposes only" kommt - s.:

https://stackoverflow.com/questions/...-purposes-only

Am einfachsten wäre es evtl. Du nimmst die Google Maps embed (iFrame) Variante:

- Den embed Code von Google Map holen
- Hier im Anschluß width und height auf 100% setzen/ändern
- In den Contao Einstellungen unter "Erlaubte HTML-Tags" den Tag <iframe> hinzufügen
- In Contao das Inhaltselement "HTML" erstellen und obigen Code zusammen mit einem umschließenden <div> Container mit der CSS Klasse "responsive-iframe" einfügen

Das könnte dann so aussehen:

HTML-Code:

---

<div class="responsive-iframe">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d613684.6511946104!2d7.908545475486055!3d53.070578645563366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b729f379f8d833%3A0x9adaa1337c0edea1!2sEwald+Consulting+GmbH+%26+Co.KG!5e0!3m2!1sde!2sus!4v1541494461538" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen>
  </iframe>
</div>

---

In Deiner CSS dann folgendes hinzufügen:

Code:

---

.responsive-iframe {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

---

Den könntest Du auch optional als Inline Style unter obigen HTML Quelltext eintragen ( <style> ... </style>) ...
Die CSS Angaben bewirken ein responsive Verhalten des iFrame wobei die Breite über den dann übergeordneten Container gesteuert werden könnte.

Optional könnte man die Map dann auch noch z.B. via CSS ausgrauen mit z.B.: filter: grayscale(100%);
Siehe auch:

https://caniuse.com/#feat=css-filters
http://html5-demos.appspot.com/stati...ers/index.html