zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div-Box einblenden. Wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.07.2019, 10:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 36
Sunlion befindet sich auf einem aufstrebenden Ast
Standard 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;}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.07.2019, 12:30
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.918
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Sunlion Beitrag anzeigen
Kann jemand erkennen, wo der Fehler liegt?
Nicht am CSS Code
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.07.2019, 12:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.07.2019, 13:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 36
Sunlion befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Grafiken
Dateityp: jpg webdesign1.jpg (46,2 KB, 1x aufgerufen)
Mit Zitat antworten
  #5 (permalink)  
Alt 18.07.2019, 13:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Sunlion Beitrag anzeigen
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 anzeigen
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 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.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.07.2019, 13:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 36
Sunlion befindet sich auf einem aufstrebenden Ast
Daumen hoch

Zitat:
Zitat von cloned Beitrag anzeigen
Das war vielleicht im letzten Jahrtausend 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>
Mit Zitat antworten
  #7 (permalink)  
Alt 18.07.2019, 15:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 18.07.2019, 15:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 36
Sunlion befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Sunlion (18.07.2019 um 15:26 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 19.07.2019, 08:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Sunlion Beitrag anzeigen
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...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.07.2019, 09:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 36
Sunlion befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 17:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:42 Uhr.