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?
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?
Mit Gridlayout ist das recht einfach, hier eine Demo:
<!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>
Alles anzeigen
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?
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.