zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Buttons gehen auf dem Ipad nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.03.2011, 22:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2011
Beiträge: 4
marmuel befindet sich auf einem aufstrebenden Ast
Standard 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3,00&nbsp;&euro;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;					Schrauben&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4 x 6<br>2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3,00&nbsp;&euro;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Schrauben&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4 x 6<br>2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6,90&nbsp;&euro;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rigips&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1 x 8<br>2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5,70&nbsp;&euro;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Schrauben&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4 x 10<br>2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4,60&nbsp;&euro;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Schrauben&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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&nbsp;&euro;&nbsp</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&copy</setl>
   <setl href="#"; style="position:fixed; left:757px; top:183px; heigt:30px; width:186px">Export<br>Lexware financial office&copy</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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.03.2011, 22:37
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.03.2011, 22:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2011
Beiträge: 4
marmuel befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 25.03.2011, 01:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.04.2005
Ort: Kuchen
Beiträge: 119
Dani@okraina befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 26.03.2011, 01:17
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:37 Uhr.