Css : taille de la page ?

Résolu/Fermé
Signaler
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
-
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
-
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

15 réponses

Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
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.
6
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
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
0
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767 >
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022

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 %…
0
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767 >
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022

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.
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313 >
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021

MERCI .....
là je dis "chapeau" !
c'est super bien expliqué simple et compréhensible de tous
encore un grand merci
@mitiés
b g
0
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
147
bg62 : essaye ceci dans ta feuille de style :

body {
position: absolute;
width: 900px;
}
3
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
1
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
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
1
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
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.

0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
merci, je teste cela dès ce soir
@mitiés
b g
0
Faudrait ajouter ça, si tu veux centrer:

left: 50%;
margin-left: -450px;
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
ok
grand merci
cela à l'air de fonctionner
@mitiés
b g
0
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
147 >
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022

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..
0
>
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
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é :-)
0
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
Dernière intervention
1 décembre 2010
147 > king
Merci king pour les précisions
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313 >
Messages postés
448
Date d'inscription
jeudi 16 mai 2002
Statut
Membre
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
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 !
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
OK
mais pour moi tout s'affiche correctement !
@mitiés
b g
-1
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
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.
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
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
0
Messages postés
303
Date d'inscription
lundi 30 janvier 2006
Statut
Membre
Dernière intervention
3 avril 2008
64
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 ;)
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
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
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
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 ;-)
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313
ok ... en tous cas moi je suis ... tout peut servir ... il suffit de prendre les termes exacts !
@+
b g
0
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
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
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) :-)
0
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021
2 767
“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>.
0
Messages postés
23213
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
16 janvier 2022
2 313 >
Messages postés
5129
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 décembre 2021

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
0