Centrage de page et résolution d'écran

flubber · Message par **flubber** » 04 sept. 2012, 19:15

Bonjour.
Je viens de m'apercevoir (avec horreur !) que mon site qui s'affiche en milieu d'écran sur les PC de bureau, (21/22') est décalé à droite sur les portables et autres netbooks.

Et quelque soit le navigateur (Firefox, IE ou Chrome)! Si quelqu'un peux m'aider, merci d'avance.
http://www.ententedesgraves.fr/vierge2.html

chriss.. · Message par **chriss..** » 04 sept. 2012, 21:07

Bonjour, bonsoir,

Code : Tout sélectionner

body { 
text-align: center;
}

et pour les img supprime les lignes

Code : Tout sélectionner

 left: 553px;
left: 429px;

Message par **Ymai** » 05 sept. 2012, 00:16

Bonsoir, bonjour
Moi, ce qui me chiffonne, ce sont les objets en position "absolute"; et avec de grandes valeurs d'abscisse.

flubber · Message par **flubber** » 05 sept. 2012, 07:37

Salut.
Tu peux développer (et m'éclairer) ? je suis preneur de toutes améliorations.
Merci

Message par **chinon37** » 05 sept. 2012, 09:54

Bonjour,

Comme le dit mon cher ami brüsellois, tu as mis tous les blocs en position "absolue". Cela veut dire que leur position est figée sur la page (par rapport à l'angle haut et gauche de l'écran).
Sur ton écran de pc, tu as "l'impression" que ton site est bien centré car tu as bidouillé pour lui donner cet aspect.
Mais c'est un leurre. Pour le vérifier, il suffit de diminuer la fenêtre de ton navigateur, et tu vas tout de suite voir que ta mise en page fout le camp!

Sur un site simple, il suffit de mettre les blocs (div, images, etc.) en position "non defini(e)" et de positionner ces blocs avec des marges "auto".

Pour la balise <body>, un alignement centré du texte permettra de centrer tous les blocs situé dans cette balise body.

Pour le menu, la méthode est mauvaise: il ne fat pas aligner des mots et placer des espaces entre ceux-ci. La meilleure solution consiste à utiliser une liste non ordonnée (listes à puces), à positionner les items en ligne avec une règle de style pour <li>. Dans cette règle de style, tu pourras également demander le non affichage de la puce.

en gros, sans tout reprendre, ça peut donner ça:

Code : Tout sélectionner

<html>
<head>

<title>Bienvenue sur le site de l'EDG</title>
<meta name="Keywords"
content="rugby, cestas, cestadais, bouzet, entente des graves, leognan, la brede, gradignan, teuliere, balandrade, belascains, reichel, -17, U17, -19, U19, -22, U22">
<style type="text/css">
li {
display: inline;
padding-right: 30px;
padding-left: 30px;
}

</style>
</head>
<body
style="width: 1036px; margin-right: auto; margin-left: auto; color: silver; background-color: black; text-align: center;"
alink="#ff33cc" link="#ff33cc" vlink="#ff33cc">
<img
style="width: 786px; height: 32px; margin-right: auto; margin-left: auto;"
alt="" src="images/system/cglbl.jpg"> <img
style="width: 1036px; height: 108px; left: 429px; top: 8px;" alt=""
src="images/system/edg.jpg">&nbsp;
<div style="color: rgb(255, 51, 204);">
<ul style="list-style-type: none;">
<li><small> <span style="font-family: Arial;"> <span
style="font-weight: bold; color: silver;">&nbsp; <span
style="color: rgb(255, 51, 204);">Accueil</span></span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold; color: silver;"><span
style="color: rgb(255, 51, 204);"></span></span><span
style="font-weight: bold;"><span style="color: rgb(255, 51, 204);">U22</span></span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;"><span style="color: rgb(255, 51, 204);"></span></span><span
style="font-weight: bold;">U19</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">U17</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">Calendrier</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">Photos</span></span></small></li>
<li><small><span style="font-family: Arial;"><span
style="font-weight: bold;">LiensGoodies</span></span>&nbsp;</small>
</li>
</ul>
</div>
<br>
<br>
</body>
</html>

Il serait souhaitable que les règles de style ne soient pas définies en styles internes (définies pour chaque balise à partir d'un clic droit dans la barre de tâches), mais dans une feuille de style soit interne (c'est ce que j'ai fait pour <li>), soit mieux encore, externe ce qui crée un fichier séparé. La feuille de style se crée à l'aide de l'outil "editeur css..." (icone sous forme de palette de peintre).
Un petit tour vers les tutoriels habituels te donnera des pistes

Message par **Ymai** » 05 sept. 2012, 23:25

Qu'ajouterions-nous, nous qui ne menons pas la vie de château (entre Loire et Vienne)

flubber · Message par **flubber** » 07 sept. 2012, 20:04

Merci pour le code, effectivement j'ai du boulot !

ferradinijm · Message par **ferradinijm** » 03 déc. 2012, 20:15

Bonjour
Comment fait-on pour affecter des marges automatiques à une boîte sur Cazcades ? Cela ne semble pas prévu dans l'onglet "boîte"
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0

chriss.. · Message par **chriss..** » 03 déc. 2012, 21:07

Bonjour,

ferradinijm a écrit :Bonjour
Comment fait-on pour affecter des marges automatiques à une boîte sur Cazcades ? Cela ne semble pas prévu dans l'onglet "boîte"
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0

Merci d'ouvrir un nouveau sujet.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.0; rv:17.0) Gecko/20100101 Firefox/17.0

Message par **chinon37** » 03 déc. 2012, 22:30

ferradinijm a écrit :Bonjour
Comment fait-on pour affecter des marges automatiques à une boîte sur Cazcades ? Cela ne semble pas prévu dans l'onglet "boîte"

Bonjour,
Il suffit d'ouvrir l'éditeur css > boite > marge > auto pour la droite et la gauche
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0

ferradinijm · Message par **ferradinijm** » 04 déc. 2012, 09:42

chinon37 a écrit :
ferradinijm a écrit :Bonjour
Comment fait-on pour affecter des marges automatiques à une boîte sur Cazcades ? Cela ne semble pas prévu dans l'onglet "boîte"
Bonjour,
Il suffit d'ouvrir l'éditeur css > boite > marge > auto pour la droite et la gauche
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0

C'est ce que j'ai fais, en écrivant "auto" puisque cela ne fait pas partie des options proposées par la liste déroulante (?) Cazcades affiche bien margin-left: auto;
margin-right: auto; mais il n'y a aucun résultat sur l'affichage qui demeure aligné à gauche.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0

Message par **chinon37** » 04 déc. 2012, 10:27

Bonjour,

Quelle version de KompoZer utilises-tu? car sur la version 0.8b3, "auto" est bien prévu...

Peut-on avoir l'adresse du site si la page est en ligne, ou, sinon, le code de la page ainsi que le code de la feuille de style? Sur quelle balise appliques tu les marges auto?
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0

Geckozone

Centrage de page et résolution d'écran

Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Re: Centrage de page et résolution d'écran

Qui est en ligne ?