Beiträge von Charmin

Charmin · 13. Juni 2019

Guten Abend,

ich habe hier vor kurzem (finde ich leider nicht mehr) gelesen, das die gewünschten Bilder von einem Ordner der auf dem Server liegt

automatisch auslesen kann und die werden auf der Seite angezeigt.

Allerdings kenne ich die Funktion nicht.

Kann mir einer weiterhelfen?

Beste Grüße

Charmin · 13. Juni 2019

Ich habe heute bissel gefummelt, so habe ich jetzt die HTML

Code

<div class="beschreibung-slideshow">
    <div class="beschreibung">
<h1>Jugendchampion</h1>
<h3>Midnightfires Shadow</h3><br>
<h4>
Geburtstag: 19.04.2018<br>
Geschlecht: männlich<br>
Farbe: black white<br>
Gewicht: 6,3 kg (08.06.2019)<br>
Status: wohnt im Puschelreich<br><br>
Gesundheitszeugnis:<br></h4>
HCM1: N/N<br>
Polyzystische Nierenerkrankung: N/N<br>
Pyruvatkinase-Defizienz: N/N<br>
Progressive Retinaatrophie: N/N<br>
Spinale Muskelatrophie: N/N<br>
Glycogenspeicherkrankheit: N/N<br>
Blutgruppe: A - Genotyp N/N<br>
HCM-Schall 2019: negativ<br>
PKD-Schall 2019: negativ<br>
HD-Röngten 2019: rechts Grad 2 und links Grad 1<br><br>
<br>
    </div>
    <div class="slideshow">
            <div class="pic-wrapper">
         <figure class="pic-1" style="background-image: url(http://puschelreich.de/Bilder/shadow/shadow1-350.jpg)"></figure>
         <figure class="pic-2" style="background-image: url(http://puschelreich.de/Bilder/shadow/shadow2-350.jpg)"></figure>
         <figure class="pic-3" style="background-image: url(http://puschelreich.de/Bilder/shadow/shadow3-350.jpg)"></figure>
         <figure class="pic-4" style="background-image: url(http://puschelreich.de/Bilder/shadow/shadow4-350.jpg)"></figure>
        </div></div>

Alles anzeigen

Jetzt habe ich in der CSS bissel mit display: flex; gespielt, ich bekomme das allerdings nicht hin obwohl ich schon tausende Beschreibungen

gelesen habe

Vielleicht kann mir einer helfen.

Als class muss ich doch

.beschreibung-slideshow nehmen, oder?

Charmin · 12. Juni 2019

ok, super das hat schon mal geklappt, ich habe auch das Problem mit pic-wrapper entdeckt.

Dann habe ich die CSS geöffnet und habe folgenden Code:

Code

.pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

So, ich würde jetzt behaupten das man den Container irgendwie im Hintergrund bringen muss?

Erst dachte ich, ich muss width und height auch auf 350px anpassen, das hat aber leider nicht geklappt.

Charmin · 10. Juni 2019

Ich muss nochmal nerven, ich habe soeben noch ein Fehler gefunden.

Ich habe dazu ein Bild eingefügt. Alles was unter der gelben Linie ist, kann ich Links

anklicken, alles was darüber ist nicht.

Zum Beispiel kann ich nicht auf Ausstellungserfolge klicken.

Ich vermute mal das es noch an der obigen Funktion liegt.

https://www.puschelreich.de/pu…tfires%20shadow/index.php

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: 4;
}

aside {
    flex: 1;
}

header {
    /* background-color: yellow; */
    background-image: url(Homepage/shadow-hintergrund.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: 19em;
   /* 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: 230px;
}

#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;
    display: flex;
    flex-direction:column;
    align-content: center;
    align-items: center;
    }

    aside>img,
        aside>a {
            margin-top: 20px;
            padding-left: 5px;
            padding-right: 5px;
        }

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section h4 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section p {
    padding-bottom: 1em;
}

#link {
    display: flex;
    justify-content: center;
}

#bildergalerie {
    display: flex; 
    flex-flow: row wrap;
  justify-content:space-around;
   
    /* display: flex;
    justify-content: space-around;*/
}

#starkeschrift {
    font-weight: bold;
}

#table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

#table table, th, td {
    border: 1px solid orange;
    padding: 5px;
}

#table tbody tr:hover {
    background: yellow;
}

footer {
    background-color: brown;
    background-image: url(Bilder/hintergund-grey.png);
    text-align: center;
    color: white;
    clear: both;
}

#wrapper {
   /* background-color: #eeeeee; */
    width: 76em;
    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;
  }
 
  #plus {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 90px;
  }
  
  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;
  }

  /*                               Slideshow mit Zoom-Effekt             */

.pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .slideshow figure {
    position: absolute;
    top: 2em;
    left: 25em;
    width: 350px;
    height: 350px;
    opacity: 0;
    /*animation*/
    
    animation: slideShow 24s linear infinite 0s;
    -o-animation: slideShow 24s linear infinite 0s;
    -moz-animation: slideShow 24s linear infinite 0s;
    -webkit-animation: slideShow 24s linear infinite 0s;
  }
  
  .slideshow figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
  }
  
  .slideshow figure.pic-1 {
    opacity: 1;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .slideshow figure.pic-2 {
    animation-delay: 6s;
    -o-animation-delay: 6s;
    -moz--animation-delay: 6s;
    -webkit-animation-delay: 6s;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .slideshow figure.pic-3 {
    animation-delay: 12s;
    -o-animation-delay: 12s;
    -moz--animation-delay: 12s;
    -webkit-animation-delay: 12s;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .slideshow figure.pic-4 {
    animation-delay: 18s;
    -o-animation-delay: 18s;
    -moz--animation-delay: 18s;
    -webkit-animation-delay: 18s;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  /* keyframes*/
  @keyframes 
  slideShow {  0% {
   opacity: 0;
   transform:scale(1);
   -ms-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   transform:scale(1.1);
   -ms-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   transform:scale(1);
   -ms-transformm:scale(1);
  }
  }
   @-o-keyframes 
  slideShow {  0% {
   opacity: 0;
   -o-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -o-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -o-transformm:scale(1);
  }
  }
   @-moz-keyframes 
  slideShow {  0% {
   opacity: 0;
   -moz-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -moz-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -moz-transformm:scale(1);
  }
  }
   @-webkit-keyframes 
  slideShow {  0% {
   opacity: 0;
   -webkit-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -webkit-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -webkit-transformm:scale(1);
  }
  }

Alles anzeigen

Wie bekomme ich das am besten raus? Habe schon mit Entwicklertool bissel gespielt aber

keine Chance

Vielen Dank.

Charmin · 8. Juni 2019

Ich möchte mich recht herzlich bedanken, du hast mir um einiges weitergeholfen.

Zitat von Sempervivum

Hier wird die Sache mit der Spezifizität gut erklärt:

https://medium.com/@dte/unders…-specificity-a02238a02a59

Mein Englisch ist nicht so gut, ich werde mir den Link aber abspeichern und nach und nach ausarbeiten

Charmin · 7. Juni 2019

Zitat von Sempervivum

Ich glaube, jetzt verstehe ich, was Du vor hast: Auf der Jugendchampion-Seite gibt es oben rechts solch eine Slideshow mit Überblenden. ~~Und solch eine möchtest Du ganz unten auf der C-Wurf-Seite auch haben, wo "Bildergalerie:" steht?~~ Nur wenn Du das CSS auf der C-Wurf-Seite einfügst, zerlegt es dir oben die Bilder mit den Eltern.

So wäre der Einwand richtig

Charmin · 7. Juni 2019

Genau, ich habe jetzt bissel probiert und jetzt konnte ich das ein wenig trennen.

https://www.puschelreich.de/puschels/kitten/c-wurf/index.php

https://www.puschelreich.de/pu…tfires%20shadow/index.php (habe noch keine Verlinkung über die Homepage gemacht)

Die beiden Seiten wären so im Prinzip richtig aber ich habe das Gefühl das er die CSS ziemlich lange braucht zum Laden.

Kann das sein das ich die Klassen falsch bezeichnet habe? Das wäre Zeile 234

.slideshow figure { ...

Zweites Problem:

https://www.puschelreich.de/pu…tfires%20shadow/index.php

Die Bilder URL möchte ich in der HTML schreiben, da noch mehrere Seiten hinzukommen mit der gleichen Funktion aber immer unterschiedliche Bilder, also ich möchte im Prinzip

das folgende Code in der HTML haben und nicht in der CSS:

Code

.pic-1 {
    opacity: 1;
    background: url(http://www.puschelreich.de/Shadow/Shadow%201%20Woche.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-2 {
    animation-delay: 6s;
    -o-animation-delay: 6s;
    -moz--animation-delay: 6s;
    -webkit-animation-delay: 6s;
    background: url(http://cdn.morguefile.com/imageData/public/files/k/Koan/06/p/ea989990a29bb73aa78db9f8322b5631.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-3 {
    animation-delay: 12s;
    -o-animation-delay: 12s;
    -moz--animation-delay: 12s;
    -webkit-animation-delay: 12s;
    background: url(http://cdn.morguefile.com/imageData/public/files/t/TSmythe/06/p/74820906fce25071550b74b6773a0e19.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-4 {
    animation-delay: 18s;
    -o-animation-delay: 18s;
    -moz--animation-delay: 18s;
    -webkit-animation-delay: 18s;
    background: url(http://cdn.morguefile.com/imageData/public/files/i/Isbiliani/05/p/8787b7ac34a8de4c4aad6fe8a5d7e925.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

Alles anzeigen

und hier nochmal die aktuelle CSS

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: 4;
}

aside {
    flex: 1;
}

header {
    /* background-color: yellow; */
    background-image: url(Homepage/shadow-hintergrund.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: 19em;
   /* 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: 230px;
}

#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;
    display: flex;
    flex-direction:column;
    align-content: center;
    align-items: center;
    }

    aside>img,
        aside>a {
            margin-top: 20px;
            padding-left: 5px;
            padding-right: 5px;
        }

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section h4 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section p {
    padding-bottom: 1em;
}

#link {
    display: flex;
    justify-content: center;
}

#bildergalerie {
    display: flex; 
    flex-flow: row wrap;
  justify-content:space-around;
   
    /* display: flex;
    justify-content: space-around;*/
}

#starkeschrift {
    font-weight: bold;
}

#table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

#table table, th, td {
    border: 1px solid orange;
    padding: 5px;
}

#table tbody tr:hover {
    background: yellow;
}

footer {
    background-color: brown;
    background-image: url(Bilder/hintergund-grey.png);
    text-align: center;
    color: white;
    clear: both;
}

#wrapper {
   /* background-color: #eeeeee; */
    width: 76em;
    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;
  }
 
  #plus {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 90px;
  }
  
  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;
  }

  /*                               Slideshow mit Zoom-Effekt             */

.pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .slideshow figure {
    position: absolute;
    top: 2em;
    left: 25em;
    width: 350px;
    height: 350px;
    opacity: 0;
    /*animation*/
    
    animation: slideShow 24s linear infinite 0s;
    -o-animation: slideShow 24s linear infinite 0s;
    -moz-animation: slideShow 24s linear infinite 0s;
    -webkit-animation: slideShow 24s linear infinite 0s;
  }
  
  .slideshow figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
  }
  
  .pic-1 {
    opacity: 1;
    background: url(http://www.puschelreich.de/Shadow/Shadow%201%20Woche.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-2 {
    animation-delay: 6s;
    -o-animation-delay: 6s;
    -moz--animation-delay: 6s;
    -webkit-animation-delay: 6s;
    background: url(http://cdn.morguefile.com/imageData/public/files/k/Koan/06/p/ea989990a29bb73aa78db9f8322b5631.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-3 {
    animation-delay: 12s;
    -o-animation-delay: 12s;
    -moz--animation-delay: 12s;
    -webkit-animation-delay: 12s;
    background: url(http://cdn.morguefile.com/imageData/public/files/t/TSmythe/06/p/74820906fce25071550b74b6773a0e19.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-4 {
    animation-delay: 18s;
    -o-animation-delay: 18s;
    -moz--animation-delay: 18s;
    -webkit-animation-delay: 18s;
    background: url(http://cdn.morguefile.com/imageData/public/files/i/Isbiliani/05/p/8787b7ac34a8de4c4aad6fe8a5d7e925.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  /* keyframes*/
  
  @keyframes 
  slideShow {  0% {
   opacity: 0;
   transform:scale(1);
   -ms-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   transform:scale(1.1);
   -ms-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   transform:scale(1);
   -ms-transformm:scale(1);
  }
  }
   @-o-keyframes 
  slideShow {  0% {
   opacity: 0;
   -o-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -o-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -o-transformm:scale(1);
  }
  }
   @-moz-keyframes 
  slideShow {  0% {
   opacity: 0;
   -moz-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -moz-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -moz-transformm:scale(1);
  }
  }
   @-webkit-keyframes 
  slideShow {  0% {
   opacity: 0;
   -webkit-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -webkit-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -webkit-transformm:scale(1);
  }
  }

Alles anzeigen

Charmin · 7. Juni 2019

Zitat von basti1012

Noch ein Hinweiß.

Wenn ich auf den Link Katzenblog klicke und dann da oben auf der Navigation Links anklicke gehen einige nicht. Zb Startseite,Puschel,Kontakt uvm

Ja, ich muss das noch alles nach und nach ändern, vorher war alles über Baukasten erstellt Danke für dein Hinweis.

Ich habe mal ein Bild eingefügt, so sieht das normalerweise aus, bevor ich den neuen Code im CSS eingefügt habe.

Sobald ich den Code einfüge, sieht das wieder so aus:

https://www.puschelreich.de/puschels/kitten/c-wurf/index.php

Der Code soll aber eigentlich für diese Seite sein, hier findet man auch die pic-1 etc.

https://www.puschelreich.de/pu…tfires%20shadow/index.php

Der neue Code geht ab Zeile 225 los, hier nochmal die CSS

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: 4;
}

aside {
    flex: 1;
}

header {
    /* background-color: yellow; */
    background-image: url(Homepage/shadow-hintergrund.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: 19em;
   /* 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: 230px;
}

#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;
    display: flex;
    flex-direction:column;
    align-content: center;
    align-items: center;
    }

    aside>img,
        aside>a {
            margin-top: 20px;
            padding-left: 5px;
            padding-right: 5px;
        }

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section h4 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section p {
    padding-bottom: 1em;
}

#link {
    display: flex;
    justify-content: center;
}

#bildergalerie {
    display: flex; 
    flex-flow: row wrap;
  justify-content:space-around;
   
    /* display: flex;
    justify-content: space-around;*/
}

#starkeschrift {
    font-weight: bold;
}

#table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

#table table, th, td {
    border: 1px solid orange;
    padding: 5px;
}

#table tbody tr:hover {
    background: yellow;
}

footer {
    background-color: brown;
    background-image: url(Bilder/hintergund-grey.png);
    text-align: center;
    color: white;
    clear: both;
}

#wrapper {
   /* background-color: #eeeeee; */
    width: 76em;
    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;
  }
 
  #plus {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 90px;
  }
  
  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;
  }

  /*                               Slideshow mit Zoom-Effekt - ab hier geht es los */             

  .pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  figure {
    position: absolute;
    top: 2em;
    left: 25em;
    width: 350px;
    height: 350px;
    opacity: 0;
    /*animation*/
    
    animation: slideShow 24s linear infinite 0s;
    -o-animation: slideShow 24s linear infinite 0s;
    -moz-animation: slideShow 24s linear infinite 0s;
    -webkit-animation: slideShow 24s linear infinite 0s;
  }
  
  figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
  }
  
  .pic-1 {
    opacity: 1;
    background: url(https://www.puschelreich.de/Shadow/Shadow%201%20Woche.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-2 {
    animation-delay: 6s;
    -o-animation-delay: 6s;
    -moz--animation-delay: 6s;
    -webkit-animation-delay: 6s;
    background: url(http://cdn.morguefile.com/imageData/public/files/k/Koan/06/p/ea989990a29bb73aa78db9f8322b5631.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-3 {
    animation-delay: 12s;
    -o-animation-delay: 12s;
    -moz--animation-delay: 12s;
    -webkit-animation-delay: 12s;
    background: url(http://cdn.morguefile.com/imageData/public/files/t/TSmythe/06/p/74820906fce25071550b74b6773a0e19.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-4 {
    animation-delay: 18s;
    -o-animation-delay: 18s;
    -moz--animation-delay: 18s;
    -webkit-animation-delay: 18s;
    background: url(http://cdn.morguefile.com/imageData/public/files/i/Isbiliani/05/p/8787b7ac34a8de4c4aad6fe8a5d7e925.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  /* keyframes*/
  
  @keyframes 
  slideShow {  0% {
   opacity: 0;
   transform:scale(1);
   -ms-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   transform:scale(1.1);
   -ms-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   transform:scale(1);
   -ms-transformm:scale(1);
  }
  }
   @-o-keyframes 
  slideShow {  0% {
   opacity: 0;
   -o-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -o-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -o-transformm:scale(1);
  }
  }
   @-moz-keyframes 
  slideShow {  0% {
   opacity: 0;
   -moz-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -moz-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -moz-transformm:scale(1);
  }
  }
   @-webkit-keyframes 
  slideShow {  0% {
   opacity: 0;
   -webkit-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -webkit-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -webkit-transformm:scale(1);
  }
  }
  */

Alles anzeigen

Vielen Dank für deine Hilfe.

Charmin · 6. Juni 2019

Hm, komisch das habe ich gemacht.

In der HTML

Code

<div class="pic-wrapper">
  <figure class="pic-1"></figure>
  <figure class="pic-2"></figure>
  <figure class="pic-3"></figure>
  <figure class="pic-4"></figure>
</div>

aber hier zerschießt der mir die Funktion figure

https://www.puschelreich.de/puschels/kitten/c-wurf/index.php

Charmin · 6. Juni 2019

Guten Abend liebe Community,

ich habe in meine CSS jetzt folgende Problematik.

Ich habe den Befehl Figure jetzt zwei mal drin aber die müssen unabhängig voneinander agieren.

Da das eine Figure für eine andere Seite gilt.

Ich hoffe konnte es einigermaßen verständlich erklären

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: 4;
}

aside {
    flex: 1;
}

header {
    /* background-color: yellow; */
    background-image: url(Homepage/shadow-hintergrund.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: 19em;
   /* 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: 230px;
}

#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;
    display: flex;
    flex-direction:column;
    align-content: center;
    align-items: center;
    }

    aside>img,
        aside>a {
            margin-top: 20px;
            padding-left: 5px;
            padding-right: 5px;
        }

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section h4 {
    color: black;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section p {
    padding-bottom: 1em;
}

#link {
    display: flex;
    justify-content: center;
}

#bildergalerie {
    display: flex; 
    flex-flow: row wrap;
  justify-content:space-around;
   
    /* display: flex;
    justify-content: space-around;*/
}

#starkeschrift {
    font-weight: bold;
}

#table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

#table table, th, td {
    border: 1px solid orange;
    padding: 5px;
}

#table tbody tr:hover {
    background: yellow;
}

footer {
    background-color: brown;
    background-image: url(Bilder/hintergund-grey.png);
    text-align: center;
    color: white;
    clear: both;
}

#wrapper {
   /* background-color: #eeeeee; */
    width: 76em;
    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;
  }
 
  #plus {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 90px;
  }
  
  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;
  }

  /*                               Slideshow mit Zoom-Effekt             */

  .pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    opacity: 0;
    /*animation*/
    
    animation: slideShow 24s linear infinite 0s;
    -o-animation: slideShow 24s linear infinite 0s;
    -moz-animation: slideShow 24s linear infinite 0s;
    -webkit-animation: slideShow 24s linear infinite 0s;
  }
  
  figurecaption {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
  }
  
  .pic-1 {
    opacity: 1;
    background: url(http://cdn.morguefile.com/imageData/public/files/g/GaborfromHungary/06/p/74fea178af5c36b5303625ffeacd8454.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-2 {
    animation-delay: 6s;
    -o-animation-delay: 6s;
    -moz--animation-delay: 6s;
    -webkit-animation-delay: 6s;
    background: url(http://cdn.morguefile.com/imageData/public/files/k/Koan/06/p/ea989990a29bb73aa78db9f8322b5631.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-3 {
    animation-delay: 12s;
    -o-animation-delay: 12s;
    -moz--animation-delay: 12s;
    -webkit-animation-delay: 12s;
    background: url(http://cdn.morguefile.com/imageData/public/files/t/TSmythe/06/p/74820906fce25071550b74b6773a0e19.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-4 {
    animation-delay: 18s;
    -o-animation-delay: 18s;
    -moz--animation-delay: 18s;
    -webkit-animation-delay: 18s;
    background: url(http://cdn.morguefile.com/imageData/public/files/i/Isbiliani/05/p/8787b7ac34a8de4c4aad6fe8a5d7e925.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  /* keyframes*/
  
  @keyframes 
  slideShow {  0% {
   opacity: 0;
   transform:scale(1);
   -ms-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   transform:scale(1.1);
   -ms-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   transform:scale(1);
   -ms-transformm:scale(1);
  }
  }
   @-o-keyframes 
  slideShow {  0% {
   opacity: 0;
   -o-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -o-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -o-transformm:scale(1);
  }
  }
   @-moz-keyframes 
  slideShow {  0% {
   opacity: 0;
   -moz-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -moz-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -moz-transformm:scale(1);
  }
  }
   @-webkit-keyframes 
  slideShow {  0% {
   opacity: 0;
   -webkit-transform:scale(1);
  }
   5% {
   opacity: 1
  }
   25% {
   opacity: 1;
  }
   30% {
   opacity: 0;
   -webkit-transform:scale(1.1);
  }
   100% {
   opacity: 0;
   -webkit-transformm:scale(1);
  }
  }

Alles anzeigen

Charmin · 22. Mai 2019

Zitat von Arne Drews

alt ist, wer der zeitlichen Entwicklung nicht mehr folgen kann.

Sehr schön geschrieben, das muss ich morgen meine Kollegen erzählen die kurz vor der Rente stehen und ich

jeden Tag immer wieder aufs neue alles erklären muss

Charmin · 20. Mai 2019

Diese Frage habe ich hier im Forum auch schon gestellt:

siehe hier: PHP Include oder readfile

Charmin · 12. Mai 2019

Hallo,

am besten mal dein Code hier posten, dann können die Profis

mit Sicherheit weiter helfen.

Beste Grüße

Charmin · 12. Mai 2019

Aus welchem Grund wird das gemacht?

Bewertet Google .php schlechter als .html?

Beste Grüße

Charmin · 2. Mai 2019

Am besten Code immer über den Button "Code" einfügen.

Wie schaut deine HTML aus?

Und was ist aktuell genau dein Ziel?

Charmin · 1. Mai 2019

Zeige mal dein Code, wie weit dein aktueller Stand ist.

Ansonsten: CSS in HTML einbinden

Charmin · 28. April 2019

Zitat von Stuffcon

benutze ich jetzt einen Homepage-Baukasten von One.com.

Ich bin auch bei one.com und habe am Anfang diesen Baukastenprinzip angewendet, allerdings mit der Zeit kommt man an seine Grenzen,

deswegen baue ich grad alles nach und nach um und programmiere selbst.

Du kannst den jeweiligen Codeschnipsel als Code-Komponente auf deine Homepage einpflegen, mehr kannst du da leider nicht machen.

Beste Grüße

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?

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

Charmin · 27. April 2019

Ah ok, das waren noch die Werte zum ausprobieren.

Das Kreuz soll genau mittig zwischen die beiden Bilder sein.

Beiträge von Charmin

Bilder vom Server laden und auf der Homepage anzeigen

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

CSS gleiche Befehle Figure

Ab wann ist man "Alt"

Menü statt auf jeder html Seite nur in einer Datei

xml feed style

.php-Endung entfernen

Website erstellen

Website erstellen

Bewegbare Karte "Slippy Map" auf Website einfügen.

position: relative; left und top

position: relative; left und top

position: relative; left und top