Comment center un site sur les Navigateur ?

Version imprimable

28/09/2008, 15h29
star42

Comment center un site sur les Navigateur ?

dabord bonjour a tous d'un nouveau....

j'ai un probleme que je n'arrive pas a résoudre... portant j'ai essayer plein de trucs trouver sur le net.. mais rien ne fonctionne... car je pense que je n'utilise pas correctement les descriptions.... je travaille sur un site pour un amis... je bosse avec un peu dreamwaver et surtout Webexpert.. actuellement les pages s'affiche sur la gauche et je souhaite que les pages s'affichent toujours au centre de l'ecran... :(

je débute alors c'est pas simple pour moi...
je peu éventuellement envoyer par mail une page si vous le souhaiter ?

merci de votre aide ;)
28/09/2008, 16h12
darckangel01

c'est simple tres simple ! tu vas mettre cette balise
<div align="center"></div> entre les balise body et tu vas mettre dedan tout le contenue du site
28/09/2008, 16h56
star42

oui simple..mais j'ai deja essayer et cela ne fonctionne pas chez moi !!! pourquoi ?
j'ai deja une balise div dans ma page.. j'ai essayer de mettre la fonction <div align=center> avant l'autre, apres l'autre mais rien n'y fait... faut dire que dans ma page j'ai pas mal de chose.... je vais reassayer.. si cela ne fonctionne pas avec cette fonction c'est peut-etre que autre chose l'annule ??

merci
28/09/2008, 17h08
star42

je viens de reassayer... avec la balise <div align="center"> ma page est a droite !!!!... j'ai placer celle-ci avant l'autre balise div

la balise div que j'ai deja dans mon document est:
<div style='position:absolute;width:8.5152in;height:11.0152in'>
28/09/2008, 17h18
star42

en fait j'y comprend plus rien!!!! :(
quand j'uilise la fonction <div align="center"> comme citer au dessus la page se place un peu a droite (pour la voir complètement je suis obliger d'utiliser le courseur horizontal de la page web)... un peu oui car quand j'utilise right dans la balise pour faire un test la page web et encore plus a droite !!!! (dans se cas pour voir ma page je suis aussi obliger d'utiliser le courseur.. mais beaucoup plus)..
j'espere que vous comprenez !!!:)

j'en deduit que Center fonctionne..mais pourquoi le centre se n'est pas le centre du navigateur ????
28/09/2008, 17h33
Kerod

Voici une réponse à ta question : Comment centrer un bloc avec du CSS
28/09/2008, 17h38
star42

je pense que je viens de trouver !!!
il faut biensur mettre la balise align="center"..... mais dans ma premiere balise DIV j'ai mis relative a la place d'absolute et ca marche !!!! :king:
je vais essayer plus longement ...

merci a tous
28/09/2008, 17h50
Erwan31

Citation:

Envoyé par star42

il faut biensur mettre la balise align="center"..... mais dans ma premiere balise DIV j'ai mis relative a la place d'absolute et ca marche !!!! :king:

Non je te conseil d'oublier align qui est un des attributs de présentation déprécié et de le remplacer par la méthode de centrage présente dans le tuto linké par Kerod ;)

Code:

1
2
3
4
 
<body>
    <div id="Layout"/>
</body>

Code:

1
2
3
4
 
<style type="text/css">
  #Layout {width:800px;margin:auto;}
</style>

28/09/2008, 19h15
popcorn

Salut,

Mets ceci dans ton css:mrgreen:

Citation:

body { /* Page Body */
text-align : center;
margin-top: 20pt;
margin-left: auto;
margin-right: auto;
}

Dit-moi si ca marche?
28/09/2008, 19h41
Erwan31

Citation:

Envoyé par popcorn

Mets ceci dans ton css:mrgreen:
Dit-moi si ca marche?

L'unité point (pt) n'est pas du tout adaptée pour l'écran et pour d'autres éléments que les polices ;)
Il est préférable de choisir des pixel ou des em selon le cas.
28/09/2008, 19h52
popcorn

Citation:

Envoyé par Erwan31

L'unité point (pt) n'est pas du tout adaptée pour l'écran et pour d'autres éléments que les polices ;)
Il est préférable de choisir des pixel ou des em selon le cas.

A titre d'information, il y a-t'il des conséquence à utiliser (pt), des incompatibilité? merci pour l'info
28/09/2008, 20h40
Erwan31

Citation:

Envoyé par popcorn

A titre d'information, il y a-t'il des conséquence à utiliser (pt), des incompatibilité?

L'unité point est essentiellement préjudiciable en terme d'accessibilité visuelle lorsqu'elle est appliquée sur des polices puisque
son utilisation (comme les pixel) a pour effet de verrouiller la commande d'agrandissement/réduction du texte sous IE. (je ne sais pas si IE8 a rectifié le tir)

D'autre part, il faut savoir que l'unité point peut se traduire différemment suivant la plateforme: les anciens écrans mac en 72ppp affichent par exemple 1 pixel pour 1 point alors que le standard windows et les nouveaux écrans MAC sont en 96ppp, (4 pixel pour 3 points).
12pt fera donc 16px sur Windows alors qu'il fera 12px sur un "vieux" MAC ou sur Linux.

Mis appart ça je ne suis pas sûr que cette unité soit acceptée par tout les navigateurs graphiques quand elle ne s'applique pas à la propriété font-size.
28/09/2008, 20h54
popcorn

Citation:

Envoyé par Erwan31

Les points sont essentiellement préjudiciables en terme d'accessibilité visuelle
lorsqu'ils sont appliqués sur des polices puisque que leur utilisateur (comme les pixel) a pour effet de verrouiller la commande d'agrandissement/réduction du texte sous IE. (je ne sais pas si IE8 a rectifié le tir)

D'autre part, il faut savoir que l'unité point peut se traduire différemment suivant la plateforme: les anciens écrans mac en 72ppp affichent par exemple 1 pixel pour 1 point alors que le standard windows et les nouveaux écrans MAC sont en 96ppp, (4 pixel pour 3 points).
12pt fera donc 16px sur Windows alors qu'il fera 12px sur un "vieux" MAC ou sur Linux.

Mis appart ça je ne suis pas sûr que cette unité soit acceptée par tout les navigateurs graphiques quand elle ne s'applique pas à la propriété font-size.

Je ne connaissais pas ce détail important, je vais donc convertir mes pt en px, j'ai déjà un script que j'ai monté qui me permet de modifier en lot un css, il me reste qu'à trouver la correspondance entre les deux pour la version d'explorer que j'utilise. Merci beaucoup pour cette explication :king:
28/09/2008, 21h43
star42

Citation:

Envoyé par popcorn

Salut,

Mets ceci dans ton css:mrgreen:

Dit-moi si ca marche?

dans une page html comment insere du CSS ? quel balise utilser.. <style>

merci
28/09/2008, 21h52
12monkeys

Bonsoir

Citation:

Envoyé par star42

dans une page html comment insere du CSS ? quel balise utilser.. <style>

merci

un peu de lecture : http://css.developpez.com/tutoriels/premiers-pas/, idéal si tu débute.
28/09/2008, 22h48
popcorn

Citation:

Envoyé par star42

dans une page html comment insere du CSS ? quel balise utilser.. <style>

merci

Tu as deux choix, un dans un fichier .css appeler ainsi

Citation:

<link rel="stylesheet" href="style/header.css" type="text/css" media="screen,projection,print">

Ou entre ta balise <style></style>
28/09/2008, 23h24
Erwan31
Citation:

Envoyé par popcorn

Tu as deux choix, un dans un fichier .css appeler ainsi Ou entre ta balise <style></style>

Tu le sais peut-être mais style n'est pas suffisant ;)
Pour être plus précis:
Code:

1 2 3 4 5 <style type="text/css" media="screen">  </style>
pour les écrans et dans un document servi en text/html

Citation:

media="screen,projection,print"

Si tu pars dans cette logique, il est préférable à ce moment là de préciser media="all" pour ne pas exclure le média "handheld" (appareils portatifs) et les autres médias encore très marginaux.
Mais chacun des média demandera une adaptation adéquate y compris le média projection qui est un média paginé au même titre que le média print.

Pour en savoir plus: Les types de media CSS
29/09/2008, 09h45
sd
Pourquoi ne pas utiliser la balise center? Histoire de ne pas réinventer la roue, ou ne pas se casser la tête avec des calculs...

ex:
Code:

1 2 3 4 5 6 7 8 <body> <center> <div> ... </div> </center> </body>
Ce n'es pas propre?

sd
29/09/2008, 09h57
Erwan31

L'élément center comme la grande majorité des attributs/éléments de présentation est déconseillée par la spec HTML4,
Le but étant de favoriser progressivement la portabilité de la structure (x)HTML sur différents périphérique de sortie (appareils portatifs, imprimante...),
de faciliter les mises à jour, centraliser la mise en forme, alléger le code (x)HTML, faciliter le travail d'interprétation et de traitement du code par les
User Agents (navigateurs, robots d'indexations, logiciels de synthèse vocal...), etc
29/09/2008, 10h14
sd

Merci pour ta précision Erwan31, je le saurais dorénavant...

sd