Bonjour,
J'aimerais savoir comment imposer la largeur d'une page WEB.
Merci
Bien cordialement.
Michel
Imposer la largeur d'une page Web
Modérateur : chinon37
Re: Imposer la largeur d'une page Web
Bonjour,
Llargeur d'une page web se fixe par une règle css.
Au plus simple:
Dans la barre de tâches, tout en bas de l'écran KompoZer, clic droit sur la balise <body> > styles internes> onglet boite > largeur: 800px (par exemple)
pour centrer la page: marges droite et gauche: auto
Tu fais ok. Ta page sera fixée à 800px de largeur au centre de l'écran d'affichage du navigateur.
Si tu connais un peu les feuilles de style css, le mieux est de créer une feuille de style avec les règles ci-dessus pour <body >
Llargeur d'une page web se fixe par une règle css.
Au plus simple:
Dans la barre de tâches, tout en bas de l'écran KompoZer, clic droit sur la balise <body> > styles internes> onglet boite > largeur: 800px (par exemple)
pour centrer la page: marges droite et gauche: auto
Tu fais ok. Ta page sera fixée à 800px de largeur au centre de l'écran d'affichage du navigateur.
Si tu connais un peu les feuilles de style css, le mieux est de créer une feuille de style avec les règles ci-dessus pour <body >
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Imposer la largeur d'une page Web
Bonjour et merci Chinon 37,
Ok j'ai suivi tes conseils, mais je me suis peut être mal exprimé car je voudrais, si la fenêtre du navigateur dépasse 800 px, deux bandes neutres de chaque coté, comme dans cet exemple :
http://www.carcans.fr/ (C'est le site de mon village)
Cordialement.
Michel
Ok j'ai suivi tes conseils, mais je me suis peut être mal exprimé car je voudrais, si la fenêtre du navigateur dépasse 800 px, deux bandes neutres de chaque coté, comme dans cet exemple :
http://www.carcans.fr/ (C'est le site de mon village)
Cordialement.
Michel
Re: Imposer la largeur d'une page Web
pas de problème!
Si tu as suivi mon conseil en passant par les styles internes, tu peux faire comme ça:
enregistrer la page
clic droit sur <body> à nouveau > styles internes > tu vas sur "extraire et créer un style générique" > cocher "tous les éléments ..." "...de même type" et tu valides.
Tu as maintenant une feuille de style
Tu vas ouvrir cette feuille de style par F11
ensuite, tu vas cliquer sur la petite palette de la nouvelle fenêtre qui s'est ouverte et dans le champ qui clignote, tu vas taper html
puis "créer la règle de style" > onglet fond > tu choisis une couleur et tu valides
Pour bien voir le résultat, dans la feuille de style, tu sélectionnes body, et dans l'onglet boite, tu mets une valeur (1000px, par exemple) à hauteur.
Si tu as suivi mon conseil en passant par les styles internes, tu peux faire comme ça:
enregistrer la page
clic droit sur <body> à nouveau > styles internes > tu vas sur "extraire et créer un style générique" > cocher "tous les éléments ..." "...de même type" et tu valides.
Tu as maintenant une feuille de style
Tu vas ouvrir cette feuille de style par F11
ensuite, tu vas cliquer sur la petite palette de la nouvelle fenêtre qui s'est ouverte et dans le champ qui clignote, tu vas taper html
puis "créer la règle de style" > onglet fond > tu choisis une couleur et tu valides
Pour bien voir le résultat, dans la feuille de style, tu sélectionnes body, et dans l'onglet boite, tu mets une valeur (1000px, par exemple) à hauteur.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Imposer la largeur d'une page Web
Bonjour et encore merci,
J'ai suivi à la lettre tes conseils mais hélas je n'arrive pas au résultat escompté, en effet ma page Web s'étale lamentablement sur toute la fenêtre !
J'ai copié le code que voici :
Pourrais tu m'en dire plus, car je ne comprend pas ce qui se passe, Merci
J'ai suivi à la lettre tes conseils mais hélas je n'arrive pas au résultat escompté, en effet ma page Web s'étale lamentablement sur toute la fenêtre !
J'ai copié le code que voici :
Code : Tout sélectionner
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Essai</title>
<style type="text/css">
body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
html {
background-color: #99ff99;
}[/color]
[color=#4040FF]</style>
</head>
<body>
<br>
</body>
</html>Re: Imposer la largeur d'une page Web
Non, tout va très bien comme tu vas pouvoir le voir avec le code ci-dessous:
J'ai simplement ajouté à ton code une couleur pour body et une hauteur. En effet, tant que tu n'as pas de contenu dans ta page, <body> ne fait qu'une ligne, sauf si tu spécifies une hauteur de bloc. Lorsque tu ajoutes du contenu, Body va s'adapter au contenu. T peux faire le test en ajoutant un faux texte (lorem ipsum)
J'ai simplement ajouté à ton code une couleur pour body et une hauteur. En effet, tant que tu n'as pas de contenu dans ta page, <body> ne fait qu'une ligne, sauf si tu spécifies une hauteur de bloc. Lorsque tu ajoutes du contenu, Body va s'adapter au contenu. T peux faire le test en ajoutant un faux texte (lorem ipsum)
Code : Tout sélectionner
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Essai</title>
<style type="text/css">
body {
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #cccccc;
height: 800px;
}
html {
background-color: #99ff99;
}
</style>
</head>
<body>
<br>
<br>
</body>
</html>
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Imposer la largeur d'une page Web
Bonjour et merci Chinon 37,
Super c'est génial, c'est exactement ce que je voulais, je travaillai jusqu'a présent avec FrontPage, je crois que je vais adopter KompoZer.
Merci pour ton dévouement et ta générosité.
Cordialement.
Michel
Super c'est génial, c'est exactement ce que je voulais, je travaillai jusqu'a présent avec FrontPage, je crois que je vais adopter KompoZer.
Merci pour ton dévouement et ta générosité.
Cordialement.
Michel
Re: Imposer la largeur d'une page Web
N'hésite pas à revenir, il y aura toujours quelqu'un pour essayer de t'aider 
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Imposer la largeur d'une page Web
Bonjour,
J'ai réussi à mettre en pratique les conseils de Chinon 37 et le résultat est satisfaisant avec Firefox 3.6.12, Opera, et Chrome.
Mais dans IE 8 catastrophe, la page s'étale sur toute la largeur disponible !
Voici l'adresse du site :http://michel.venot.pagesperso-orange.fr/
Je ne comprend pas, merci pour votre aide éventuelle.
Michel1
J'ai réussi à mettre en pratique les conseils de Chinon 37 et le résultat est satisfaisant avec Firefox 3.6.12, Opera, et Chrome.
Mais dans IE 8 catastrophe, la page s'étale sur toute la largeur disponible !
Voici l'adresse du site :http://michel.venot.pagesperso-orange.fr/
Je ne comprend pas, merci pour votre aide éventuelle.
Michel1
Re: Imposer la largeur d'une page Web
Le problème est que ce site a été débuté avec frontpage 6 qui ne respecte pas vraiment les règles des standards du web.
Il aurait mieux vlu reprendre tout à 0 avec KompoZer
Une validation du code html fait apparaitre 85 erreurs et 21 avertissements (rien que pour la page d'accueil!): http://validator.w3.org/check?verbose=1 ... Findex.htm
Une validation css (feuille de styles) fait apparaitre 43 erreurs: http://jigsaw.w3.org/css-validator/vali ... Findex.htm
La plupart de ces erreurs sont essentiellement dues à l'utilisation de frontpage...
Et c'est assez drôle que ce soit sur IE que ça coince
Un bon nettoyage des feuilles de style ne serait pas du luxe, déjà pour supprimer touts les styles inutiles qui encombrent.
Il aurait mieux vlu reprendre tout à 0 avec KompoZer
Une validation du code html fait apparaitre 85 erreurs et 21 avertissements (rien que pour la page d'accueil!): http://validator.w3.org/check?verbose=1 ... Findex.htm
Une validation css (feuille de styles) fait apparaitre 43 erreurs: http://jigsaw.w3.org/css-validator/vali ... Findex.htm
La plupart de ces erreurs sont essentiellement dues à l'utilisation de frontpage...
Et c'est assez drôle que ce soit sur IE que ça coince
Un bon nettoyage des feuilles de style ne serait pas du luxe, déjà pour supprimer touts les styles inutiles qui encombrent.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Imposer la largeur d'une page Web
Salut ! tout reprendre avec kompozer serait en effet le mieux, tu t'y retrouvera mieux 
tu ne garde...que les photos, en pensant à en redimensionner certaines :
http://michel.venot.pagesperso-orange.f ... 0copie.gif
j'ai pas vérifié les autres mais j'ai trouvé que celle ci était longue à s'afficher.
dailleur en lisant le lien pense à ne pas mettre d'espace entre les mots, sinon c'est transformé en %20, met plutôt un tiret bas "_"
bonne continuation !
tu ne garde...que les photos, en pensant à en redimensionner certaines :
http://michel.venot.pagesperso-orange.f ... 0copie.gif
j'ai pas vérifié les autres mais j'ai trouvé que celle ci était longue à s'afficher.
dailleur en lisant le lien pense à ne pas mettre d'espace entre les mots, sinon c'est transformé en %20, met plutôt un tiret bas "_"
bonne continuation !
Re: Imposer la largeur d'une page Web
Bonjour à tous,
Merci à Chinon 37 et à Vigri pour leurs conseils précieux.
J'ai tout refait avec KompoZer et ça va beaucoup mieux, cependant j'ai encore un petit soucis avec la feuille de style externe h1.css, en effet quand on passe de la page d'accueil aux autres pages il y a un petit sursaut en haut.
Chose qui ne se produit pas avec les autres pages entre elles.
Je pense qu'il doit s'agir d'une mauvaise gestion des marges.
Il est vrai que les images illustrant la page "http://michel.venot.pagesperso-orange.fr/Nos_vins.html" sont très disparates en format et en poids, je vais essayer de remédier à ça.
Encore un grand merci et bonne journée.
Amicalement.
Michel1
Merci à Chinon 37 et à Vigri pour leurs conseils précieux.
J'ai tout refait avec KompoZer et ça va beaucoup mieux, cependant j'ai encore un petit soucis avec la feuille de style externe h1.css, en effet quand on passe de la page d'accueil aux autres pages il y a un petit sursaut en haut.
Chose qui ne se produit pas avec les autres pages entre elles.
Je pense qu'il doit s'agir d'une mauvaise gestion des marges.
Il est vrai que les images illustrant la page "http://michel.venot.pagesperso-orange.fr/Nos_vins.html" sont très disparates en format et en poids, je vais essayer de remédier à ça.
Encore un grand merci et bonne journée.
Amicalement.
Michel1
Re: Imposer la largeur d'une page Web
Bonjour
Pour le saut de page, il est simplement dû à un style interne de la balise <body> inutile sur la page accueil.
Tu peux supprimer simplement celui-ci avec KompoZer en faisant un clic droit sur cette balise <body> dans la barre de tâche (tout en bas de l'écran) > styles internes > sélectionner le contenu de l'onglet général et l'effacer > valider
La balise body dans la barre de tâches ne doit plus être en italiques (sont en italiques les balises pour lesquelles il y a des styles internes)
Pour les images, il faut vraiment les compresser. Généralement on admet qu'une image ne doit pas faire plus de 50 à 100 ko.
Or sur la page d'accueil, bleurette.png fait 1843Ko. le poids des autres pages est raisonnable.
HS: petite faute d'orthographe en page d'accueil Christelle et Jean-Luc se ferons un plaisir de vous accueillir . Dans ce paragraphe, vous commencez à la première personne, pour passer ensuite à la 3eme personne: cela fait bizarre. Pourquoi ne pas mettre: "nous nous ferons un plaisir [...]"?
Pour le saut de page, il est simplement dû à un style interne de la balise <body> inutile sur la page accueil.
Tu peux supprimer simplement celui-ci avec KompoZer en faisant un clic droit sur cette balise <body> dans la barre de tâche (tout en bas de l'écran) > styles internes > sélectionner le contenu de l'onglet général et l'effacer > valider
La balise body dans la barre de tâches ne doit plus être en italiques (sont en italiques les balises pour lesquelles il y a des styles internes)
Pour les images, il faut vraiment les compresser. Généralement on admet qu'une image ne doit pas faire plus de 50 à 100 ko.
Or sur la page d'accueil, bleurette.png fait 1843Ko. le poids des autres pages est raisonnable.
HS: petite faute d'orthographe en page d'accueil Christelle et Jean-Luc se ferons un plaisir de vous accueillir
. Dans ce paragraphe, vous commencez à la première personne, pour passer ensuite à la 3eme personne: cela fait bizarre. Pourquoi ne pas mettre: "nous nous ferons un plaisir [...]"?Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: Imposer la largeur d'une page Web
Pour bleurette.png que t'a fait remarqué Chinon37 tu peut garder les même dimensions mais compresser en jpg à un taux entre 70 et 80% de qualité , même 60% pour de la verdure sans applats !
Sinon remarque plus artistique, il serait préférable de mettre une photo de vote demeure vue de face, et garder la vue satellite pour une page secondaire...là ça surprend un peu quand on arrive.
Aussi en général on évite de souligner, car c'est "réserve" aux liens, on a tendance à passer la souris sur les mots souligné pour voir si c'est un lien, j'utilise encore très peu kompozer et je vois en effet qu'il le permet facilement, les autres logiciels rendent la fonction moins accessible pour éviter les abus...
Sinon remarque plus artistique, il serait préférable de mettre une photo de vote demeure vue de face, et garder la vue satellite pour une page secondaire...là ça surprend un peu quand on arrive.
Aussi en général on évite de souligner, car c'est "réserve" aux liens, on a tendance à passer la souris sur les mots souligné pour voir si c'est un lien, j'utilise encore très peu kompozer et je vois en effet qu'il le permet facilement, les autres logiciels rendent la fonction moins accessible pour éviter les abus...
Re: Imposer la largeur d'une page Web
Michel,
Quelques petites précisions sur l'utilisation de KompoZer et la mise en page du site:
- en général, on évite la mise en page par tableau qui pose vite des problèmes. par exemple, Firefox et IE n'interprètent pas de la même manière les bordures...
- Les feuilles de styles ne doivent pas servir uniquement pour <Body> et <html>. Il est intéressant de les utiliser également pour définir les formats des titres, des paragraphes, des liens etc.
Une fois la balise (par exemple a pour les liens) définie, les liens seront automatiquement formatés sans avoir besoin de le faire pour chaque lien. Autre avantage: si tu veux modifier ton design un jour, en modifiant la feuille de styles, la modification sera plus rapide et plus simple et elle pourra se faire automatiquement sur toutes les pages en même temps sans intervention de ta part pour chaque page.
ainsi avec une règle comme ceci:
a {
color: #ced5df;
text-decoration: none;
}
Tous les liens sont de couleur grise et ne sont pas soulignés.
si j'ajoute cette règle:
a:hover {
color: #cc0000;
}
les liens se coloreront en rouge quand on passera la souris dessus.
Tu peux regarder cette page de mon site et l'ouvrir dans KompoZer pour voir comment j'ai fait. (pour l'ouvrir dans KompoZer, tu copies l'adresse de la page, et dans KpZ,
>fichier > ouvrir une page web > coller l'adresse de la page
Il n'y a aucun tableau, le menu est fait à partir d'une liste...
Quelques petites précisions sur l'utilisation de KompoZer et la mise en page du site:
- en général, on évite la mise en page par tableau qui pose vite des problèmes. par exemple, Firefox et IE n'interprètent pas de la même manière les bordures...
- Les feuilles de styles ne doivent pas servir uniquement pour <Body> et <html>. Il est intéressant de les utiliser également pour définir les formats des titres, des paragraphes, des liens etc.
Une fois la balise (par exemple a pour les liens) définie, les liens seront automatiquement formatés sans avoir besoin de le faire pour chaque lien. Autre avantage: si tu veux modifier ton design un jour, en modifiant la feuille de styles, la modification sera plus rapide et plus simple et elle pourra se faire automatiquement sur toutes les pages en même temps sans intervention de ta part pour chaque page.
ainsi avec une règle comme ceci:
a {
color: #ced5df;
text-decoration: none;
}
Tous les liens sont de couleur grise et ne sont pas soulignés.
si j'ajoute cette règle:
a:hover {
color: #cc0000;
}
les liens se coloreront en rouge quand on passera la souris dessus.
Tu peux regarder cette page de mon site et l'ouvrir dans KompoZer pour voir comment j'ai fait. (pour l'ouvrir dans KompoZer, tu copies l'adresse de la page, et dans KpZ,
>fichier > ouvrir une page web > coller l'adresse de la page
Il n'y a aucun tableau, le menu est fait à partir d'une liste...
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité