28172 sujets

CSS et mise en forme, CSS3

Iframe pas de scroll sur iPhone, iPad etc.

Bonjour à tous !

Je me permets de vous écrire car je débute en CSS/html et ne trouve pas de solution à mon problème.

J'ai une page avec une iframe ; tout marche nickel sur mon navigateur mais sur l'iPad ou l'iPhone le scrolling ne marche pas.

Voici mon 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sans titre</title>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=1080" />
<link rel="icon" type="image/png" href="files/idl.ico" />
<link rel="stylesheet" type="text/css" href="../files/css/style_listing.css"  />
</head>

<body>
<div id="main" class="gradient">
<div id="idl1">
	<div id="header"><img src="../files/img/header.png" alt="photo header" width="980" height="180" /></div>
    
    <div class="wrapper">
		<div class="outer">
			<div class="inner">
                <ul>
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Présentation</a></li>
                    <li class="current"><a href="#">A vendre</a></li>
                    <li><a href="#">A louer</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="last"><a href="#">Notre sélection en saradaigne</a></li>
                </ul>
			</div>
		</div>
	</div>	
    	
</div><!-- end idl1 -->

<div id="idl2">

	<div id="maincontent"><iframe src="http://www.google.fr" frameborder="0" width="100%" height="100%"></iframe></div>
    
</div><!-- end idl2 -->

<div id="footer">

	<div id="footermain">
		<div><strong>Copyright</strong></div>
	</div>
    
</div><!-- end footer -->

</div><!-- end main -->
</body>
</html>



body {
	margin:0;
	background-color:#601117;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	-webkit-text-size-adjust: none; /* avoid iphone text enlargement */
}

/* shape */

#idl1 {
	position:relative;
	margin:auto;
	top:0px;
	width:980px;
	height:235px;
	border-left: 2px solid #540011;
	border-right: 2px solid #540011;
}

#idl2 {
	position:absolute;
	bottom: 52px; /* footer height */
	top: 235px; /* header height */
	width:100%;
	border-top: 2px solid #540011;
	border-bottom: 2px solid #540011;
}


#maincontent {
	position:relative;
	margin:auto;
	width:980px;
	border-left: 2px solid #540011;
	border-right: 2px solid #540011;
	background:#fff url('../img/bg.jpg') no-repeat center bottom;

}

#main {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
}

/* img */

a img {
	border: none;
}

img {
	border: none;
}

/* links */

a:link {
	color: #FFF;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #FFF;
}

a:hover {
	text-decoration: none;
	color: #FFF;
}

a:active {
	text-decoration: none;
	color: #FFF;
}

/* menu */

#main_menu {
	position:relative;
	margin:auto;
	width:907px;
}

.current a {
	color:#540011;
}

.wrapper {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.outer {
    clear: left;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0;
    position: relative;
}

.inner {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
}

ul {
	list-style:none;
	height:30px;
	margin-left:-40px;
	margin-top:13px;
	margin-bottom:12px;
}


li {
	height: 30px;
	float: left;
	position: relative;
	z-index: 100;
}

li a {
	display: block;
	padding: 7px 25px 7px 25px;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

li a:hover {
	color:#540011;
}

li + li {
	border-left: 1px solid #540011;
}

li.last {
	border-left: none;
	background-color:#790018;
}

li.last a {
	color:#FFF;
}

li.last a:over {
	color:#540011;
}

/* contact form */

#contactform {
	width:980px;
	margin:auto;
	position:relative;
	top:-785px;
	padding-left:20px;
}

#contactform input {
	padding: 8px 7px;
	border: 1px solid #511016;
	font-size:11px;
}

/* avoid safari mobile rounded corners */

input {
    -webkit-appearance: none;
    border-radius: 0;
}

/* footer */

#footer {
	width:100%;
	position:absolute;
    bottom: 0px;
	background-color:#790018;
	border-bottom: 2px solid #540011;
}

#footermain {
	width:980px;
	position:relative;
	margin:auto;
	text-align:center;
	color:#FFF;
	font-size:11px;
	line-height:20px;
	padding-top:5px;
	padding-bottom:5px;
}

/* background */

.gradient {
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 114, color-stop(0%, #79141c), color-stop(100%, #601117));
	background-image: -webkit-radial-gradient(center center, farthest-side, #79141c 0%, #601117 100%);
	background-image: -moz-radial-gradient(center center, farthest-side, #79141c 0%, #601117 100%);
	background-image: -ms-radial-gradient(center center, farthest-side, #79141c 0%, #601117 100%);
	background-image: -o-radial-gradient(center center, farthest-side, #79141c 0%, #601117 100%);
	background-image: radial-gradient(farthest-side at center center, #79141c 0%, #601117 100%);
}

/* miscellaneous */

.col {
	color:#540011;
	margin-left:5px;
	margin-right:5px;
}

.idl_button {
	background-color: #790018;
	color: #FFF;
	border: 1px solid #511016 !important;
	padding: 8px 25px 8px 25px !important;
}


D'avance un immense merci pour votre précieuse aide. Smiley smile
Modifié par thomasbess (19 Sep 2012 - 17:49)
Sujet clos
Aller à