PX contre EM ... je suis perdu

Bonjour,

Voila je viens de coder mon premier site CSS ...
Evidement IE l'adore mais FF et les navigateurs Linux ne sont pas aussi enthousiastes !

Un coup ca passe sur FF mais ca ne passe plus sous IE, BREF ! Je suis perdu, j'ai beau jouer avec mes DIV, position et top rien n'est "universel"

J'ai donc entendu parler des EM pour le positionnement ... j'ai tenté de m'y appliquer mais je pense ne pas avoir une bonne base pour le site ... l'aurais-je mal pensé ?!
Du coup pour certains formulaire je suis passé directement via des <table> (oui c'est malheureux !)

Je recherche donc une personne qui pourrait m'épauler afin de me faire repartir sur de bonnes bases autant dans le monde du CSS que pour ce site ... (c'est un projet personnel)

Voici ce qui a été fait : Version Html-Css
Voici ce qu'il devrait donner niveau alignement : Le jpeg

Comme vous pouvez le constater les cadres "presentation" et "enregistrer DNS" on des espacements différent en fonction du navigateur, j'ai pourtant mis un valeur top en px ...

J'ai l'impression qu'il faut tout revoir et j'aurais besoin d'un d'entre vous que cela motiverait ... il n'est pas exclu qu'il y ai échanges de services.

(ceux qui fouilleront un peu comprendront qu'il y a beaucoup de trompe l'oeil et j'aimerais pouvoir corriger tout cela afin d'avoir un site complet CSS et valide)
Modifié par Loustick (08 Jan 2008 - 14:50)

Bonjour,

Dans l'ensemble ça me semble correct, mis à part:
- les liens vides (avec une image de fond pour seul intitulé);
- les blocs ou titres vides (avec une image de fond pour seul intitulé);
- les tailles de texte figées en pixels;
- certains blocs en hauteur fixe (en-tête, menu, pied de page...) et donc pas adaptables à la hauteur de leur contenu;
- différentes images sans texte alternatif.

Mais pour la mise en page CSS globale rien de catastrophique, ça me semble même pas mal.
Pour les deux tableaux utilisés dans le deuxième formulaire... que gênent-ils exactement? Je les trouve pas mal comme ça. Par contre des labels explicites pour le textarea et pour les cases à cacher (ce qui, pour ces dernières, augmenterait considérablement la surface cliquable), ça ne serait pas mal.

Merci pour cette réponse qui me remonte un peu le morale

Je suis assez exigeant avec moi même ... Le site parait correct sous IE ... Mais j'aimerais que les alignements ainsi que la structure soit rigoureuse et identique sur TOUS naviguateurs.

Je m'explique;

le cadre de presentation "host and sexy" est sur la même ligne que l'encadré du mot "Accueil" dans le menu. Ce même cadre s'arrête à la fin du menu (ceci est pour la position horizontale) (elle est ok)

Concernant la position verticale le cadre de présentation "H&S" (Host and sexy) est sur la même ligne que l'offre "2mois d'hébergement..."

Idem pour l'encadré du form "enregistrer votre Dns" sauf que l'offre qui est à sa droite (Champion) se décale en fonction du navigateur que l'ont utilise ... et cela me dérange ...

Il est est de même pour la dernière offre qui doit se caller en rapport avec le bouton "join us"

Autre chose aussi ... l'espacement entre le cadre de présentation et le cadre (form) d'enregistrement de domaine pose problème car il varie en fonction du navigateur.
Aussi lorsque je met une valeur top au cadre (form) d'enregistrement de domaine, le top ne débute pas a la fin du cadre presentation, c'est comme si il rognait sur le cadre de presentation ... en gros pour avoir 10px d'écart je dois en demander 20 ... (voila ce que j'appel trompe l'oeil)

Et concernant le formulaire DNS (oui je fais de plus en plus court lol), l'affichage des boutons "radio" et "plus d'extensions" varie encore une fois en fonction des navigateurs ...

J'ai déjà chipoté pdt des heures, d'où ma venue sur ce forum.

Pour les "liens vides" qu'est-il recommandé comme syntaxe .. vaut-il mieux mettre les <img> dans la partie html ?

Les blocs ou titres vides ... je ne cerne pas tout à fait ce qu'il est sous entendu ...

Merci déjà pour l'aide apportée, je suis difficile, j'en suis conscient mais il faut bien comprendre que si le site n'est pas rigoureux, les services ne le seront pas plus ... l'amalgame est vite fait dans la tête des gens.

Loustick a écrit :
Idem pour l'encadré du form "enregistrer votre Dns" sauf que l'offre qui est à sa droite (Champion) se décale en fonction du navigateur que l'ont utilise ... et cela me dérange ...

Pas remarqué de décalage horizontal avec Firefox 2, IE 6 et 7, Opera 9, Safari 3.

Par contre, tu as des différences d'écarts verticaux entre les différents blocs de contenu, avec notamment d'un côté FF 2, Opera 9 et Safari 3, et de l'autre IE 6 et 7.

Piste à suivre:
- concept de fusion des marges (recherche google...);
- concept de HasLayout (voir la FAQ du forum);
- influence du HasLayout sur la fusion des marges.
(Du moins si je ne tape pas à côté. )

Loustick a écrit :
Et concernant le formulaire DNS (oui je fais de plus en plus court lol), l'affichage des boutons "radio" et "plus d'extensions" varie encore une fois en fonction des navigateurs ...

Fixer (via CSS) une largeur en pixels ou pourcentages pour les boutons rectangulaires?

Loustick a écrit :
J'ai déjà chipoté pdt des heures, d'où ma venue sur ce forum.

Attention: le soin apporté au détail doit être fonction du projet. Si je code une interface pour une grosse entreprise qui attend des centaines de milliers ou des millions d'utilisateurs (au pif, disons voyages-sncf.com), il serait logique que le budget dégagé pour l'intégration prévoie le temps nécessaire au fignolage, à la gestion fine des vieux navigateurs, etc.
Si je crée ou refond un site pour une PME ou une TPE, passer trop de temps sur certains détails est un mauvais service rendu au client (car la note sera plus salée, et le retour sur investissement de ces fignolages pas du tout à la hauteur.
L'essentiel est d'avoir des compétences solides pour pouvoir code efficacement dès le départ pour arriver à un «socle commun» qui tient bien la route. Ensuite, le degré de gestion des détails dépendra du projet.

Loustick a écrit :
Pour les "liens vides" qu'est-il recommandé comme syntaxe .. vaut-il mieux mettre les <img> dans la partie html ?

Oui, balise <img> avec texte alternatif pertinent (peut-être pas une transcription complète du texte de l'image, mais un résumé correct de la fonction ou de la destination du lien).

Loustick a écrit :
Les blocs ou titres vides ... je ne cerne pas tout à fait ce qu'il est sous entendu ...

En fait je crois qu'il n'y en a qu'un: le header, qui transmet une information (nom du site) uniquement de manière visuelle, via une image de fond. La problématique est la même que pour les «liens vides».

Ok, merci pour toutes ces précisions ...

Sous IE et FF ca passe nickel maintenant mais apparement ca ne passe tjs pas sous les navigateurs LINUX (pour le positionnement vertical des div "pres","reg" et "join_us")

Y a-t-il tellement de différence niveau codage ?

Encore un piti soucis ... Mon footer ne suit pas la div "content" ou la div "join_us" je suis obligé d'appliquer un padding sur la div "join_us" sinon le footer rogne sur le bouton "rejoignez nous maintenant"

Quelqu'un aurait-il une idée ?


Une dernière question ... Je viens d'acquérir Dreamweaver Cs3 ... J'ai ouvert le site et son css via le logiciel, je vois que dans cette version il y a un assistant pour le placement des div etc ... Est-il correct et conseillé de l'utiliser ou alors il n'est pas fiable ?

Merci

Loustick a écrit :
Quelqu'un aurait-il une idée ?

Oui: revoir complètement le positionnement CSS pour cette page (et plus globalement réviser le positionnement CSS...).

Je m'excuse de ne pas l'avoir vu plus tôt et de ne pas t'avoir alerté là-dessus dès hier, mais pour le positionnement de tes éléments tu est tombé dans le piège des débutants: tu as tout positionné en absolu ou en relatif.

Alors soyons clair: c'est un très mauvais plan.

Le positionnement absolu est à manier avec des pincettes. Si on ne sait pas exactement ce que l'on fait avec et quels seront les effets de bords (et s'ils sont acceptables, si on peut le contenir, etc.), on se retrouve souvent avec un résultat problématique.

Le positionnement relatif est quelque chose qui s'utilise assez rarement, pour décaler un bloc par rapport à sa position naturelle ou bien pour qu'un bloc serve de référent pour ses enfants et descendants positionnés en absolu.
Ce n'est absolument pas un moyen d'espacer des blocs qui se suivent, comme tu l'utilises ici. Apprendre à utiliser la propriété CSS margin ne serait pas superflu.

Bref, il va falloir tout reprendre. Et avant ça, on fera les lectures qui vont bien. Par exemple:

Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe

Loustick a écrit :
je vois que dans cette version il y a un assistant pour le placement des div etc ... Est-il correct et conseillé de l'utiliser ou alors il n'est pas fiable ?

S'il s'agit d'un assistant pour modifier le code CSS pour un style ou un élément donné, sans avoir à taper directement le code, oui, pourquoi pas.
S'il s'agit d'un assistant pour positionner en absolu chaque élément de la page par rapport à la page entière, c'est très largement déconseillé.

Enfin, il est déconseillé d'utiliser le mode création (édition visuelle, abusivement dite «WYSIWYG») pour créer ses gabarits ou même ses pages, du moins si on veut maitriser un peu ce que l'on fait.

PS: au sujet des «navigateurs linux», les principaux navateurs sous Linux sont:
- Mozilla Firefox (même rendu que la version Windows);
- Konqueror (moteur de rendu proche de celui de Safari).
Si le site passe sous Firefox et Safari, on n'a généralement pas trop de souci à se faire.
Modifié par Florent V. (09 Jan 2008 - 22:36)

Bon bon bon ...

On va revoir tout ca ... mais juste a titre informatif ... Est-il possible d'avoir le rendu souhaité (cad celui cité plus haut --> JPEG) ou alors le site est mal pensé ...

Merci bcp d'avoir pris le temps de m'orienter

Loustick a écrit :
juste a titre informatif ... Est-il possible d'avoir le rendu souhaité

Seuls des alignements horizontaux parfaits des blocs de contenu seront passablement irréalisables.