zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tooltip Problematik mit den Bildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2013, 19:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard Tooltip Problematik mit den Bildern

Hallo miteinander,

ich verwende den folgenden css code:

HTML-Code:
div.image-overlay { float: left; }
div.image-overlay img { display:block; }
div.image-overlay p { position:relative; }
div.image-overlay p span { display:none; }
div.image-overlay p span div { width: 30px; }
div.image-overlay p:hover span { position:absolute; display:block; bottom:0; left:0; right:0; top:0; margin:auto; padding:40px; background:rgba(0,0,0,.5); color:#fff; }
HTML-Code:
<div class="image-overlay"><p><img src="grafics/news/1.jpg" alt="Bildbeschreibung"  /><span>...</span></p></div>
</body>
Das liefert folgendes, zufriedenstellendes Ergebnis:

Test

Allerdings erfordert die Seite, dass den images ein "float: left;" zugewiesen wird, was zu Komplikationen führt. Weiß jemand, wie sich dieses Problem in den Griff bekommen lässt?

Herzlichen Dank!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2013, 19:31
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Von welchen Komplikationen sprichst du, denn offensichtlich scheint es ja erst mal zu gehen, zumindest im FF23.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.08.2013, 19:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard

Die test.html Datei und das zugehörige css-file enthält kein "float: left;"

Hier die Problemversion:

Test2
Mit Zitat antworten
  #4 (permalink)  
Alt 17.08.2013, 19:55
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Du meinst das der graue Kasten bei hover nicht mit dem Inhalt mitwächst?

Dafür musst das bottom:0px entfernen in der CSS-Datei Stylsheet3 bei
div.image-overlay p:hover span, Zeile 26.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2013, 21:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard

Gemeint hab ich das anders, vielleicht war das ein Safari Problem. Aber dein Tipp hat zu einer Lösung geführt, die sich über die ursprüngliche Idee durchgesetzt hat Herzlichen Dank!
Mit Zitat antworten
  #6 (permalink)  
Alt 17.08.2013, 21:29
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Nur mal als Tipp: Wenn du Webseiten entwickelst solltest du am besten immer mit dem Firefox Browser testen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2013, 21:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard

Die Idee ist, Seiten im ersten Durchgang in Safari zu testen, da er meines Wissens die Standards optimal berücksichtigt. Später teste ich in unterschiedlichen Browsern und merze die kleinen Issues aus. Gibt es dagegen ein gutes Argument?
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2013, 21:37
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Ja. Du hast es bereits genannt.

Zitat:
da er meines Wissens die Standards optimal berücksichtigt
Das trifft so nur auf den Firefox zu.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 17.08.2013, 22:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2011
Beiträge: 41
Philidor befindet sich auf einem aufstrebenden Ast
Standard

Danke, dann sattel ich um.
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
Abstand zwischen zwei Bildern im Internet Explorer waltecp3 fidlerr879 CSS 8 01.05.2011 16:13
mysteriöser Hovereffekt bei Bildern smile! CSS 7 18.02.2010 18:28
Tooltip und IE xm22 CSS 6 03.02.2006 09:30
Variabler Zwischenraum von Bildern... kick CSS 13 02.02.2006 13:54
Tooltip für Spalten ? SolCom (X)HTML 0 21.11.2005 16:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:48 Uhr.