28172 sujets

CSS et mise en forme, CSS3

Css mobile

Bonjour,
Je suis en train de faire une page pour smartphone et je suis confronté aux problèmes de mise en page.
J'ai une première version basée sur des tableaux et css qui fonctionne parfaitement sur mon mobile mais elle ne passe pas le validateur.

Du coup, un cas de figure simple devient un casse tête.
Avec des tables, voici ce que ça donne:
<table width="100%"><tr><td align="center">Titre</td><td width="10"><img src="" width="10"></td></tr></table

Bref, un logo calé à droite et un texte sur la même ligne à gauche du logo centré dans l'espace restant.

D'après ce que j'ai vu les choses suivantes sont interdites:
<img align="right"
les tableaux
css display inline, block-inline
css float

Du coup, je sèche.

Merci de vos lumières.
Salut,

As tu un petit screen de ce que tu cherche à faire, histoire de pouvoir t'orienter plus facilement ? Smiley smile
Voilà Smiley smile

Comme je disais, sur la meme ligne un texte et un logo. Le logo calé à droite, le texte centré dans l'espace restant

upload/28929-Sans-titre.png
Administrateur
wAx a écrit :
D'après ce que j'ai vu les choses suivantes sont interdites:
<img align="right"
les tableaux
css display inline, block-inline
css float

Hello,

Que veux-tu dire par "interdites" ? Par qui ?
Hello,

Lorsque je dis interdit c'est d'une part par le validateur
Par exemple le code que j'ai donné dans mon premier post (qui fonctionne très bien sur mon htc) n'est pas validé car c'est un tableau avec une seule ligne.

Les autres propriétés css (les displays inline-block, les float) sont quant à elles non seulement refusées par le validateur mais également non suivies par mon smartphone.

J'ai également vu d'autres contraintes posées par le validateur, il demande à ce que les dimensions soient en % et em. Un style css avec un width:80px; ça lui plait pas

D'où le casse tête car sinon, en quelques minutes, j'avais une page correctement affichée sur mon smartphone Smiley decu

Merci d'avance
Administrateur
wAx a écrit :
Hello,

Lorsque je dis interdit c'est d'une part par le validateur
Par exemple le code que j'ai donné dans mon premier post (qui fonctionne très bien sur mon htc) n'est pas validé car c'est un tableau avec une seule ligne.

Si tu parles du validateur HTML du W3C, les tableaux sont tout à fait valides. Il nous faudrait des informations sur le doctype que tu as choisi

wAx a écrit :
Les autres propriétés css (les displays inline-block, les float) sont quant à elles non seulement refusées par le validateur mais également non suivies par mon smartphone.

Là aussi, il faudrait que tu nous éclaires sur le Validateur que tu as utilisé, puisque inline-block et float sont parfaitement valides en CSS.
Pour ce qui est de ton smartphone, ce sera moins évident en effet. Par contre ces propriétés sont reconnues depuis des lustres sur les smartphones. Lequel utilises-tu ?
Voici le doctype utilisé
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

Pour le validateur, c'est bien celui du w3c:
http://validator.w3.org/mobile/

Voici l'erreur remontée lorsque je mets un table tel que décrit dans mon premier message:
a écrit :
Table contains less than two tr elementsTABLES LAYOUT
Why?
A table with only one row is either the sign that the table is used:
to represent a list of items horizontally to control the relative position of various sections of the page
Both uses imply a layout based on tables. While most mobile devices support basic tables, they are rendered quite differently by different mobile browsers, and cannot be reliably used for layout. The table element should only be used - with care - to represent tabular data.


Pour le smartphone de test, c'est, pour l'intant, un HTC Touch (P3450)

Merci encore Smiley smile
Administrateur
C'est un choix mûrement réfléchi d'avoir choisi XHTML Mobile ? Smiley ohwell
Cela t'apporte quoi ?
Pas du tout !
Je découvre le monde de la page web mobile et j'ai lu que c'était le standard qu'il fallait suivre. Mais un choix sur lequel je veux bien être guidé Smiley jap
Administrateur
Ben j'aurais tendance à te conseiller un XHTML classique (transitionnel ou strict). Cela t'évitera de devoir gérer deux types de structure différentes (une pour le web et une pour le mobile), et c'est tout à fait transposable aux mobiles avec une feuille de style CSS mobile.
Modifié par Raphael (02 Jun 2010 - 14:28)
En fait, le projet consiste en un petit extranet. La version web existe deja et n'est pas transposable au mobile (usage massif du flash, beaucoup de données à afficher, ...)

Ce pages sont donc exclusivement orientées mobile.

J'ai lu qu'en utilisant un XHTML classique, le navigateur mobile ne "sait" pas que la page a été conçue pour le mobile et qu'il peut parfois prendre des libertés avec la mise en page pour recomposer la page dans un but mobile.

En fait je suis en train de me dire qu'en vouloir faire les choses "bien" c'est à dire partir dans les standards mobile, on arrive sur des blocages. Tu as surement raison, utiliser un XHTML classique tout en prenant soin de ne pas faire des choses top compliquée/tordues afin d'avoir un affichage le plus simple et compatible.

Merci de ton aide
Sujet clos
Aller à