configuration ecran

[Invité]

Bonjour,

Je viens de faire mon site internet avec Kompozer. Ma question est de savoir si mes pages vont s'adapter automatiquement aux différentes configuation ecran (800*600, 1024*768, etc...). Ce que j'aimerais c'est qu'en fonction des différentes configuartions écran on ne soit pas obligé de se déplacer de gauche à droite pour voir la page entière.
D'autre part, la barre px qu'on trouve dans kompozer correspond elle a la configuration écran (si je mets 1024px et 768px, la page sera entiere sur un ecran 1024*768 par exemple??). Je voudrais éviter aux gens qui viennent sur mon site de devoir faire défiler les pages de droite à gaucheque la page soit entière quelle que soit la congi écran. Vous remerciant d'avance des réponses que vous saurez m'apporter ou des astuces.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[jpbardiau]

Bonjour,

voir ceci

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008052912 Firefox/3.0

[chinon37]

Bonjour,

- La "barre px" est une règle en pixels, elle correspond bien à la taille des éléments en pixels. Le pixels étant une unité d'affichage défini, cela correspondra bien aux pixels de l'écran
- Pour éviter la barre de défilement horizontal (c'est une catastrophe pour la navigation) soit tu fais une largeur fixe avec centrage automatique, soit les tailles des éléments de la page sont définis en % plutôt qu'en pixels: la page s'adaptera à la dimension d'écran

Une solution intéressante: sur un site à 3 colonnes: les colonnes droite et gauche fixes et le conteneur central en %.
Sur un site à 2colonne (ex : alsacreation (lien de JPB)), une colonne fixe (généralement contenant le menu) et l'autre proportionnelle.

Pour un centrage de la page à largeur fixe réussi, définir une règle de style pour body contenant la dimension de largeur fixe et les marges droite et gauche automatiques.
Ce genre de règle marche bien:

Code : Tout sélectionner

body{
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 790px;
}

[Invité]

Et bien là, merci beaucoup, merci mille fois. C'est la seule chose qui me restait à voir pour mon site. Bonne journée

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[Invité]

C'est encore moi. Bon, j'ai réussi à faire les manip pour automatiser les config écran. Par contre, j'ai toujours un bord blanc à gauche en haut et a droite de ma page. Avez vous une idée???

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[mike giorno]

C'est encore moi. Bon, j'ai réussi à faire les manip pour automatiser les config écran. Par contre, j'ai toujours un bord blanc à gauche en haut et a droite de ma page. Avez vous une idée???

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Salut invité,

Pour éviter les bords blancs, tu vas dans ta balise table, une fois que celle ci est ouverte, tu vas dans l'onglet boite, tu peux apercevoir marge Haut, droit, bas, Gauche.
Tu entre dans ces marges des chiffres négatifs de l'ordre de -1% pour le haut et -2 % pour les cotés ou l'inverse, je ne me rappelle plus et quand tu visualises ton site tu n'as plus les différentes marges blanches et c'est ok.
J'oublie il faut rentrer la valeur relative je crois dans position afin d'avoir les cotés gauche et doit sans marges blanches.

Je vais mettre également une question car moi aussi j'ai terminé mon site et il n'y a qu'un élément simple que je n'arrive pas a percevoir correctement du fait que ce n'est pas moi qui suis chargé de mettre le site en ligne. En fait c'est un site pour un copain et c'est lui qui le mettra en ligne. Aussi si tu peux donnes moi une réponse. Merci par avance.

[merwin29]

merci, je vais essayer ça. J'irais ta question aussi mais suis débutant.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[Fabrice.Tres.Net]

Sans l'adresse de la page, il est difficile de donner une réponse...

Quelle est la page?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Invité]

merci, je vais essayer ça. J'irais ta question aussi mais suis débutant.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Salut Merwin 29,

Je te remercie sincèrement pour ta solution. En fait comme je n'étais pas chargé de mettre le site en ligne, je n'avais pas vu toute cette partie. Je pense que cela va bien m'avancer dans mon travail.

J'espère que la solution que je t'ai donnée est correcte. Demande quand même confirmation parce que je suis arrivé à cette solution par tâtonnement. En tout cas quand je modifie les marges de la balise table, personnellement j'arrive à un résultat correct pour le cadre que j'ai sur mon site.

[mike giorno]

merci, je vais essayer ça. J'irais ta question aussi mais suis débutant.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Salut Merwin 29,

Je te remercie sincèrement pour ta solution. En fait comme je n'étais pas chargé de mettre le site en ligne, je n'avais pas vu toute cette partie. Je pense que cela va bien m'avancer dans mon travail.

J'espère que la solution que je t'ai donnée est correcte. Demande quand même confirmation parce que je suis arrivé à cette solution par tâtonnement. En tout cas quand je modifie les marges de la balise table, personnellement j'arrive à un résultat correct pour le cadre que j'ai sur mon site.

[Mongo Bob]

Pour éviter les bords blancs, tu vas dans ta balise table

Je ne sais comment tu as deviné que merwin39 utilise un tableau (et donc dispose d'une balise <table>), ce qui n'est pas conseillé, d'ailleurs?! Peut-être connais-tu son site, déjà, par ailleurs? moi, non. Pour le bien de ce forum et que tout le monde en profite, il vaudrait mieux donner le max d'éléments (j'ai pas trouvé de smiley avec une auréole)
Il faudrait mieux avoir la page de code avant de répondre comme demandé ci-dessous :

Sans l'adresse de la page, il est difficile de donner une réponse...

Quelle est la page?

Par contre, j'ai toujours un bord blanc à gauche en haut et a droite de ma page. Avez vous une idée???

C'est l'une des 2 solution de chinon37, normal, sous certaines définitions d'écran, ça crée des bords vides qui peuvent être blancs ou autre que blanc, c'est une solution comme une autre, si tu veux que le contenu remplisse tout un écran quelle que soit sa définition en px, tu prends l'autre solution :

soit les tailles des éléments de la page sont définis en % plutôt qu'en pixels: la page s'adaptera à la dimension d'écran

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[merwin29]

Voilà, je vous mets l'adresse du site en question. Il n'y a pas grand chose car c'est un test.
http://pesamosca.arnaud.neuf.fr

merci d'avance de vos réponses


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

[Mongo Bob]

pas plus de balise <table> que de verre de Chimay bleue sous le sabot d'un cheval...

C'est l'une des 2 solution de chinon37, normal, sous certaines définitions d'écran, ça crée des bords vides qui peuvent être blancs ou autre que blanc,

Par contre, la réponse ci-dessus est ko, j'avais supputé d'autres types de bords blancs que ceux dont tu parlais et que j'apprécie maintenant, dés lors que tu as donné l'adresse de ta page. Alors, pour ces bords blancs-là, je me permets de réfléchir un peu...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Mongo Bob]

5' + tard : pourquoi ne pas colorer le <body> en noir, dans ton css?

Code : Tout sélectionner

body {background-color: black;
}

je l'ai fait par "Editer les css" dans Webdeveloper ( > Fabrice.Tres.Net), ça marche!
Je mets le css, mais tu le fais par l'interface de Kpz?
OK?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Invité]

Voilà, je vous mets l'adresse du site en question. Il n'y a pas grand chose car c'est un test.
http://pesamosca.arnaud.neuf.fr

merci d'avance de vos réponses


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Salut Merwin 29,

J'avais bien préciser que tu demandes confirmation.

Cependant par rapport à ton code html et sous Kompozer que je note ci dessous, il y a peut être une solution.

<style title="MaFeuilleCss" media="all" type="text/css">
#conteneur { border: 1px solid black;
background-color: black;
width: 100%;
position: static;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}

si tu notes margin top : -1% ou -10px
margin right : - 2% ou - 10 px

de même pour margin left.

Ou sinon moi j'arrive avec ma balise table à modifier la largeur. Tu peux modifier le width dans un cas est le mettre à 103%.

Je conçois tout à fait que j'ai peut-être bidouillé un peu mais si tu trouves une autre solution, tu la prends. En tout cas je ne la vois pas au dessus par rapport à ce qui est noté.

C'est ce que j'ai réalisé avec ma balise table, pour moi cela fonctionne. Tu vois si la solution est bonne à retenir ou non pour ton site.