Partager vos
astuces Bricolage
Posez votre question Signaler

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

bg62 12923Messages postés 11 avril 2006Date d'inscription 12 février 2012Dernière intervention - Dernière réponse le 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
Lire la suite 

Css : taille de la page »

29 réponses
Réponse
+3
moins plus
fanou 451Messages postés 16 mai 2002Date d'inscription 1 décembre 2010Dernière intervention 3 août 2006 à 16:17
bg62 : essaye ceci dans ta feuille de style :

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

Ajouter un commentaire
Ajouter un commentaire
Réponse
+1
moins plus
Gihef 5246Messages postés 20 juillet 2005Date d'inscription 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.

Ajouter un commentaire
Afficher les 4 commentaires
Gihef - 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 › bg62 - 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 - 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
Ajouter un commentaire
Réponse
+1
moins plus
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

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+1
moins plus
bg62 12923Messages postés 11 avril 2006Date d'inscription 12 février 2012Dernière intervention 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

 Ajouter un commentaire - Site web
Gihef - 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.

Ajouter un commentaire
Réponse
+0
moins plus
bg62 12923Messages postés 11 avril 2006Date d'inscription 12 février 2012Dernière intervention 3 août 2006 à 17:05
merci, je teste cela dès ce soir
@mitiés
b g

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
king 13 août 2006 à 15:38
Faudrait ajouter ça, si tu veux centrer:

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

 Ajouter un commentaire
Afficher les 5 commentaires
king - 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 - 14 août 2006 à 21:17
Merci king pour les précisions
bg62 › fanou - 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
Ajouter un commentaire
Réponse
+0
moins plus
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 !

 Ajouter un commentaire
bg62 - 17 août 2006 à 14:00
OK
mais pour moi tout s'affiche correctement !
@mitiés
b g
Gihef - 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.
Ajouter un commentaire
Réponse
+0
moins plus
bg62 12923Messages postés 11 avril 2006Date d'inscription 12 février 2012Dernière intervention 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

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
Darshu 309Messages postés 30 janvier 2006Date d'inscription 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 ;)

Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
bg62 12923Messages postés 11 avril 2006Date d'inscription 12 février 2012Dernière intervention 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

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
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.

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
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 ;-)

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
bg62 12923Messages postés 11 avril 2006Date d'inscription 12 février 2012Dernière intervention 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

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
Gihef 5246Messages postés 20 juillet 2005Date d'inscription 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.

Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
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) :-)

 Ajouter un commentaire
Gihef - 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 - 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
Ajouter un commentaire
Posez votre question
Ce document intitulé « css : taille de la page ? » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook