Menu

Css : taille de la page ? [Résolu/Fermé]

Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
- - Dernière réponse : bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
- 19 août 2006 à 09:56
bonjour,
dans une 'css' pourriez-vous m'indiquer la ligne à insérer pour fixer la taielle de la page ?
exemple je voudrais qu'elle s'affiche en une largeur de 900 px (dans un affichage en 1024 par exemple en restant au centre de l'écran) .. et où mettre cette ligne dans la page css
merci à l'avance
@mitiés
b g
Afficher la suite 

15 réponses

Meilleure réponse
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
3540
5
Merci
Bonjour,

Un peu tard, mais une solution qui fonctionnera même si on décide de changer la largeur du #conteneur. Qui le gardera centré quelque soit sa taille.

#conteneur {
    margin : xx auto;
    width : 800px;
    }

  xx règle les marges du haut et du bas. Elles peuvent être 0.
  auto s'applique aux marges gauches et droites.

Dire « Merci » 5

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 47165 internautes nous ont dit merci ce mois-ci

bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145 -
MERCI
cela a l'air encore plus pratique !
donc tu mets ceci dans le fichier css
et on l'appelle comment dans la page concernée ?
pour XX auto, peux-tu me donner plus de détails ?
merci
@mitiés
b g
Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
3540 > bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
-
De rien.

C'est assez simple à comprendre.

Il suffit de créer un fichier au format texte et d'y composer les styles selon les normes. Puis d'enregistrer ce fichier avec l'extension “.css”.
Les styles seront sous la forme :
nom_du_style {
    propriété : valeur;
    propriété2 : valeur valeur;
    }
Ensuite, lorsqu'on veut appliquer un style à un élément de la page, il lui indiquer lequel :
<p class="nom_du_style>

Pour que le navigateur puisse interpréter le code de la feuille de styles, il faut avoir indiqué dans l'en-tête de la page l'emplacement du fichier .css :
<head>
    ...
    <link rel="stylesheet" href="styles.css" type="text/css"></link>
    ...
</head>
Ici, “styles.css” est dans le même dossier que la page.

Lorsque tu auras découvert un peu plus loin les CSS, tu sauras que la propriété margin peut être utilisée de différentes manières. Celle que j'ai choisie est concise. Elle indique au navigateur comment positionner l'élément auquel elle s'applique selon ces critères :
  20px “règle les marges du haut et du bas.
  auto s'applique aux marges gauches et droites. ”
Autrement dit, l'élément concerné est placé à 10 pixels du haut et du bas, et automatiquement par rapport aux bords droit et gauche de la page.

Un exemple peut aider. J'ai fabriqué cette page simple avec quelques paragraphes. Le contenu est placé dans un bloc <div> appelé “conteneur” auquel les valeurs précédentes ont été appliquées et qui contient l'ensemble de ce qu'on veut voir affiché.
Lorsqu'on élargit la fenêtre du navigateur, il reste centré, et le reste suit :
http://gihef.bey.free.fr/CCM/centrerdiv/conteneurfixecentre.html

Un des avantages des feuilles de styles, c'est qu'elles permettent de séparer le contenu de la mise en forme.
Cette deuxième page est strictement identique à la précédente, seule la feuille de style à été modifiée :
http://gihef.bey.free.fr/CCM/centrerdiv/conteneurfixecentre2.html

Tu peux peut-être enregistrer ces documents sur ton disque pour modifier les feuilles de styles à ton gré et observer les résultats ?

+ Pour les marges, regarde ici :
http://edu.ca.edu/selfhtml/navigation/css.htm#marges
Évite les valeurs en cm, mm, pt… Choisis plutôt des mesures plus souples comme les px, em ou %…
Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
3540 > bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
-
Ah oui, “pour modifier les feuilles de styles à ton gré et observer les résultats”, tu peux afficher le .html dans ton navigateur et ouvrir le .css dans un éditeur de texte, y faire des modifs. Retourner au navigateur, recharger la page.
Etc.
bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145 > Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
-
MERCI .....
là je dis "chapeau" !
c'est super bien expliqué simple et compréhensible de tous
encore un grand merci
@mitiés
b g
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Dernière intervention
1 décembre 2010
159
2
Merci
bg62 : essaye ceci dans ta feuille de style :

body {
position: absolute;
width: 900px;
}
1
Merci
C'est vrai que je ne suis pas sérieux, même un con fini, toutefois évitez de bosser à l'heure de l'apéro:

Sous Maxthon 1.5.6
http://ma.sch.free.fr/pictures/test-site1.gif

Sous IE6
http://ma.sch.free.fr/pictures/test-site2.gif

Si vous trouvez que c'est centré, je réserve mon tour chez le psy :-)

Bonne continuation
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145
1
Merci
hé tous les deux !
vous en connaissez un qui fonctionne sans problème ? de navigateur !!
ça commence à devenir complexe ...
en tout cas je suis la discussion
elle m'intéresse
@+
b g
Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
3540 -
Non, il n'y en a pas, mais certains font des efforts dans le sens d'un fonctionnement prévisible parce que basé sur des normes que chacun peut consulter, appliquer facilement avant de fabriquer ses propres interprétations.

Les différences.
Avant :
body {
    background-color : #ddd;
    }
#conteneur {                       /* ici : #conteneur   */
    margin : 20px auto; 
    …


Après :
body {
    background-color : #ddd;
    text-align : center;  <-- là, IE centre. Tout.
    }
#conteneur {                       /* ici : #conteneur   */
    margin : 20px auto; 
    text-align : left;    <-- Mais il faut ensuite aligner autrement.
    …                        -- Pour voir, supprime la ligne.

Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145
0
Merci
merci, je teste cela dès ce soir
@mitiés
b g
0
Merci
Faudrait ajouter ça, si tu veux centrer:

left: 50%;
margin-left: -450px;
bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145 -
ok
grand merci
cela à l'air de fonctionner
@mitiés
b g
fanou
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Dernière intervention
1 décembre 2010
159 > bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
-
Bonjour à tous
bg62:
Peux-tu me dire si tu as rajouté les lignes de code de king à ce que je t'avais proposé, ou si tu n'as mis que celles de king..?
Merci à toi..
> fanou
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Dernière intervention
1 décembre 2010
-
Nan faut mettre le tout :-)

soit:

body {
position: absolute;
width: 900px;
left: 50%;
margin-left: -450px;
}

Mieux en:

#conteneur{
position: absolute;
width: 900px;
left: 50%;
margin-left: -450px;
}

puis tu appelles avec:

<div id="conteneur">

Donc tu auras un conteneur de 900px, centré :-)
fanou
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Dernière intervention
1 décembre 2010
159 > king -
Merci king pour les précisions
bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145 > fanou
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Dernière intervention
1 décembre 2010
-
Merci à tous, je préfère la solution avec le conteneur
en local cela semble fonctionner beaucoup mieux,je continue à tester et je mettrai en ligne mardi ou mercredi
@mitiés
b g
0
Merci
Il est à noter que l'adresse:
http://gihef.bey.free.fr/CCM/centrerdiv/conteneurfixecentre.html

est incomprise par IE et descendant, ce qui crée un léger souci.

Quoi que tu fasses: test !
bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145 -
OK
mais pour moi tout s'affiche correctement !
@mitiés
b g
Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
3540 -
Un peu de sérieux (-;
Tu peux imaginer que j'ai testé !
Pour vérifier que ce que je propose s'affichera, à peu près, correctement.
Et avec plusieurs navigateurs : Safari, Firefox, Opera, SunriseBrowser, Camino. Même avec mon vieux IE 5.2.3 que je n'utilise que pour ça.
Localement puis en ligne.

Aucun souci chez moi.

Réessaye et indique-nous l'éventuel message qu'IE t'envoie.
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145
0
Merci
tu m'avais dit :
"est incomprise par IE et descendant, ce qui crée un léger souci.
" c'est pour cela que j'ai regardé ...
@+
bg
Messages postés
306
Date d'inscription
lundi 30 janvier 2006
Dernière intervention
3 avril 2008
85
0
Merci
Je pense que tu peux appeller ton psy :D C'est centré, mais pour le texte contenu dans le cadre, pas le cadre en lui même ! Bref, vous ne parliez pas de la même chose ;)
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145
0
Merci
bonjour,
ben c'est pas grave les psys sont en congé et tu auras tout le temps de recentrer tout cela là je te fais confiance pour ça
@+
b g
0
Merci
J'ai signalé que l'url est incomprise par IE:

Soit ce n'est pas centré, soit ce n'est pas complet comme le signale Darshu (qui apparemment ne sait pas lire). Et si ce n'est pas complet, du coup, ce n'est plus centré!

Au passage, ça n'a pour but que de vous rendre service. Vos guéguerre puériles vous les gardez pour vous.

IE6 est le plus utilisé, vérifier sous IE5.5 n'a pas de sens.

Mais bon, faut surtout ne pas rendre service.

Pour bg62, me demande si tu ne te gourres pas d'interlocuteur, quand je fais en CSS c'est 100% compatible IE6, Mozilla, Opera. Cela dit ma première intervention était dans le sens de te venir en aide. Je crois que c'était une grave erreur.
0
Merci
Tit complément, car ça me fait un peu marrer:

-dans l'hypothèse où IE à un autre problème, il devrait centrer ce qu'il voit, or il ne le fait pas.
-On a donc une deuxième erreur. Je doute que ce soit mieux car opera le montre plus large.

Au total, on a une double erreur de compréhension de IE.

Merci à Darshu pour ce correctif ;-)
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145
0
Merci
ok ... en tous cas moi je suis ... tout peut servir ... il suffit de prendre les termes exacts !
@+
b g
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
3540
0
Merci
Bonjour à tous,

Je suis allé vérifier sur un PC-IBM et, en effet, IE6.0.2 ne centre pas.
Alors que ma version plus ancienne (!) sur Mac (!) le fait !
Ah, les insuffisances de ms !

M'est alors revenu en mémoire un truc que j'avais rencontré et que j'ai retrouvé :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-ele...

J'ai apporté ces quelques manips à mes exemples.
Merci de vérifier que ça fonctionne :
http://gihef.bey.free.fr/CCM/centrercont/centrer21.html
http://gihef.bey.free.fr/CCM/centrercont/centrer22.html

La compatibilité des navigateurs avec les (avant-)dernières versions des CSS n'est pas pour tout de suite…
Il reste à supposer qu'IE, le navigateur le plus utilisé, dans sa nouvelle version, les prendra en compte.

Des choix s'offrent alors au concepteur, bg62.
Soit il passe outre et conseille à ses visiteurs d'essayer d'autres navigateurs plus respectueux, plus riches…
Soit il choisit l'autre méthode, celle évoquée ici css taille de la page
et se renseigne sur les insuffisances multiples d'IE avant d'entreprendre CSS
Soit il attend patiemment que tout le monde s'équipe de la nouvelle version d'IE…

+ Et pourtant, mes documents sont valides W3C !
http://jigsaw.w3.org/css-validator/validator?uri=http://gihef.bey.free.fr/CCM/cen...
http://validator.w3.org/check?uri=http%3A%2F%2Fgihef.bey.free.fr%2FCCM%2Fcentrerd...
Alors…

+ Pour le king, ma proposition n'avait rien de polémique, ne tentait en rien de dénigrer la tienne. Elle offrait simplement, et incomplètement, une alternative, un choix.
0
Merci
Ben comme je dis toujours, c'est pas le w3c qui va visiter le site. Me rappelle d'ailleurs avoir fait une page à 0 faute et IE voit une page blanche (héhéhé).

Cela dit c'est centré sur la nouvelle version des pages (sauf que IE les voit moins larges que Opera).

Sinan faut faire un CSS conditionnel pour IE, ce qui solutionne pas mal d'emmerdes (mais évidemment, faut 2 fichiers CSS pour le prix d'un) :-)
Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
3540 -
“c'est pas le w3c qui va visiter”
C'est sûr. Mais, en sens inverse, il est bien pratique pour tenter de savoir comment ça (devrait, pourrait) marche(r).
Et puis le w3c n'est une entité immatérielle qui vit sa vie toute seule. C'est un groupement qui réunit pas mal de puissants décideurs.

“0 faute et IE voit une page blanche”
Éh oui, on retombe toujours dans les mêmes problèmes.

“IE les voit moins larges”
À cause du padding et des border.

“Sinan faut faire un CSS conditionnel pour IE”
Éh oui, on retombe toujours dans les mêmes problèmes.
Et on retrouve le bon vieux temps où il fallait tester à quel navigateur on avait affaire pour afficher quelque chose. Un petit script et hop…
L'amateur que je suis dit non merci.

+ Merci pour les copies d'écran du <18>.
bg62
Messages postés
23178
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
20 mars 2019
3145 > Gihef
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
-
bonjour,
moi le w3c c'est pour la lectutre des balises metas qu'il me pose des problèmes, mais là c'est un autre post !
@+
b g