Hallo
Ich würde für meine Website gerne so eine Ordnung für die Browser erstellen können, wie im Beispiel gezeigt.
Wie kriege ich das hin?
Layout für Anzeige der Suchmaschiene
-
-
Mit Gridlayout ist das recht einfach, hier eine Demo:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Zwei-Spalten-Layout mit Grid</title> <style> body { margin: 0; } .grid-2-cols { margin-left: 3em; display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1em; } section { padding: 0.5em; } </style> </head> <body> <section> <h1>Die Hauptüberschrift</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <div class="grid-2-cols"> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> </div> </body> </html>Ich verstehe deine Frage erst Mal so, dass Du dieses Layout haben möchtest. Wenn Du auch das "Weitere Ergebnisse ...:" haben willst, muss man das noch etwas erweitern.
-
Also dieses Layout soll im Browser erscheinen, wenn man jetzt Beispielsweiße "JP Lichttechnik" in z.B Google eingibt, also bei den Treffern für ein Schlag Wort. Dann soll jeder der Einträge auf eine meiner Unterseiten verweisen . Als Beispiel:
Gesuchtes Wort: JP Lichttechnik
Der Eintrag Soll dann so aussehen, wie auf dem Bild auf meinem ersten Beitrag zu diesem Thema (Bei dem Bild habe ich Thomann gegooglet, und das war der erste Eintrag:Als überschrift z.B. JP Lichttechnik
Dann in dem 2 Spalten Layout unterschiedliche Einträge zu unterschiedlichen Unterseiten meiner Website. z.B.:
"Unsere Technik" "unser Angebot"
"Kontakt" "Bilder"
Wie kann ich das erreichen?
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!