Flux rss
Ils ont besoin de votre aide
Collection CommentCaMarche.net
Rechercher : dans
Par : Mots clés Nom d'utilisateur
Messages sans réponse

Css : taille de la page ?

bg62, le jeudi 3 août 2006 à 10:17:39 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « css : taille de la page ? »
Posez votre question Répondre

1

fanou, le jeudi 3 août 2006 à 16:17:53

Bg62 : essaye ceci dans ta feuille de style :

body {
position: absolute;
width: 900px;
} L'ami est le pilier qui reste debout, même quand tout s'effo­ndre.
Fanou

   
Répondre à fanou

2

bg62, le jeudi 3 août 2006 à 17:05:54

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

   
Répondre à bg62

3

king, le dimanche 13 août 2006 à 15:38:37

Faudrait ajouter ça, si tu veux centrer:

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

   
Répondre à king

4

bg62, le lundi 14 août 2006 à 09:55:44

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

   
Répondre à bg62

5

fanou, le lundi 14 août 2006 à 14:23:18

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.. L'ami est le pilier qui reste debout, même quand tout s'effo­ndre.
Fanou

   
Répondre à fanou

6

king, le lundi 14 août 2006 à 14:31:49

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é :-)

   
Répondre à king

8

fanou, le lundi 14 août 2006 à 21:17:48

Merci king pour les précisions L'ami est le pilier qui reste debout, même quand tout s'effo­ndre.
Fanou

   
Répondre à fanou

7

bg62, le lundi 14 août 2006 à 14:46:45

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épondre à bg62

9

Gihef, le lundi 14 août 2006 à 23:41:33

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.
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

10

bg62, le mercredi 16 août 2006 à 09:30:08

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

   
Répondre à bg62

11

Gihef, le mercredi 16 août 2006 à 19:53:23

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 %…
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

12

Gihef, le mercredi 16 août 2006 à 20:05:49

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.
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

13

bg62, le jeudi 17 août 2006 à 08:51:10

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épondre à bg62

14

king, le jeudi 17 août 2006 à 13:53:00

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 !

   
Répondre à king

15

bg62, le jeudi 17 août 2006 à 14:00:53

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

   
Répondre à bg62

16

Gihef, le jeudi 17 août 2006 à 14:23:14

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.
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

17

bg62, le jeudi 17 août 2006 à 15:18:32

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épondre à bg62

18

king, le jeudi 17 août 2006 à 17:36:55

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épondre à king

19

Darshu, le vendredi 18 août 2006 à 09:02:12

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

T'as pensé à regarder sur Google avant de poser ta question ­? 

   
Répondre à Darshu

20

bg62, le vendredi 18 août 2006 à 09:31:58

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épondre à bg62

21

king, le vendredi 18 août 2006 à 12:27:32

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épondre à king

22

king, le vendredi 18 août 2006 à 12:51:17

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épondre à king

23

bg62, le vendredi 18 août 2006 à 13:17:03

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

   
Répondre à bg62

24

Gihef, le vendredi 18 août 2006 à 15:51:50

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-tab­leaux/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://gihe­f.bey.free.fr/CCM/cen...
http://validator.w3.org/check?uri=http%3A%2F%2Fgihef.bey.fre­e.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.
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

25

bg62, le vendredi 18 août 2006 à 16:02:31
  • +1

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

   
Répondre à bg62

27

Gihef, le vendredi 18 août 2006 à 20:50:53

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.

-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

26

king, le vendredi 18 août 2006 à 20:01:46

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

   
Répondre à king

28

Gihef, le vendredi 18 août 2006 à 21:09:38
  • +1

“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>.
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

   
Répondre à Gihef

29

 bg62, le samedi 19 août 2006 à 09:56:11
  • +1

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

   
Répondre à bg62
Posez votre question Répondre
[CSS] Taille min pour un cadre ? Bonjour à tous, Comment puis-je faire avec mes DIV et mon CSS pour que mon cadre du milieu est, non pas une taille MAXIMUM permettant par exemple de faire du scrolling, mais plutôt une taille minimum, histoire que le cadre du bas qui le suit, soit... www.commentcamarche.net/forum/affich-2207451-css-taille-min-pour-un-cadre
Fixer taille page ASP.net Bonjour, je travail avec les frames et sur la mainframe j'affiche une page asp.net avec une datagrid, j'aimerai fixer la taille de la frame comme ça la page ne dépassera pas ma bannière. j'ai déjà essayé de chercher cela sur le net mais rien trouvé.... www.commentcamarche.net/forum/affich-8371812-fixer-taille-page-asp-net
[html/php ou CSS]taille d'image (Résolu) bonjour je souhaite dimensionner une image a ma sauce cad lui attribuer une taille maximale du genre si elle fait 600px de large pas je ne veux pas, je veux pas kel dépasse 400px!! c'est possible de gérer un truc kom ca??? merci www.commentcamarche.net/forum/affich-1601057-html-php-ou-css-taille-d-image
Réduire la taille des ongletsRéduire la taille des onglets : Voici un module complémentaire pour réduire vos onglets sous Mozilla Firefox Tout d'abord, rendez-vous sur la page de téléchargement des modules complémentaires pour Firefox. (Cette page est disponible... www.commentcamarche.net/faq/sujet-17244-reduire-la-taille-des-onglets
Diminuer la taille des images JPEGSi vous trouvez que vos fichiers JPEG sont trop gros (par exemple pour envoyer par mail ou pour publier sur une page web), voici 4 étapes pour diminuer la taille des fichiers: Étape 1 (optionnel !) : Passer GREYCStoration sur l'image GREYCStoration... www.commentcamarche.net/faq/sujet-3779-diminuer-la-taille-des-images-jpeg
[Webmaster] Les polices dans les pages webLes limites du web Quand vous utilisez une police dans une page web, elle ne s'affichera que si l'internaute a la même police installée sur son ordinateur. Vous n'avez aucun moyen de forcer l'internaute à télécharger et installer une police, pas... www.commentcamarche.net/faq/sujet-3951-webmaster-les-polices-dans-les-pages-web
Résultats pour css : taille de la page ?
HTML/CSS Taille image dans un tableauBonjour, J ai bien essayé pleins de solutions tout seul mais je suis désormais désarmé :p En fait j ai une page qui se nomme mapage.php dans laquelle j ai un tableau html. je voudrais que la case supérieure gauche de mon tableau fasse toujours 70% de... www.commentcamarche.net/forum/affich-4737861-html-css-taille-image-dans-un-tableau
CSS:largeur fixe/relative ...est-ce possible?Salut, J'ai un probleme avec un site php utilisant du css J'ai deux parties dans mon site, un menu a gauche et le reste de la page a droite. J'utilise des div et du css pour gerer ca. je souhaiterais que le menu de gauche ait une taille fixes de... www.commentcamarche.net/forum/affich-4786315-css-largeur-fixe-relative-est-ce-possible
Modifier la taille d'une image en cssbonjour à tous. je construit une page d'accueuil. J'y ai inséré une image mais je souhaiterai changer sa taille (l'agrandir : elle fait 450x425). voilà le code de mon fichier css : ----------------------------------------------------------------------... www.commentcamarche.net/forum/affich-2275594-modifier-la-taille-d-une-image-en-css
Résultats pour css : taille de la page ?
La syntaxe des style (CSS)Définition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de... www.commentcamarche.net/contents/css/csssyntax.php3
CSS - Les couleursLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de... www.commentcamarche.net/contents/css/css-couleurs.php3
Résultats pour css : taille de la page ?