zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Infofenster reponsives Design

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.09.2018, 18:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.09.2018
Beiträge: 1
Steffen_1972 befindet sich auf einem aufstrebenden Ast
Standard Infofenster reponsives Design

Hallo Experten,

ich möchte auf meiner Webseite gerne Tooltip ähnliche Infofenster beim MouseOver einblenden.

Dies gelingt mit dem html-Code und der Css-Datei auch hervorragend auf Chrome, Firefox usw.

Wenn ich mir die Datei aber auf Android Chrome anschaue, wird der Text immer hinter der Grafik angezeigt. Ich habe vieles ausprobiert, leider ohne Erfolg.

Hier also meine Frage(n):

Wie kann ich das verhindern? Leider bin ch mit meinem dürftigen Wissen am Ende und hoffe, dass ich mich verständlich ausgedrückt habe.

HTML-Code:
<img src="https://goo.gl/YU8Vn2" alt="" usemap="#Map" />
<map name="Map" id="Map">

    <a class="info_r_l" href="#"><area alt="" title="" href="" shape="poly" coords="106,43,123,44,122,58,107,60" ><span>laufen <br>23 km <br> 02:23:57 Stunden</span> </a>
	<a class="info_r_l" href="#"><area alt="" title="" href="" shape="poly" coords="106,13,123,14,122,28,107,28" ><span>Fahrrad <br>23 km <br> 01:23:57 Stunden</span></a>
	<a class="info_r_s" href="#"><area alt="" title="" href="" shape="poly" coords="6,43,23,44,22,58,07,60" ><span>schwimmen <br>2 km <br> 00:43:57 Stunden</span></a>
       </map>
<br>
und noch der CSS Code, damit es übersichtlich bleibt nur der "info_r_l", sie unterscheiden sich nur in der Farbwahl des Textes...
Code:
a.info_r_l
{
position:relative;
z-index:1;
background-color:#ff0; 
color:#2D006B; 
text-decoration:none;
} 

a.info_r_l:hover
{
z-index:2;
background-color:#C0FF3E;
} 

a.info_r_l span
{
display: none;
} 

a.info_r_l:hover span
{ 
display:block;
position:absolute; 
top:20em;
left:5em;
width:15em;
border:1px solid #12127D; 
background-color:#505050;
color:#d6d6d6; 
text-align: center;
padding: 5px;
font-size: 0.8em;
}
<!--Ende Laufen-->
Danke für die Rückantwort und Lösungsansätze

Steffen
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
design automatisch verlängern elias1993 CSS 4 06.05.2011 20:47
Design Scrollbalken in IE FF und O (mit Bildern) MarkusStar CSS 1 08.03.2009 15:27
Sitecheck: Barrierearm - Design - Ajax Schmidt Site- und Layoutcheck 16 21.08.2008 21:06
Design fertig aber welche Herangehensweise JanW1989 (X)HTML 12 28.08.2006 19:06
problem mit tableless design und breiter Tabelle im IE horizons CSS 14 06.04.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:35 Uhr.