Guten Abend Community,
ich möchte mein "+" nach oben verschieben. im css -> #plus
Ich habe den Befehl position: relative gewählt und wollte in %-Angaben ändern zwecks später für die
mobile Version.
Eigenartigerweise kann ich mit left nach links und rechts bewegen aber mit top funktioniert das nicht.
PHP
- <!doctype HTML>
- <html lang="de">
- <head>
- <meta charset="UTF-8">
- <title>Überblick Wurfmeldungen der Rasse Maine Coon</title>
- <meta name="description" content="Ein Überblick unsere Würfe der Rasse Maine Coon">
- <meta name="author" content="Puschelreich - Monique Sommer, David Jähnel">
- <meta name="keywords" content="Wurfmeldungen, Katzenbabys, A-Wurf, B-Wurf, C-Wurf, Maine Coon Babys, Einzelkitten">
- <link href="https://www.puschelreich.de/design.css" rel="stylesheet">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="https://puschelreich.de/lightbox/css/lightbox.min.css">
- <!--[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>
- <?php include ("../../../steuerungoben.html"); ?>
- <div class="flex-container">
- <nav id="steuerunglinks">
- <ul>
- <li><a href="http://puschelreich.de/index.php">Startseite</a></li>
- <li><a href="http://puschelreich.de/puschels/index.php">Puschels</a></li>
- <ul>
- <li id="wuerfe"><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/index.html">A-Wurf - 29.03.2016</a></li>
- <li><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/abby.html">Abby</a></li>
- <li><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/amira.html">Amira</a></li>
- <li><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/adonis.html">Adonis</a></li>
- <li><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/akimba.html">Akimba</a></li>
- <li><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/akiro.html">Akiro</a></li>
- <li><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/aladin.html">Aladin</a></li>
- <li><a href="https://www.puschelreich.de/puschels/kitten/a-wurf/apollo.html">Apollo</a></li>
- <ul></ul>
- </ul>
- <li><a href="http://puschelreich.de/bilder.html">Bilder</a></li>
- <li><a href="http://puschelreich.de/über%20uns%20dosenöffner.html">Über uns Dosenöffner</a></li>
- <li><a href="http://www.puschelreich.de/infos/index.html">Infos</a></li>
- <li><a href="http://www.puschelreich.de/aktuelle%20news/index.php">Neuigkeiten</a></li>
- <li><a href="http://www.puschelreich.de/katzenblog/index.html">Katzenblog</a></li>
- <li><a href="http://www.puschelreich.de/Kontakt.php">Kontakt</a></li>
- </ul>
- </nav>
- <section>
- <h1>A-Wurf vom 29.03.2016</h1>
- <div id="conti">
- <figure role="group">
- <img src="http://puschelreich.de/Akira/Akira-4Jahre.jpeg">
- <figcaption>
- <b>Champion</b> vom Pfotenreich Akira<br><br>
- Geburtsdatum: 03.03.2015<br><br>
- Farbe: black torbie/MC
- </figcaption>
- </figure>
- <figure role="group">
- <img src="https://www.puschelreich.de/Balou/Balou-2018-06-03-15-04-41%20(2).jpg">
- <figcaption>
- Balou vom Puschelreich<br><br>
- Geburtsdatum: 29.01.2015<br><br>
- Farbe: black silver tabby
- </figcaption>
- </figure></div>
- <img id="plus" src="http://puschelreich.de/Bilder/plus.png">
- <p><a href="https://www.puschelreich.de/puschels/Katzen%20/vom%20pfotenreich%20akira/index.html">
- vom Pfotenreich Akira</a><b> + </b><a href="https://www.puschelreich.de/puschels/kastraten/balou.html">
- Balou vom Puschelreich</a></p>
- <hr/>
- <p><p><b>Bildergalerie:</b></p></p>
- <div id="bildergalerie">
- <a href="https://www.puschelreich.de/Bilder/wuerfe/awurf/aladinundakiro-gr.jpg" rel="lightbox[gruppenfoto]" alt="Aladin und Akiro" title="Aladin und Akiro">
- <img src="https://www.puschelreich.de/Bilder/wuerfe/awurf/aladinundakiro-kl.jpg" width="200" height="113"></a>
- <a href="https://www.puschelreich.de/Bilder/wuerfe/awurf/amira-akimba-apollo-gr.jpg" rel="lightbox[gruppenfoto]" alt="Amira, Akimba und Apollo" title="Amira, Akimba und Apollo">
- <img src="https://www.puschelreich.de/Bilder/wuerfe/awurf/amira-akimba-apollo-kl.jpg" width="200" height="113"></a>
- </div>
- </section>
- <aside>
- <a href="https://www.puschelreich.de/Bilder/wuerfe/awurf/awurfgruppe-gr.jpg" rel="lightbox[gruppenfoto]" alt="Gruppenfoto A-Wurf" title="Gruppenfoto A-Wurf">
- <img src="https://www.puschelreich.de/Bilder/wuerfe/awurf/awurfgruppe-kl.jpg" width="200" height="130"></a>
- <a href="https://www.puschelreich.de/Bilder/wuerfe/awurf/awurfgruppe2-gr.jpg" rel="lightbox[gruppenfoto]" alt="Gruppenfoto A-Wurf" title="Gruppenfoto A-Wurf">
- <img src="https://www.puschelreich.de/Bilder/wuerfe/awurf/awurfgruppe2-kl.jpg" width="200" height="104"></a>
- <a href="https://www.puschelreich.de/Bilder/wuerfe/awurf/awurfgruppenfoto3-gr.jpg" rel="lightbox[gruppenfoto]" alt="Gruppenfoto A-Wurf" title="Gruppenfoto A-Wurf">
- <img src="https://www.puschelreich.de/Bilder/wuerfe/awurf/awurfgruppenfoto3-kl.jpg" width="200" height="356"></a>
- </aside>
- </div>
- <?php include ("../../../footer.html"); ?>
- </div>
- <script src="https://puschelreich.de/lightbox/js/lightbox-plus-jquery.min.js"></script>
- </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;
- }
- #wuerfe a {
- Color: black;
- }
- aside {
- background-color: #808000;
- width: 175px;
- display: flex;
- flex-direction:column;
- align-content: center;
- align-items: center;
- }
- aside>img,
- aside>a {
- margin-top: 20px;
- }
- 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;
- }
- #bildergalerie {
- display: flex;
- justify-content: space-around;
- }
- #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);
- }
- /* Ab hier sind die Funktionen für Hover */
- #conti{
- margin: auto;
- margin-top:10px;
- overflow:hidden;
- display: flex;
- justify-content: space-around;
- }
- figure{
- width: 200px;
- height: 230px;
- overflow:hidden;
- }
- img{
- width:100%;
- overflow:hidden;
- }
- figcaption{
- padding:10px;
- text-align:center;
- transition:all 1s;
- width:calc(100% - 20px);
- }
- figure:hover > figcaption{
- transform: translateY(-100%);
- transition:all 1s;
- background:white;
- }
- #plus {
- width: 30px;
- height: 30px;
- position: relative;
- left: 47%;
- top: 50%;
- }