Comment center un site sur les Navigateur ?

**star42** · 28/09/2008, 15h29

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

**darckangel01** · 28/09/2008, 16h12

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

**star42** · 28/09/2008, 16h56

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

**star42** · 28/09/2008, 17h08

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'>

**star42** · 28/09/2008, 17h18

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 ????

**Kerod** · 28/09/2008, 17h33

Voici une réponse à ta question : Comment centrer un bloc avec du CSS

**star42** · 28/09/2008, 17h38

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 !!!!

je vais essayer plus longement ...

merci a tous

**Erwan31** · 28/09/2008, 17h50

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 !!!!

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

**ThomasR** · 28/09/2008, 17h51

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**popcorn** · 28/09/2008, 19h15

Salut,

Mets ceci dans ton css

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

Dit-moi si ca marche?

**Erwan31** · 28/09/2008, 19h41

Envoyé par popcorn

Mets ceci dans ton css

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.

**popcorn** · 28/09/2008, 19h52

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

**Erwan31** · 28/09/2008, 20h40

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.

**popcorn** · 28/09/2008, 20h54

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

**star42** · 28/09/2008, 21h43

Envoyé par popcorn

Salut,

Mets ceci dans ton css

Dit-moi si ca marche?

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

merci

**12monkeys** · 28/09/2008, 21h52

Bonsoir

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.

**popcorn** · 28/09/2008, 22h48

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

Ou entre ta balise <style></style>

**Erwan31** · 28/09/2008, 23h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<style type="text/css" media="screen">
<!--
-->
</style>

pour les écrans et dans un document servi en text/html

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

sd · 29/09/2008, 09h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<body>
  <center>
    <div>
    ...
    </div>
  </center>
</body>

Ce n'es pas propre?

sd

**Erwan31** · 29/09/2008, 09h57

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

Comment center un site sur les Navigateur ?

HTML

Discussions similaires

Partager

Partager