Beiträge von Kurtus

Kurtus · 20. April 2018

Konnte das mit dem Tooltip und verschwundenen Icons lösen:

Ich musste die Angabe opacity: 1;beim .tooltip {hinzufügen, damit ging es auch unter Joomla.

Danke nochmals für Eure Hilfe!

Kurtus

Kurtus · 20. April 2018

Hallo basti1012,

vielen Dank für Deine Bemühungen.

Die erste Variante mit der Sprechblase gefällt mir am Besten. Das war genau das was ich mir vorgestellt habe.

Muss als absoluter Laie jetzt nur noch herausfinden welche Teile, die zur Sprechblase gehören aus deinem Code ich in die CSS Datei kopieren muss und welche ich in der HTML-Datei zu ergänzen habe.

Auch an m.scatello herzlichen Dank für den Hinweis.

Ich habe das mit dem Tooltip mal ausprobiert, allerdings verschwinden das Icon bei mir, wenn ich den div-Container hinzufüge, hier am Beispiel des ersten Icons bei dem der Tooltip "test" erscheinen sollte:

HTML-Code:

HTML

<figure class="snip0067 red">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample2.jpg" alt="sample8" />
  <figcaption>
    <h2>Gabriel <span>Lee</span></h2>
    <p>I'm a genius, but I'm a misunderstood genius.</p>
    <div class="icons"><div class="tooltip"><i class="ion-ios-home"></i><span class="tooltiptext">test</span>
</div><a href="#"><i class="ion-email-unread"></i></a><a href="#"><i class="ion-ios-star"></i></a></div>
  </figcaption>
  <div class="position">Illustrator</div>
</figure>

CSS Code:

CSS

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

Alles anzeigen

Wahrscheinlich mache ich auch hier einen Denkfehler mit meinem Halbwissen.

Evtl. kann mir da jemand weiterhelfen, wo mein Fehler liegt.

Vielen Dank!

Kurtus

Edit:

in einer normalen HTML-Datei funktioniert es. allerdings wollte ich es in einem Beitrag in Joomla verwenden.

Hier verschwindet das Icon...

Kurtus · 19. April 2018

Ja, so etwas wie eine Sprechblase oder viereckiges Fenster, so dass man beim Überfahren des Icons, mit dem Mauszeiger, sofort die Info angezeigt bekommt.

Kurtus · 19. April 2018

Hallo liebe Experten,

ich habe auf der tollen Archivseite littlesnippets.net die Nummer 1067 gefunden und möchte diesen Schnipsel gerne in meine Homepage einbinden. Beim Überfahren mit der Maus (mouseover effect) werden drei Icons eingeblendet. Diese kann man mit einem Link hinterlegen.

Könnte mir jemand den Code so abändern, dass anstelle eines Links ein Popup Fenster erscheint, das - je nachdem welches Icon gerade mit der Mause angewählt wurde (mouseover) - die Telefonnummer, Adresse bzw EMail anzeigt?

Leider bin ich noch absoluter Anfänger und weit davon entfernt so etwas einfach umzusetzen...

Hier der Beispiel HTML-Code:

Code

<figure class="snip0067 red">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample2.jpg" alt="sample8" />
  <figcaption>
    <h2>Gabriel <span>Lavarez</span></h2>
    <p>I'm a genius, but I'm a misunderstood genius.</p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-email-unread"></i></a><a href="#"><i class="ion-ios-star"></i></a></div>
  </figcaption>
  <div class="position">Illustrator</div>
</figure>
<figure class="snip0067 blue hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample3.jpg" alt="sample3" />
  <figcaption>
    <h2>Roland <span>Lee</span></h2>
    <p>I'm a simple man with complex tastes.</p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-ios-email"></i></a><a href="#"><i class="ion-ios-telephone"></i></a></div>
  </figcaption>
  <div class="position">Software Engineer</div>
</figure>
<figure class="snip0067 yellow"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample5.jpg" alt="sample5" />
  <figcaption>
    <h2>Annie <span>Watkins</span></h2>
    <p>I'm just very selective about the reality I choose to accept. </p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-ios-email"></i></a><a href="#"><i class="ion-ios-telephone"></i></a></div>
  </figcaption>
  <div class="position">Accoutant</div>
</figure>

Alles anzeigen

und hier der Beispiel CSS-Code:

Code

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0067 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  background: #ffffff;
  color: #000000;
}

figure.snip0067 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

figure.snip0067 img {
  max-width: 100%;
  position: relative;
  display: block;
}

figure.snip0067:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 90%;
  z-index: 1;
  left: -20%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #fff;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: skewX(-30deg) translateX(-80%);
  transform: skewX(-30deg) translateX(-80%);
  -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
}

figure.snip0067 figcaption {
  padding-left: 30px;
  position: absolute;
  left: 0;
  top: 25%;
  width: 60%;
  z-index: 1;
  opacity: 0;
}

figure.snip0067 figcaption h2,
figure.snip0067 figcaption p {
  margin: 0;
  text-align: left;
  padding: 5px 0 0;
  width: 100%;
}

figure.snip0067 figcaption h2 {
  font-size: 1.4em;
  font-weight: 300;
  text-transform: uppercase;
}

figure.snip0067 figcaption h2 span {
  font-weight: 800;
}

figure.snip0067 figcaption p {
  font-weight: 500;
  font-size: 0.9em;
  opacity: 0.8;
}

figure.snip0067 figcaption .icons {
  width: 100%;
  padding: 8px 0;
}

figure.snip0067 figcaption .icons i {
  display: inline-block;
  font-size: 20px;
  background: #000000;
  color: #ffffff;
  margin-right: 5px;
  opacity: 0;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
}

figure.snip0067 figcaption a {
  opacity: 0.7;
}

figure.snip0067 figcaption a:hover {
  opacity: 1;
}

figure.snip0067 .position {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 15px 30px;
  font-size: 0.9em;
  opacity: 1;
  font-weight: 500;
  color: #ffffff;
  background: #000000;
}

figure.snip0067.blue .icons i {
  background: #164666;
}

figure.snip0067.blue .position {
  background: #20638f;
}

figure.snip0067.red .icons i {
  background: #6d2018;
}

figure.snip0067.red .position {
  background: #962d22;
}

figure.snip0067.yellow .icons i {
  background: #924d10;
}

figure.snip0067.yellow .position {
  background: #bf6516;
}

figure.snip0067.green .icons i {
  background: #145b32;
}

figure.snip0067.green .position {
  background: #1e8449;
}

figure.snip0067:hover figcaption,
figure.snip0067.hover figcaption,
figure.snip0067:hover .icons i,
figure.snip0067.hover .icons i {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

figure.snip0067:hover:before,
figure.snip0067.hover:before {
  -webkit-transform: skewX(-30deg) translateX(0px);
  transform: skewX(-30deg) translateX(0px);
}

Alles anzeigen

ich würde mich freuen, wenn mir einer der Expertinnen oder Experten hierbei helfen könnten.

Liebe Grüße
Kurtus

Kurtus · 9. September 2015

Hi Sempervivum,

das habe ich ebenfalls probiert, damit geht es gar nicht mehr, weder mit dem direkten Link noch im Frame...

Update: ich hatte http:// nicht mit angegeben.

Nun funktioniert es mit Deinem Hinweis.

Vielen lieben Dank!!!

Kurtus

Kurtus · 9. September 2015

Der Pfad sollte stimmen, denn , wie schon erwähnt, wenn ich die Seite direkt aufrufe, sehe ich das Video.

Hier der direkte Pfad: http://www.mcv-moemlingen.de/startfiles/start_normal.html
Wenn man nur www.mcv-moemlingen.de eingibt, kommt die Seite im Frame aber eben ohne das Video wiederzugeben.

PS:
Nicht wundern, ich werde demnächst alles überarbeiten um auf HTML5 umzustellen, zurzeit ist die Homepage in der Programmierung noch total veraltet.

L.G.

Kurtus

Kurtus · 8. September 2015

Hallo liebe Experten,

ich habe die Homepage meines Vereins noch in Frames laufen. Ich weiß, dass dies nicht up to date ist, habe aber noch nicht die Zeit gefunden alles umzuschreiben.
Meine Menues liefen früher auch in Flash. Das habe ich bereits auf CSS3 umgestellt. Nun wollte ich auch die Videos von Flash auf HTML5 umstellen.

Deshalb habe ich den Video-Tag eingebaut:

HTML

<video autoplay width="1000" height="300">
<source src="film.mp4" type="video/mp4">
Ihr Browser kann dieses Video nicht wiedergeben.
</video>

Wenn ich die html-Seite mit dem Video direkt aufrufe, funktioniert sie.
Sobald die html-Seite aber über mein Frameset aufrufe läut das Video nicht. Es erscheint nur ein schwarzes Viereck in der vorgegebene Größe.

Gibt es hier für eine Lösung, ohne dass ich auf Frames verzichten muss?

Vielen lieben Dank für jede Hilfe.

Kurtus

Beiträge von Kurtus

Hilfe bei Ausbau eines HTML-/CSS-Schnipsel

Hilfe bei Ausbau eines HTML-/CSS-Schnipsel

Hilfe bei Ausbau eines HTML-/CSS-Schnipsel

Hilfe bei Ausbau eines HTML-/CSS-Schnipsel

Video-Wiedergabe in einem Frame

Video-Wiedergabe in einem Frame

Video-Wiedergabe in einem Frame