position: relative; left und top

Charmin

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>

Alles anzeigen

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%;
}

Alles anzeigen

Sempervivum

Vermutlich ist dies der Grund:

https://css-tricks.com/forums/topic/p…fter-page-load/

Zitat

I’m assuming that this “trick” requires a known height for the parent.

Aber Du willst ja wahrscheinlich nur das Plus-Zeichen vertikal zentriert zwischen die Bilder legen. Das kannst Du einfacher erreichen, wenn Du das Plus-Zeichen zwischen die beiden figure-Tags legst:

Code

                <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>
                    <img id="plus" src="http://puschelreich.de/Bilder/plus.png">
                    <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>

Alles anzeigen

und mit Flex geeignet ausrichtest:

Code

        #conti {
            margin: auto;
            margin-top: 10px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #plus {
            width: 30px;
            height: 30px;
            margin-left: 5px;
            margin-right: 5px;
            /* position: relative;
            left: 47%;
            top: 50%; */
        }

Alles anzeigen

Charmin

Danke erstmal für deine Hilfe, ich habe das mal eingepflegt aber wenn ich die Werte ändere,

bekomme ich das Kreuz nicht verschoben.

Code über Pen

Sempervivum

Wo möchtest Du das Kreuz denn hin haben? Weil Du ursprünglich top: 50% hattest, hatte ich vermutet, dass Du es vertikal zentriert haben willst?

Charmin

Ah ok, das waren noch die Werte zum ausprobieren.

Das Kreuz soll genau mittig zwischen die beiden Bilder sein.

Sempervivum

So?

https://codepen.io/Sempervivum/pen/JVxgYZ

Charmin

nicht ganz, ich habe in den obigen Beitrag ein Bild angehangen, dort wo ich das gelbe Kreuz gezeichnet habe

soll das schwarze Kreuz hin

Sempervivum

Verstehe nicht, genau da, wo das gelbe Kreuz in deinem Bild ist, ist das schwarze in meinem Codpen?

Sempervivum

Wird es bei dir vielleicht anders dargestellt? Welchen Browser benutzt Du?

Charmin

Habe es hinbekommen, musste noch mit margin-top auf die Position bringen.

Ich verwende Google Chrome und habe immer wieder Probleme das die Seite im Cache ist und

nicht genau weiß ob was verändert wurde oder nicht.

Wie macht ihr das?

Sempervivum

Mit Strg+F5 werden auch externe css- und js-Dateien neu geladen.

Jetzt mitmachen!

Tags