Guten Abend liebe Community,
ich möchte im Aside (rechte Seite) die Bilder zentrieren, ich habe schon einiges ausprobiert aber irgendwas stimmt nicht
HTML
- <!doctype HTML>
- <html lang="de">
- <head>
- <meta charset="UTF-8">
- <title>Puschelreich - Maine Coon Zucht in Brandenburg in der Nähe bei Senftenberg</title>
- <meta name="description" content="Maine Coon Zucht aus Annahütte. Hier erfahren Sie alles über unsere reinrassige Zucht der Maine Coon, Kittenkauf, jede menge Bilder.">
- <meta name="author" content="Puschelreich - Monique Sommer, David Jähnel">
- <meta name="keywords" content="Maine Coon, Kitten, Maine Coon Zucht, Katzenzucht, Katzenbilder, Katzenbabys">
- <link href="design.css" rel="stylesheet">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <!--[if IE]>
- <script
- src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
- ></script>
- <![endif]-->
- </head>
- <body>
- <div id="wrapper">
- <header>
- <!-- Kopfzeile -->
- </header>
- <nav id="steuerungoben">
- <ul>
- <li><a href="index.htm">Startseite</a></li>
- <li><a href="puschels/kitten/index.html">aktuelle Würfe</a></li>
- <li><a href="aktuelle%20news/index.html">Neuigkeiten</a></li>
- <li><a href="Kontakt.html">Kontakt</a></li>
- </ul>
- </nav>
- <div class="flex-container">
- <nav id="steuerunglinks">
- <ul>
- <li><a href="index.html">Startseite</a></li>
- <li><a href="puschels/index.html">Puschels</a></li>
- <li><a href="bilder.html">Bilder</a></li>
- <li><a href="über%20uns%20dosenöffner.html">Über uns Dosenöffner</a></li>
- <li><a href="https://www.puschelreich.de/infos/index.html">Infos</a></li>
- <li><a href="https://www.puschelreich.de/aktuelle%20news/index.html">Neuigkeiten</a></li>
- <li><a href="https://www.puschelreich.de/katzenblog/index.html">Katzenblog</a></li>
- <li><a href="https://www.puschelreich.de/Kontakt.html">Kontakt</a></li>
- </ul>
- </nav>
- <section>
- <h1>Puschelreich - Maine Coon Zucht</h1>
- <p id="starkeschrift">Herzlich Willkommen!</p>
- <p>Wir sind eine kleine Zucht der Rasse Maine Coon aus Annahütte im Bundesland
- Brandenburg. Unsere Zucht gestalten wir transparent und wollen Euch
- liebe Leser und Beobachter im Reich der Puschels verführen.
- </p>
- <p>Wir wünschen viel Spaß beim stöbern auf unserer Homepage :)
- Bei Fragen können Sie uns jederzeit kontaktieren.</p>
- <p>Auch Züchterfreunde sind bei uns immer herzlich willkommen.</p>
- <hr />
- </section>
- <aside>
- <p>
- <img src="Highlight/1.jpg" width="155" height="116" alt="Highlight" title="Highlight">
- <img src="Highlight/2.jpg" width="155" height="116" alt="Highlight" title="Highlight">
- <img src="Highlight/3.jpg" width="155" height="116" alt="Highlight" title="Highlight">
- <a href="https://www.premiumpetshop.de/Premium-Petshop-praesentiert-Top-Katzenblogs"><img width="180"
- src="https://www.premiumpetshop.de/mediafiles/Bilder/top-katzenblog-2018.png" alt="Premiumpetshop stellt Top Katzenblogs 2018 vor" title="Premiumpetshop stellt Top Katzenblogs 2018
- vor"></a>
- <a href="https://www.pawpeds.com/pawacademy/courses/g1/g1students_de.html">
- <img src="Pawpeds/G1.png" width="100" height="200" alt="Pawpeds G1" title="Pawpeds G1"></a>
- <a href="https://www.pawpeds.com/pawacademy/courses/g2/g2students_de.html">
- <img src="Pawpeds/G2RibbonSmall.gif" width="100" height="200" alt="Pawpeds G2" title="Pawpeds G2"></a>
- </p>
- </aside>
- </div>
- <footer>
- Printerest
- Teilen
- Startseite
- Impressum
- Kontakt
- Maine Coon Züchter Berlin Brandenburg Dresden
- Unser Verein
- Katzenblog
- </footer>
- </div>
- </body>
- </html>
Code
- * {
- margin: 0;
- padding: 0;
- }
- body {
- display: flex;
- flex-flow: row wrap;
- text-align: center;
- background-image: url(onewebmedia/Hintergrund2.jpeg);
- background-attachment: fixed;
- font-family: Arial, sans-serif;
- }
- header, footer {
- flex: 1 100%;
- }
- section {
- flex: 3;
- }
- aside {
- flex: 1;
- }
- header {
- /* background-color: yellow; */
- background-image: url(Homepage/Shadow.jpg);
- height: 200px;
- }
- header p {
- /* background-color: orange; */
- text-align: right;
- padding: 15px;
- }
- #steuerungoben {
- /* background-color: red; */
- -ms-flex-direction: column;
- flex-direction: column;
- background-image: url(Bilder/hintergund-grey.png);
- }
- #steuerungoben ul {
- display: flex;
- list-style-type: none;
- }
- #steuerungoben li {
- display: flex;
- }
- #steuerungoben a {
- display: block;
- width: 15em;
- /* background-color: yellow;*/
- /*float: left;*/
- /* border-right: 1px red solid; */
- color: white;
- text-decoration: none;
- line-height: 24px;
- text-align: center
- }
- #steuerungoben a:hover {
- background-image: url(Bilder/hintergrund-black.png);
- }
- .flex-container {
- display:flex
- }
- #steuerunglinks {
- /* background-color: green; */
- width: 250px;
- }
- #steuerunglinks ul {
- padding-left: 1em;
- padding-top: 20px;
- list-style-type: none
- }
- #steuerunglinks a {
- color: #dd9661;
- line-height: 30px;
- }
- aside {
- background-color: #808000;
- width: 175px;
- }
- aside p {
- display: block;
- margin-top: 30px;
- margin-left: auto;
- margin-right: auto;
- }
- section {
- /* background-color: orange; */
- }
- section h1 {
- padding-top: 20px;
- padding-bottom: 0.4em;
- color: #dd9661;
- }
- section h2 {
- color: #dd9661;
- padding-top: 1em;
- padding-bottom: 0.6em;
- }
- section p {
- padding-bottom: 1em;
- }
- #starkeschrift {
- font-weight: bold;
- }
- footer {
- background-color: brown;
- background-image: url(Bilder/hintergund-grey.png);
- text-align: center;
- color: white;
- clear: both;
- }
- #wrapper {
- /* background-color: #eeeeee; */
- width: 60em;
- margin: 0 auto;
- text-align: left;
- background-image: url(hintergrund-durch.png);
- }
Vielen Dank für Eure Hilfe.
Beste Grüße