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

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

Réponse 1 / 15

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
14 août 2006 à 23:41

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.

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
16 août 2006 à 09:30

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 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778 > bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024
16 août 2006 à 19:53

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 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778 > bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024
16 août 2006 à 20:05

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 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388 > Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023
17 août 2006 à 08:51

MERCI .....
là je dis "chapeau" !
c'est super bien expliqué simple et compréhensible de tous
encore un grand merci
@mitiés
b g

Réponse 2 / 15

fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146
3 août 2006 à 16:17

bg62 : essaye ceci dans ta feuille de style :

body {
position: absolute;
width: 900px;
}

Réponse 3 / 15

king
17 août 2006 à 17:36

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

Réponse 4 / 15

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
18 août 2006 à 16:02

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 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
18 août 2006 à 20:50

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.

Réponse 5 / 15

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
3 août 2006 à 17:05

merci, je teste cela dès ce soir
@mitiés
b g

Réponse 6 / 15

king
13 août 2006 à 15:38

Faudrait ajouter ça, si tu veux centrer:

left: 50%;
margin-left: -450px;

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
14 août 2006 à 09:55

ok
grand merci
cela à l'air de fonctionner
@mitiés
b g

fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010 146 > bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024
14 août 2006 à 14:23

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

king > fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010
14 août 2006 à 14:31

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 Statut Membre Dernière intervention 1 décembre 2010 146 > king
14 août 2006 à 21:17

Merci king pour les précisions

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388 > fanou Messages postés 448 Date d'inscription jeudi 16 mai 2002 Statut Membre Dernière intervention 1 décembre 2010
14 août 2006 à 14:46

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

Réponse 7 / 15

king
17 août 2006 à 13:53

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 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
17 août 2006 à 14:00

OK
mais pour moi tout s'affiche correctement !
@mitiés
b g

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
17 août 2006 à 14:23

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.

Réponse 8 / 15

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
17 août 2006 à 15:18

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

Réponse 9 / 15

Darshu Messages postés 303 Date d'inscription lundi 30 janvier 2006 Statut Membre Dernière intervention 3 avril 2008 64
18 août 2006 à 09:02

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 ;)

Réponse 10 / 15

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
18 août 2006 à 09:31

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

Réponse 11 / 15

king
18 août 2006 à 12:27

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.

Réponse 12 / 15

king
18 août 2006 à 12:51

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 ;-)

Réponse 13 / 15

bg62 Messages postés 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388
18 août 2006 à 13:17

ok ... en tous cas moi je suis ... tout peut servir ... il suffit de prendre les termes exacts !
@+
b g

Réponse 14 / 15

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
18 août 2006 à 15:51

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.

Réponse 15 / 15

king
18 août 2006 à 20:01

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 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
18 août 2006 à 21:09

“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 23658 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 20 novembre 2024 2 388 > Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023
19 août 2006 à 09:56

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

Css : taille de la page ?

15 réponses

Discussions similaires