|
|||
Buttons gehen auf dem Ipad nicht
Hallo zusammen,
ich habe eine html+css seite erstellt, welche ich gerne auf dem Safari-Browser des Ipads zeigen will. Leider gehen dort die Buttons nicht...Am Safari, Firefox, etc. am Mac geht alles. Vielen Dank an Euch ! Hier html: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <head> <title>iKasse</title> <link rel="stylesheet" type="text/css" href="../iKasse/iKasseStyle.css"> <style type="text/css"> </style> </head> <body> <div id="hintergrund"></div> <p> <!Calulator Buttons> <but href="#"; style="position:fixed; left:60px; top:316px">1</but> <but href="#"; style="position:fixed; left:160px; top:316px">2</but> <but href="#"; style="position:fixed; left:260px; top:316px">3</but> <but href="#"; style="position:fixed; left:60px; top:416px">4</but> <but href="#"; style="position:fixed; left:160px; top:416px">5</but> <but href="#"; style="position:fixed; left:260px; top:416px">6</but> <but href="#"; style="position:fixed; left:60px; top:516px">7</but> <but href="#"; style="position:fixed; left:160px; top:516px">8</but> <but href="#"; style="position:fixed; left:260px; top:516px">9</but> <but href="#"; style="position:fixed; left:60px; top:616px; heigt:30px; width:30px">*</but> <but href="#"; style="position:fixed; left:160px; top:616px">0</but> <but href="#"; style="position:fixed; left:260px; top:616px">#</but> <butok href="#"; style="position:fixed; left:357px; top:616px">OK</butok> <!Warengruppen Buttons> <war href="#"; style="position:fixed; left:500px; top:260px">Gruppe<br>A</war> <war href="#"; style="position:fixed; left:670px; top:260px">Gruppe<br>B<br></war> <war href="#"; style="position:fixed; left:840px; top:260px">Gruppe<br>C</war> <war href="#"; style="position:fixed; left:500px; top:416px">Gruppe<br>D</war> <war href="#"; style="position:fixed; left:670px; top:416px">Gruppe<br>E</war> <war href="#"; style="position:fixed; left:840px; top:416px">Gruppe<br>F</war> <war href="#"; style="position:fixed; left:500px; top:572px">Gruppe<br>G</war> <war href="#"; style="position:fixed; left:670px; top:572px">Gruppe<br>H</war> <war href="#"; style="position:fixed; left:840px; top:572px">Gruppe<br>I</war> <!Display Kasse> <rechteck href="#"; style="position:fixed; padding: 1em; width: 264px; height: 170px; font-size: 10px;left:60px; top:67px; ">2 3,00 € Schrauben 4 x 6<br>2 3,00 € Schrauben 4 x 6<br>2 6,90 € Rigips 1 x 8<br>2 5,70 € Schrauben 4 x 10<br>2 4,60 € Schrauben 4 x 12</rechteck> <sum href="#"; style="position:fixed; width: 284px; height: 70px; font-size: 60px; font-weight: bold; text-align: center; text-align: right; bold;color: #000; left:60px; top:185px; ">46,40 € </sum> <storno href="#"; style="position:fixed; width: 135px; height: 30px; font-size: 20px; font-weight: bold; text-align: center; vertical-align: middle; bold;color: #C00 ; left:60px; top:272px; ">Storno</storno> <splitten href="#"; style="position:fixed; width: 135px; height: 30px; font-size: 20px; font-weight: bold; text-align: center; vertical-align: middle; bold;color: #090; left:210px; top:272px; ">Splitten</splitten> <!Settings> <set href="#"; style="position:fixed; left:500px; top:67px">Drucken</set> <set href="#"; style="position:fixed; left:670px; top:67px">Rabatt</set> <set href="#"; style="position:fixed; left:840px; top:67px">Restgeld</set> <set href="#"; style="position:fixed; left:500px; top:125px">Zusatztext</set> <set href="#"; style="position:fixed; left:670px; top:125px">Journal</set> <set href="#"; style="position:fixed; left:840px; top:125px">Kassenstand</set> <setl href="#"; style="position:fixed; left:500px; top:183px; heigt:30px; width:186px">Export<br>Lexware kassenbuch©</setl> <setl href="#"; style="position:fixed; left:757px; top:183px; heigt:30px; width:186px">Export<br>Lexware financial office©</setl> </p> </body> </html> und hier die CSS: HTML-Code:
@charset "ISO-8859-1"; /* CSS Document */ /* Marco Mueller 2011 */ /* Container Hintergrundbild */ * {margin:0px; padding:0px} #hintergrund { background-image: url(img/hg.png); background-repeat: no-repeat; width: 1024px; height: 768px; } /* Container Calculator Buttons */ but { border-top: 1px solid #CCC; background: #8d8f92; background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000000)); padding: 14px 28px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-top: #CCC 2px solid; /* Farbe und Art des oberen Rands */ border-left: #CCC 2px solid; /* linker Rand */ border-bottom: #CCC 2px solid; /* unterer Rand */ border-right: #CCC 2px solid; /* rechter Rand */ -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 48px; font-family: Helvetica; font-weight: bold; text-decoration: none; vertical-align: middle; text-align:center; } but:hover { border-top-color: #28597a; background: #28597a; border-top: #CCC 2px solid; /* Farbe und Art des oberen Rands */ border-left: #CCC 2px solid; /* linker Rand */ border-bottom: #CCC 2px solid; /* unterer Rand */ border-right: #CCC 2px solid; /* rechter Rand */ color: #ccc; } but:active { border-top-color: #1b435e; background: #1b435e; border-top: #CCC 2px solid; /* Farbe und Art des oberen Rands */ border-left: #CCC 2px solid; /* linker Rand */ border-bottom: #CCC 2px solid; /* unterer Rand */ border-right: #CCC 2px solid; /* rechter Rand */ } /* Container Calculator OK Button */ butok { border-top: 1px solid #CCC; background: #8d8f92; background: -webkit-gradient(linear, left top, left bottom, from(#0C0), to(#060)); padding: 14px 28px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: black; font-size: 48px; font-family: Helvetica; font-weight: bold; text-decoration: none; vertical-align: middle; text-align:center; } butok:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } butok:active { border-top-color: #1b435e; background: #1b435e; } /* Container Warengruppen Buttons */ war { width: 100px; height: 100px; border-top: 1px solid #CCC; background: #8d8f92; background: -webkit-gradient(linear, left top, left bottom, from(#8d8f92), to(#333)); padding: 14px 28px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 30px; font-weight: bold; font-family: Lucida Grande ; text-decoration: none; text-align: center; } war:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } war:active { border-top-color: #1b435e; background: #1b435e; } /* Container Display */ rechteck { background: -webkit-gradient(linear, left top, left bottom, from(#8d8f92), to(#383838)); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-width:2px; border-style:solid; border-color: #383838; font-family: Helvetica; color: #CCC; } sum { -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #CCC; border-radius: 5px; border-width:2px; border-style:solid; border-color: #383838; font-family: Helvetica; } storno { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-width:2px; border-style:solid; border-color: #383838; font-family: Helvetica; } storno:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } storno:active { border-top-color: #1b435e; background: #1b435e; } splitten { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-width:2px; border-style:solid; border-color: #383838; font-family: Helvetica; } splitten:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } splitten:active { border-top-color: #1b435e; background: #1b435e; } /* Container Einstellung */ set { width: 100px; height: 15px; border-top: 1px solid #CCC; background: #8d8f92; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#aaacaf)); padding: 14px 28px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: black; font-size: 14px; font-family: Lucida Grande; text-decoration: none; text-align: center; } set:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } set:active { border-top-color: #1b435e; background: #1b435e; } /* Container Lexware-Buttons */ setl { width: 100px; height: 30px; border-top: 1px solid #CCC; background: #8d8f92; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#aaacaf)); padding: 14px 28px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: black; font-size: 14px; font-family: Lucida Grande; text-decoration: none; text-align: center; vertical-align: top; } setl:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } setl:active { border-top-color: #1b435e; background: #1b435e; }
__________________
Gruss & Danke Marco |
Sponsored Links |
|
|||
Du verwendest Elemente, die XHTML Transitional NICHT kennt, z. B. "war, storno, but" etc. Ersetze das durch ein jeweils gültiges Element in diesem definierten Dokumentenraum. ( div, versehen mit einer jeweiligen Klasse "war" etc. böte sich an.
Darüber hinaus verwendest Du Verweiseigenschaften (href), die allgemein dem Element a vorbehalten sind.... Mein Vorschlag: Packe folgendermaßen: Code:
.but { width: 20px; height: 20px; -----irgendwas } .but a { display:block; width: 100%; height: 100%; ----irgendwas; ... }
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
Hallo Andreas
vielen Dank für Deine Rückmeldung Ach Du sch... Da merke ich doch, dass ich Anfänger bin und keine Ahnung habe... Ich habe es versucht, habe es aber nicht hinbekommen, da ich mit der <div> Geschichte nicht firm bin... Gruss Marco
__________________
Gruss & Danke Marco |
|
|||
Da kannst du ja damit anfangen Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
__________________
Gruß Dani |
|
||||
Naja, sein Problem wird bleiben, weil: der iOS Safari (auf iPad, iPhone und iPod Touch) interpretiert :hover anders, nämlich gar nicht.
Wenn man den Elementen aber mit z.B. jQuery ein simples click() Event zuweist (ohne Aktion), dann funktioniert es witzigerweise. HTML-Code:
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { $("#mainnav li").click(function(){ /* Das reicht schon ... strange, aber wahr */ }); }
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Text neben Buttons ausrichten | red1854 | CSS | 0 | 13.09.2008 00:51 |
Ausrichtung von Submit Buttons | manuu | CSS | 5 | 01.02.2008 21:27 |
Div box dem inhalt anpassen? | homezonebenny | CSS | 1 | 29.11.2007 10:11 |
Problem mit dem Menü [erledigt] | Julian | CSS | 2 | 16.01.2006 00:27 |
Problem mit Buttons / Hintergrund - Felder verschieben!? | Hisky | CSS | 3 | 10.05.2005 21:42 |