XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Div-Box einblenden. Wie? (http://xhtmlforum.de/showthread.php?t=73882)

Sunlion 18.07.2019 10:42

Div-Box einblenden. Wie?
 
Ich habe eine Div-Box, die zunächst unsichtbar ist und bei Mouseover eingeblendet werden soll. Aber irgendwas mache ich falsch, das Einblenden funktioniert nicht, die Box ist sofort sichtbar. Kann jemand erkennen, wo der Fehler liegt?

Code:

.link .subspalte2 {display: none; opacity: 0}

.link:hover .subspalte2 {display: table; opacity: 0.95; transition-duration: 1s;
transition-delay: 0.4s; transition: opacity 1s ease-in;}


protonenbeschleuniger 18.07.2019 12:30

Zitat:

Zitat von Sunlion (Beitrag 553774)
Kann jemand erkennen, wo der Fehler liegt?

Nicht am CSS Code

cloned 18.07.2019 12:46

Wofür wird hier display: table benötigt? Das ist eigentlich ein Wert der nie wirklich gebraucht wird (außer bei Spezialfällen)

Du kannst nicht zwischen display hin- und herschalten, du kannst lediglich die opacity animieren:

Code:

<div class="link">
  TEXT
  <div class="subspalte2">
 
  More text
  </div>

</div>

------

.link .subspalte2 {
opacity: 0;
transition: opacity 1s;
}
.link:hover .subspalte2 {
  opacity: 1;
}

Das Problem was du wohl als nächstes hast: Nein, eine schöne Lösung den Platz nicht zu belegen gibt es nicht.
Du kannst zB das Element absolut positionieren. Das ist aber je nach Layout nicht wirklich möglich.

Sunlion 18.07.2019 13:11

Liste der Anhänge anzeigen (Anzahl: 1)
Am besten, ich zeige mal, wie es aussehen soll. Es geht um ein Popup-Fenster, dass über den anderen erscheinen soll.
Deine CSS-Version habe ich ausprobiert, sie funktioniert leider auch nicht, das Fenster wird sofort ohne Verzögerung angezeigt.
Display: table wird benötigt, um die Icons (im Beispiel sind es zwei, es können aber auch mehr sein) anzuordnen.

cloned 18.07.2019 13:29

Zitat:

Zitat von Sunlion (Beitrag 553779)
Deine CSS-Version habe ich ausprobiert, sie funktioniert leider auch nicht, das Fenster wird sofort ohne Verzögerung angezeigt.

Gehe doch bitte auf jsfiddle.net und füge dort meinen Code ein. Das funktioniert schon.

Zitat:

Zitat von Sunlion (Beitrag 553779)
Display: table wird benötigt, um die Icons (im Beispiel sind es zwei, es können aber auch mehr sein) anzuordnen.

Das war vielleicht im letzten Jahrtausend :D einmal nötig, mit display: table ordnet man heute keine Bilder mehr an. Bilder werden automatisch ohne dein Zutun schon nebeneinander angezeigt. Du kannst auch flexbox verwenden um Elemente horizontal nach deinen Wünschen anzuordnen.

Sunlion 18.07.2019 13:46

Zitat:

Zitat von cloned (Beitrag 553780)
Das war vielleicht im letzten Jahrtausend :D einmal nötig, mit display: table ordnet man heute keine Bilder mehr an.

Es sind nicht nur Bilder, sondern mehrere verschachtelte Div-Boxen. Der Ausschnitt des von mir gezeigten Screenshots sieht so aus:

Code:


<div class="link">
        <a href="https://www.amazon.de" target="_blank" rel="noopener">
                <div class="linkimage">
                        <img src="images/amazon.jpg">
                </div>
                       
                <div class="linktext">
                        Amazon
                </div>
        </a>
                                       
                                       
        <div class="subspalte2" id="desktop">
                <div class="link">
                        <a href="https://www.amazon.de" target="_blank" rel="noopener">
                                <div class="linkimage">
                                        <img src="images/amazon.jpg">
                                </div>
                                                       
                                <div class="linktext">
                                        Amazon
                                </div>
                        </a>
                </div>                                               
                                               
                <div class="link">
                        <a href="https://de.camelcamelcamel.com" target="_blank" rel="noopener">
                                <div class="linkimage">
                                        <img src="images/ccc.jpg">
                                </div>
                                                       
                                <div class="linktext">
                                        Günstigstes Angebot
                                </div>
                        </a>
                </div>
        </div>
</div>


cloned 18.07.2019 15:10

Egal ob div- oder img-Tags, du brauchst für dein simples Layout keinesfalls display: table. Das ist einfach nur unnötig, da ist es sinnvoller du verwendest moderne Standards:

Zuerst kann deine div-Suppe deutlich reduziert werden:

Code:

<div class="link">
        <a href="https://www.amazon.de" target="_blank" rel="noopener">
                <img class="linkimage" src="images/amazon.jpg">                       
                <p class="linktext">
                        Amazon
                </p>
        </a>
                                                                               
        <div class="subspalte2" id="desktop">
                <a href="https://www.amazon.de" target="_blank" rel="noopener" class="link">
                        <img src="images/amazon.jpg"  class="linkimage">
                        <p class="linktext">
                                Amazon
                        </p>
                </a>

                <a href="https://de.camelcamelcamel.com" target="_blank" rel="noopener" class="link">
                        <img src="images/ccc.jpg" class="linkimage">                                                       
                        <p class="linktext">
                                Günstigstes Angebot
                        </p>
                </a>
        </div>
</div>

Hier kann eventuell statt bild + Absatz auch <figure>-Tag verwendet werden, müsste man sich im Detail ansehen.
Was viel wichtiger ist: divs haben keinerlei Bedeutung, du kannst auch ein a-tag so stylen wie du möchtest.

Um zu deinem Ursprungsproblem zurück zu kommen: Für so popups würde ich eine JS-Lösung empfehlen, die so etwas bei Bedarf automatisch generiert.

Sunlion 18.07.2019 15:24

Sei mir bitte nicht böse, ich finde es wirklich nett, dass Du Dich mit der Optimierung des HTML-Aufbaus beschäftigst. Das geht bestimmt alles auch besser, aber das ist nicht nötig und auch viel zu aufwändig. Ich müsste dann über 200 Einträge umbauen, die eigentlich problemlos funktionieren und außerdem die Stylesheets für alle Elemente und mehrere Bildschirmauflösungen neu justieren.
Ich bin mir sicher, dass meine Herangehensweise nicht der letzte Schrei ist, denn die Seite ist schon ein paar Jahre alt und wird aktuell nur um die Popup-Fenster erweitert, und außerdem bin ich kein Webdesigner, ich wurschtel mich da eher so durch.
Die Seite funktioniert prima, das einzige, was nicht funktioniert, ist das Einblenden der Popupfenster. Deswegen möchte ich eigentlich nicht die ganze Seite umbauen.
Javascript hatte ich vor sieben Jahren mal in einer dreimonatigen Weiterbildung und habe seit dem nichts mehr damit gemacht und demzufolge auch keine Ahnung mehr. :?

cloned 19.07.2019 08:58

Zitat:

Zitat von Sunlion (Beitrag 553784)
Sei mir bitte nicht böse

Ich bin dir nicht böse, siehe es einfach als nett gemeinten Hinweis. Sobald du eine Seite hast die auch gut über google gefunden werden soll kannst du dir diesen Hinweis dann zu Gemüte führen (der gilt ja nicht nur für so Popups sondern generell für Websites). So lange die Seite funktioniert und es dir passt kannst du es natürlich so lassen wie du willst.

Wenn du kein JS kannst dann hilft es wohl auch nichts wenn man dir eine Library verlinkt? https://popper.js.org/index.html
Aber das wäre der Weg den du nehmen müsstest...

Sunlion 19.07.2019 09:02

Danke Dir!
Ich habe noch einen weiteren Hinweis erhalten, der in etwa Deinem Code entspricht, der aber trotzdem nicht funktioniert. Also werde ich wohl Grundlagenforschung betreiben müssen und meine Seite mal auf das Nötigste herunterbrechen, um zu sehen, wo der Fehler liegt.
Ich melde mich wieder, wenn ich was gefunden habe.
Erst mal danke an alle!


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:16 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019