position: relative; left und top

Charmin · 26. April 2019

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 · 26. April 2019

Vermutlich ist dies der Grund:

https://css-tricks.com/forums/…-with-it-after-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 · 27. April 2019

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 · 27. April 2019

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 · 27. April 2019

Ah ok, das waren noch die Werte zum ausprobieren.

Das Kreuz soll genau mittig zwischen die beiden Bilder sein.

Sempervivum · 27. April 2019

So?

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

Charmin · 27. April 2019

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 · 27. April 2019

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

Sempervivum · 27. April 2019

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

Charmin · 27. April 2019

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 · 27. April 2019

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

position: relative; left und top

Jetzt mitmachen!

Teilen

Tags