adaptation pour l'affichage

strongestman · 24/08/2011, 14h05

Bonjour,

Je suis entrain de coder des pages pour un site mobile dans le cadre de mon projet scolaire d'été. Je veux adapter l'affichage de mes pages aux écran des smartphones. Ce sont des pages simples en HTML5. Des réponses simples sont les bienvenues(je suis encore novice dans le domaine mobile

)

Voici le code HTML5

<!DOCTYPE HTML>
<html>

<head>
<meta charset="iso-8859-1">
<title> HTML5 sectionnement </title>
<link rel="stylesheet" href="css.css">
</head>

<body>

<header>
<h1> Header </h1>
</header>

<div id="container">

<nav>
<h3>Nav</h3>
<p> Lycée Jean Louis</p>
</nav>

<section>
<article>
<header>
<h1> Article Header </h1>
</header>
<p> premier article HTML5.</p>
<p> Démo pour Lycée Jean Louis</p>
<footer>
<h2> Article Footer</h2>
</footer>
</article>
</section>

<aside>
<h3> Aside </h3>
</aside>

<footer>
<h2> c'est le bas de la page </h2>
</footer>

</div>
</body>
</html>

et voici le code CSS

body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
width:90%;
border:solid;
border-color:#FFFFFF;
}

header {
background-color:#F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}

h2 {
text-align:center;
}
nav {
display:block;
width:25%;
float:left;
}

nav a:hover {
color:white;
background-color:#303030;
}
#container {width:100%;
background-color:#888;
}

section {
display:block;
width:50%;
float:left;
}

article { width:75%;
background-color:#eee;
display:block;
float:left;
}
article header {
display:block;
}

aside {
display:block;
width:25%;
float:left;}

Footer { clear:both;
display:block;
background-color:#345467;
color:#FFFFFF;
text-align:center;
}

C'est juste le début de développement mais quand j'ai fait les tests la page ne s'affiche pas centrée avec un HTC Chacha et on a besoin de je faire un back zoom pour voir toute la page. Y a t il une solution à l'aide d'un script par exemple.

Merci Beaucoup

24/08/2011, 14h05	#1
strongestman Invité de passage sam za Inscription : novembre 2009 Messages : 3 Détails du profil Informations personnelles : Nom : sam za Informations forums : Inscription : novembre 2009 Messages : 3 Points : 0 Points : 0	adaptation pour l'affichage Bonjour, Je suis entrain de coder des pages pour un site mobile dans le cadre de mon projet scolaire d'été. Je veux adapter l'affichage de mes pages aux écran des smartphones. Ce sont des pages simples en HTML5. Des réponses simples sont les bienvenues(je suis encore novice dans le domaine mobile ) Voici le code HTML5 <!DOCTYPE HTML> <html> <head> <meta charset="iso-8859-1"> <title> HTML5 sectionnement </title> <link rel="stylesheet" href="css.css"> </head> <body> <header> <h1> Header </h1> </header> <div id="container"> <nav> <h3>Nav</h3> <p> Lycée Jean Louis</p> </nav> <section> <article> <header> <h1> Article Header </h1> </header> <p> premier article HTML5.</p> <p> Démo pour Lycée Jean Louis</p> <footer> <h2> Article Footer</h2> </footer> </article> </section> <aside> <h3> Aside </h3> </aside> <footer> <h2> c'est le bas de la page </h2> </footer> </div> </body> </html> et voici le code CSS body { background-color:#CCCCCC; font-family:Geneva,Arial,Helvetica,sans-serif; width:90%; border:solid; border-color:#FFFFFF; } header { background-color:#F47D31; display:block; color:#FFFFFF; text-align:center; } h2 { text-align:center; } nav { display:block; width:25%; float:left; } nav a:hover { color:white; background-color:#303030; } #container {width:100%; background-color:#888; } section { display:block; width:50%; float:left; } article { width:75%; background-color:#eee; display:block; float:left; } article header { display:block; } aside { display:block; width:25%; float:left;} Footer { clear:both; display:block; background-color:#345467; color:#FFFFFF; text-align:center; } C'est juste le début de développement mais quand j'ai fait les tests la page ne s'affiche pas centrée avec un HTC Chacha et on a besoin de je faire un back zoom pour voir toute la page. Y a t il une solution à l'aide d'un script par exemple. Merci Beaucoup
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email