zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unerwünschter Rahmen um Bilder in Chrome unter Android

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.01.2016, 23:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.01.2016
Beiträge: 2
SkibbaSv befindet sich auf einem aufstrebenden Ast
Standard Unerwünschter Rahmen um Bilder in Chrome unter Android

Hallo,

ich sitze derzeit an einem Problem ein Gesamtbild mit unterschiedlichen Hoverbereichen zu erstellen. Ich habe mich für die Umsetzung mit einem zusammengesetzten Bild entschieden. Zur Problemdarstellung habe ich das Projekt einmal abstrahiert in der einfachsten Form online gestellt.

CSS-Problem

Hier der Inhalt der index.html:

HTML-Code:
<!doctype html>
<html lang="de">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Problem</title>
	<link href="template/css/stylesheet.css" type="text/css" rel="stylesheet" />
  </head>
  
  <body>

	<div class="header">
		CSS-Problem
	</div>
	
	<div class="text">
		Unten seht ihr ein zusammengesetztes Bild, um den dargestellten Hover-Effekt umsetzen zu können. Im Firefox sieht es auch alles aus wie gewünscht. Unter Android mit Chrome wird das zusammengesetze Bild jedoch durch einen Rahmen um die Einzelbilder zerschnitten. 
	</div>
	
	<div class="picture">
	
		<div class="green"><img class="green"></img><br><p>green</p></div>
		<div class="yellow"><img class="yellow"></img><br><p>yellow</p></div>
		<div class="red"><img class="red"></img><br><p>red</p></div>
		
	</div>
	
	<div class="footer">
		Ich komme einfach nicht drauf, wahrscheinlich mal wieder das berühmte Brett vorm Kopp. ;)
	</div>
	
  </body>
</html>
Und hier die zugehörige Stylesheet.css:

Code:
body
{
	background-color: #CCC;
}

img
{
	border: none !important;
	border: 0px !important;
	border-color: transparent !important;
}

.header
{
	width: 100%;
	height: 150px;
	background-color: #006900;
	color: #FFF;
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
	font-size: 40px;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	padding-top: 25px;
}

.footer
{
	margin-top: 100px;
	width: 100%;
	height: 90px;
	background-color: #333;
	color: #FFF;
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	padding: 15px;
}

.text
{
	width: 60%;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	color: #666;
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

.picture
{
	margin-top: 50px;
	width: 300px;
	height: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
	font-weight: bold;
	color: #FFF;
	border: 0px !important;
	border-color: transparent !important;

}

.picture .green
{
	text-align: left;
	color: transparent;
	line-height: 0px;
	width: 100px;
	height: 150px;
	float: left;
}

.picture .green:hover
{
	text-align: left;
	color: #006900;
	line-height: 14px;
	width: 100px;
	height: 150px;
	float: left;
}

.picture img.green
{
	background: url(../img/green_bw.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

.picture img.green:hover
{
	background: url(../img/green.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

.picture .yellow
{
	text-align: center;
	color: transparent;
	line-height: 0px;
	width: 100px;
	height: 150px;
	float: left;
}

.picture .yellow:hover
{
	text-align: center;
	color: #f7f700;
	line-height: 14px;
	width: 100px;
	height: 150px;
	float: left;
}

.picture img.yellow
{
	background: url(../img/yellow_bw.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

.picture img.yellow:hover
{
	background: url(../img/yellow.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

.picture .red
{
	text-align: right;
	color: transparent;
	line-height: 0px;
	width: 100px;
	height: 150px;
	float: left;
}

.picture .red:hover
{
	text-align: right;
	color: #f70000;
	line-height: 14px;
	width: 100px;
	height: 150px;
	float: left;
}

.picture img.red
{
	background: url(../img/red_bw.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

.picture img.red:hover
{
	background: url(../img/red.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}
Eigentlich scheint die Umsetzung so für mich perfekt zu funktionieren. Im Firefox-Browser auf dem Laptop auch unproblematisch. Die Kontrolle mit dem Smartphone lieferte jedoch die unerwünschte Darstellung von Rahmen um die jeweiligen Einzelbilder. Ursprünglich hatte ich gar keine border-Angaben in meiner css-Datei. Die sind nach Erkennen des Problems als Lösungsversuche nach und nach hinzugekommen. Wie ihr sehen könnt auch mit der Brechstange versucht ihm das auszutreiben. Wahrscheinlich sehe ich mal wieder den Wald vor lauter Bäumen nicht. Ich hoffe jemand hatte schon einmal ein ähnliches Problem oder kann zumindest einen Hinweis in die richtige Richtung liefern. Google und Forensuche haben mir leider nichts brauchbares geliefert mit den versuchten Suchkombinationen.

Hier noch ein Screenshot von meinem Smartphone:

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.01.2016, 23:17
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Vielleicht solltest du erstmal damit anfangen, wenn du keine Bilder benutzt, auch keine Bildelemente zu nutzen?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.01.2016, 23:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.01.2016
Beiträge: 2
SkibbaSv befindet sich auf einem aufstrebenden Ast
Standard

Exakt!

Immer schön sauber bleiben ...

... gilt auch fürs coden. Leider war nun jemand schneller. Hatte in der Zwischenzeit mal eine dringend benötigte Pause gemacht und mir das nochmal frisch angeschaut. Und siehe da, wie richtig von dir bemerkt bringt:

HTML-Code:
	<div class="picture">
	
		<div class="green"><div class="img_green"></div><br><p>green</p></div>
		<div class="yellow"><div class="img_yellow"></div><br><p>yellow</p></div>
		<div class="red"><div class="img_red"></div><br><p>red</p></div>
		
	</div>
mit der enstprechenden Änderung in der CSS:

Code:
.picture .img_green
{
	background: url(../img/green_bw.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

.picture .img_green:hover
{
	background: url(../img/green.png);
	background-repeat: no-repeat;
	border: none;
	float: left;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}
den gewünschten Erfolg. Hatte ja schon im Urin, dass es eine ganz peinliche Nummer wird. Also entschuldigt die Störung. Asche auf mein Haupt.

Edit: Hatte gehofft mir noch schnell selber antworten zu können, bevor es jemand anderes bemerkt. Aber vielleicht ist das so auch anderen eine Lehre.

Geändert von SkibbaSv (10.01.2016 um 23:32 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
android, bild, border, chrome, css, picture, rahmen, unterbinden

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
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 19:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 08:21
Unerwünschter Rahmen um DIVs wenn Supersized untergebaut deelite CSS 10 23.09.2011 15:16
transparenter Rahmen um Bilder TanjaP. CSS 12 02.08.2009 09:32
automatischen rahmen mit schatten um bilder newbie2004 CSS 2 20.10.2005 17:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:12 Uhr.