|
|||
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> 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; } Hier noch ein Screenshot von meinem Smartphone: |
Sponsored Links |
|
||||
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? |
Sponsored Links |
|
|||
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> 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; } 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) |
Stichwörter |
android, bild, border, chrome, css, picture, rahmen, unterbinden |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |