développer en css pour sauver le contenu

[nagafolk]

Moi, ce qui m'intéresse, c'est de pouvoir center un contenu quelle que soit la résolution.
La page qui motive ce topic élude la question, elle ne montre pas la solution CSS à ce souci très commun qui est réglé en deux coups de cuillère à pot par deux tables imbriquées.

body {margin:0px;padding:0px;text-align:center;}
#conteneur {width:xxx;position:relative;text-align:left; margin-left: auto; margin-right: auto;}

A lire: http://css.alsacreations.com/Faire-une- ... web-en-CSS

[Szarah]

Bin oui mais non hein nagafolk.

Le positionnement des DIV par attribution d'une classe, je connais par coeur.
Ce dont moi je parle c'est d'une solution de centrage des éléments qui rende le même visu partout, sans devoir penser à traiter spécialement tel ou tel Navigateur - même s'il est faiblard.

Là, je lis une bidouille qui passe outre aux lacunes de IE mais qui pervertit la pureté des CSS.
Des tableaux imbriqués ne bidouillent rien du tout et ne tiennent compte des spécificités d'aucun mauvais élève : c'est bien plus universel.

Mais merci

[dd32]

J'ai tout de même oublié de préciser qu'avant de lancer ce sujet, j'avais visité ce site : http://pompage.net/pompe/csspratique/

[Szarah]

C'est un excellent sujet, dd32, et de bonnes références à faire connaître.

Ce que moi je tiens à faire remarquer c'est que pour remplacer un tableau centreur de contenu, on est amenés à faire

body {
margin:50px 0px; padding:0px;
text-align:center;
}

à cause de IE5 : c'est donc un code spécifique, ce n'est pas ainsi qu'il faut faire en pure CSS.

Je supprimerai mes tableaux centreurs, qui sont universels et non spécifiques, quand IE5 aura été éradiqué, et je les remplacerai alors par un vrai centrage CSS. Faire autrement, c'est habituer les gens à mal coder en fonction d'un Navigateur dépassé.

[edupin]

Sinon on peut aussi s'aider en utilisant des tempaltes CSS toutes faites ou des générateurs de CSS, ne serait-ce que pour décortiquer le code et comprendre comment c'est construit :
http://www.presse-citron.net/?2005/12/16/500-faciliteurs-de-css

[Szarah]

C'est une excellente adresse, Edupin.

Les modèles proposent les organisations d'écran les plus courantes, et c'est CSS2 et XHTML 1.0 :

http://www.intensivstation.ch/en/templates/

A utiliser et à faire connaître ...

[edupin]

Oui pardon, j'ai oublié de citer intensivstation, et autres :
http://www.presse-citron.net/?2006/03/03/746-de-la-template-css-comme-s-il-en-pleuvait

[keishisis]

pour ma part j'ai changer mon site en css y'a 1 mois et demi

En 'y passant beaucoup et en m'arrachant les cheveux des fois a cause des interprétations naviguateur , je suis arrivé a faire ce que je voulais , avoir un design pus complexe mais beaucoup moins lourds en ce qui concerne le poids page car les pages sont plus de 2 fois moins lourdes qu'auparavant ex: la page d'accueil faisait 56 ko et maintenant avec le meme contenu ( voir plus meme ) je suis passer a 22 ko tout mouillé...
cela a pour effet de diminuer les echanges avec le serveur et de rendre la naviguation plus agreables avec les feulles de styles mis en cache.
en ce qui concerne le ration texte /code html , je suis passer de 11% de texte a 20.5% c'est deja ça de gagner ...en s'ameliorant et en maitrisant bien le css on pourrait arriver à des resultats tres interessants pourl 'utilisateurs et les moteurs ne peuvent qu'apprecier qu'on leur facilite le travail !

voila pour mon experience si ça peut aider àconvaincre eux qui doutent encore des bienfaits du css ....par ailleur j'utilise encore les tableaux pour des données tabulaires( prix, comparaison...) ce qui est logique

[luxe-campagne]

Moi, ce qui m'intéresse, c'est de pouvoir center un contenu quelle que soit la résolution.

* {margin: 0; padding: 0; font-weight: normal; list-style: none;}
html, body {width: 100%;height: 100%;}
body { text-align: center; }
#page {margin: 0 auto 0 auto ;width: XXXpx; text-align: justify}

C'est léger et ça centre n'importe quoi n'importe où horizontalement quel que soit la plate forme et le navigateur.

par contre pour centrer verticalement, je ne sais pas le faire si la hauteur du contenu n'est pas fixée en px...

[Szarah]

Merci, Luxe-campagne,
et en ce qui concerne le centrage vertical ... on fera comme si on n'en avait pas vraiment besoin, ce qui est vrai dans la plupart des cas.

[luxe-campagne]

moi j'en ai eu besoin pour un site le mois dernier, j'ai cherché cherché, et je n'ai rien trouvé de plus simple que les tables pour cela.
Enfin, ça m'a permis d'avancer un peu plus sur les fonctionnement des css !

[thierry8]

Oui pour l'alignement vertical en effet c'est particulier.
Ce qui est normal du fait qu'il s'agit d'un media extensible à "volonté" en hauteur.

Il existe plusieurs possibilité pour aligner verticalement un contenu en css.
Cependant la plupart posent des problèmes dès lors que l'on utilise IE.

C'est pour cela que l'alternative consiste donc bien à utiliser un tableau pour aligner verticalement le contenu souhaité.

[Benefsnet]

Je vais devoir m'y mettre un jour

[DaMonkey]

Il y a peu dans un autre post, j'ai parler du lancement de mon nouveau site web de petites annonces >>> ici <<<. Puis j'ai eut quelques critiques au niveau des couleurs et du design, et de nombreuses erreur au W3C. J'ai un peu envoyé balader les critiques d'erreurs WC, puis j'ai un peu réfléchi, et me suis dit, si tout le monde parle du CSS ici, CSS là que finalement c'est qu'il y a des avantages tout de même...

Alors voilà, je me suis lancé à pieds joints dedans... et je suis vraiment content de m'être lancé...

J'ai tenté de reproduire convenablement et dans l'art des choses la page d'index de mon site, qui comprend d'orgine près de 10 tables imbriquées (pour le design génaral extérieur) et pour les éléments internets de contenu, mais maintenant uniquement en CSS et des DIV !

C'est magnifique... même plus besoins d'une page template complexe de tableaux imbriqués dans dreamweaver, mon template c'est une page simple, balisée avec des nom compréhensif et plus claire en me permettant de me retrouver directement dans mon code html, et mon deuxième c'est ma feuille de style. C'est magnifique ce que l'on peut faire...

Ma page d'index est maintenant validée XHTML Strict sur le validateur W3C...

J'espère pouvoir continuer dans cette voie...

PS : ne regarder pas directement sur le site online, la version CSS n'est pas en ligne, mais en local. Pour très bientôt en ligne !

A bientot,
FRED

[netsliver]

Salut,

Alors personnellement j'suis partisant du FullCSS mais bon c'est un vrai casse tête, actuellement en refonte d'une quinzaine de site (heureusement tous sur la même ergonomie).

Le problème du centrage quelque soit la résolution est un faux problème. Je m'explique les CSS permettent de le faire sans aucun problème bien sûr avec un peu de logique.

De grands discours ne valent pas un petit exemple que voici aux adresses : https://www.mypgsm.com/ ou encore http://www.cap-maitrise.com/, j'en ai d'autres en stock de ma fabrication...

Nous avons par exemple un élément "DIV" de 400x300 que l'on veux center sur la page quelque soit la résolution, voici une méthode :

Code: Tout sélectionner

div {width: 400px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px;}

Le tour est joué, c'est centré quelque soit la résolution.

Je ne dit pas que c'est la meilleur méthode mais s'en est une.

A bientôt