Javascript/HTML/CSS Schützhilfe beim Layout

[Segelflugpilot]

Moin moin liebe Forengemeinde,
ich würde gerne eine Website von eine Cookieabfrage umstellen, auf eine 2 Klick-lösung um eine Google Maps Karte anzuzeigen. Ich habe da ein tollen Code auf Github gefunden, welcher mit jedoch beim Layout meiner Seite Probleme macht.
(Link entfernt)
Ganz unten soll der Text für die Aktivierung neben den Öffnungszeiten stehen. Sprich eigentlich so, wie es aussieht, wenn man auf "Karte anzeigen" geklickt hat. Nur das P-Icon muss ich dann auch noch irgendwie retten. Ich vermute, dass ich quasi ein Off-Element anlegen muss, damit der Browser beim Rendern gleich schon die Größe der aktivierten Karte bekommt oder?
Ich wäre euch für jede Hilfe sehr dankbar!

P.S. Wahrscheinlich ist es ganz leicht, aber ich bin noch ein ziemlicher Anfänger

 

[|RaBtEr|]

Dein Inhalt ist auch im gleichen<div> wie die map... div class map...
Zieh die Inhalte raus und gut ist.
Oder lege einen überbereich mit zwei unterbereichen an.

 

[Segelflugpilot]

ich befürchte, dass ich nicht ganze verstehe, wie ich die da rausziehen soll. Sobald ich da etwas versuche zu machen, zerschieße ich mir immer das Layout über flex.
Ich bin damit leider überfordert und brauche Hilfe.

 

[floTTes]

Bei deinem derzeitigem Flex-Layout für <div id="aussendiv"> hast du zwei Akteure, die unterschiedlich agieren; <div class="map"> und <div class="privacy-map-msg">. Vor dem P-Icon fehlt auch das <br>.

Für dein Problem würde ich dir empfehlen, innerhalb der <div id="aussendiv"> eine weitere <div> anzulegen, deren Größe dynamisch ist, aber von dir kontrolliert wird. Innerhalb dieser <div> kann der <iframe> dann machen was er will, ohne dass er Einfluss auf das äußere Layout hat. Dort kannst du auch den <p> unterbringen.

Der ganze Code muss dringend überarbeitet werden:

• Überschriften beginnt man syntaktisch immer bei <h1>
• einzigartige Elemente sind mit einer ID und (nicht nur) mit einer KLASSE zu versehen
• von inline-Styles ist ebenso wie von &nbsp; abzusehen
• auch onclick-Links sollten korrekt sein, für den Fall, dass JS deaktiviert ist
• das One-Page-Design muss konsequenter umgesetzt werden
• und noch paar Sachen ... vergessen

Der letzte Absatz ist bitte als Hilfe und nicht als Diss zu verstehen. LG

 

[Segelflugpilot]

oh man oh man,
danke für deine Vorschläge, ich würde sowas nie als Diss verstehen, aber im Netz gibt es davon leider einige Leute. Auch wenn ich hier nicht den Grund verstehen würde, du hast dir ja wirklich viel Mühe gegeben. Danke!
Ich werde mich heute Abend an das div Problem setzen und auch hoffentlich noch ein bisschen mehr korrigieren. Mit onklick Links meinst du die Map? Denn das Javescript für das blokieren fürs einfache Auslesen der Mailadresse zeigt die Adresse ja auch abgeschaltet an. Für die Map habe ich noch absolut keine Idee, wie ich das umsetzen soll, denn ich darf ja die Map vorher nicht laden. Sonst würden schon Daten an Google ohne Einwilligung übermittelt, auch wenn es gerade noch nicht ganz gesagt ist, was genau zu machen ist, die ePrivacy VO kommt ja erst noch.
Ist es denn wirklich für das Google Ranking so gut, alles auf eine Seite zu stellen? Ich bin am überlegen für die Rechtsgebiete eigene Unterseiten zu erstellen und die dann ausführlicher zu machen, sodass man auch mit dem spezifschen Rechtsgebiet oben in den Ranking Liste auftaucht, denn so findet man die Seite leider nur allgemein sehr gut.
Ich bin da wirklich komplett neu drin, neben dem Studium, und habe mir alles in den letzten 3 Monaten nebenbei versucht anzueigenen.

 

[floTTes]

Alles kein Thema, dafür sind wir hier ja da.

Du achtest auf die Cookie-Privacy-VO, finde ich sehr gut! Während des Layout-Testens würde ich allerdings auf das Setzen des Cookies verzichten.

Bei Webpage-Entwicklung (ohne CMS) finden parallel zwei Prozesse statt: Content-Input und Layout-Umsetzung. Ich bin kein Designer. Als Entwickler würde ich dir folgendes Vorgehen empfehlen:

• Überblick über den Content verschaffen, Zielgruppen und -geräte feststellen
• Festlegen der Layout-Basis (One-Pager, Breakpoints für responsives Design ...)
• Grundstrukturierung des Contents (Google-Ranking, Index, IDs nutzen, Überschriften, Sektionen, Pages etc.)
• HTML ist fließend; willst du etwas im Zaum halten, ruhig erstmal over-diven (Der Umgang mit dynamischen und/oder fließenden Elementen wird dir zunehmend einfacher fallen.)
• CSS-Tuning, JS-Tuning und Cookies als letztes
• Strippen, Refactoring ...

Heute ist der Einstieg in HTML etwas schwerer als früher. Früher war's <div>, <table> &nbsp; ... fertig!
Bitte schau dir moderne Tags an: <header>, <footer>, <section>, <address>, <figure>, <cite> ...
Je besser die Struktur deiner Page, desto besser dein Ranking.
Dazu kommen wichtige Meta-Daten: Bilder dringend mit entsprechenden Attributen versehen!
Bei Kontakt-Daten scheiden sich die Geister. Frag deinen Kunden, ob die Daten obfuskiert werden sollen.

Für dein aktuelles Problem: Google "responsive iframe"

 

[Segelflugpilot]

Letztendlich hätte ich auch wohl nicht das Geld in das Template investieren sollen. Ich da inzwischen so viel geändert, dass ich mich frage, ob es nicht einfacher gewesen wäre das selbst zu machen
Deine Änderung werde ich beizeiten auf jeden Fall in Angriff nehmen. danke für den ganzen Input.
Eine Firma hat mir jetzt angeboten die Website komplett auf Cantao neu zu machen. Ich wollte aber aufgrund des Pagespeeds, der Rankings und der Sicherheit gerade kein CMS. Von dem hatte ich aber vorher nicht wirklich was gelesen. Was haltet ihr davon? Open Source finde ich ja schon einmal ziemlich gut, zumal es ja wohl auch relativ sicher sein soll.