Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3301 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme centrage site sous differentes résolutions

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Probleme centrage site sous differentes résolutions

n°1567432
fabmusik01
Posté le 30-05-2007 à 17:46:57  profilanswer
 

Bonjour,  
 
Je cherche à centrer ma page web et je suis avec attention le tutoriel de alsacreation:
http://css.alsacreations.com/Faire [...] web-en-CSS
(tout en bas de la page: centrer vertical et horizontal, avec l'exemple ici : http://css.alsacreations.com/xmedi [...] entrer.htm )
Quand on redimensionne la page d'exemple en 800 par 600, le rectangle apparait bien dans sa totalité dans la nouvelle fenetre du navigateur.
 
En ce qui me concerne, le centrage marche impeccablement avec la grande resolution de mon écran. Mais quand je veux voir ce que ça donne en 800x600 pour tester cette résolution qu'on trouve encore sur beaucoup de pc, mon bandeau disparait et pas moyen de le voir avec l'ascenceur.
 
Je précise que mon conteneur fait 800x600 et non 700x400 comme sur le tuto, est-ce la raison (j'adapte bien sur les parametres dans la css) ?
 
Ma page:
http://www.espci.fr/esp/v2/navig2.html
Ma css:
 body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     }
   
#global
{    
  position:absolute;
     left: 50%;  
     top: 50%;
     width: 800px;
     height: 600px;
     margin-top: -300px; /* moitié de la hauteur */
     margin-left: -400px; /* moitié de la largeur */
  text-align: left;
    }
 
Je ne maitrise pas encore bien ces css, peut-etre que la reponse est evidente, mais là je seche. Dans l'idéal ce que j'aurais voulu faire, c'est que le cadre soit toujours avec des marges autour et que sa taille varie proportionnellement à la résolution. En clair, que pour une resolution basse le cadre ne prenne pas toute la page mais reste centré, plus petit, comme il apparait en plus forte résolution. Mais peut-etre n'est ce pas possible ?
Si je n'ai pas été assez clair, ou s'il manque des infos n'hésitez pas à me demander.  
Merci d'avance pour votre aide.

mood
Publicité
Posté le 30-05-2007 à 17:46:57  profilanswer
 

n°1567471
stravoguin​e
Posté le 30-05-2007 à 19:15:23  profilanswer
 

Eternelle question, sans blague, arrétte de te prendre la téte, fais ton design en 1024x768, 80% fonctionne avec cette résolution, 15% avec 800x600, les autres sont déja au dessus de 1024, alors t'embétes pas car c'est tout ton design qu'il va falloir faire en fluide et là bonjour les dégats et les prises de téte. Sans compter que ces designs sont pas simpls à transformer, le moindre changement est une galére!
 
ceux qui seront en 800x600 feront jouer leur scrollbar t'occupes pas d'eux, ils évolueront quand ils en auront marre.

n°1567473
stravoguin​e
Posté le 30-05-2007 à 19:18:23  profilanswer
 

fabmusik01 a écrit :


 
Je précise que mon conteneur fait 800x600 et non 700x400 comme sur le tuto, est-ce la raison (j'adapte bien sur les parametres dans la css) ?
 


 
Et les marges de ton navigateur? IE, Firefox?, pas les méems marges déja, l'espace que boufe la barre de navigation à droite? Faut y penser aussi! Tu pourra spas faire ton contener en 800x600 si tu vises ces résolutions, un contener s'emboite pas comme par magie en pleine page de ton navigateur.

n°1567669
fabmusik01
Posté le 31-05-2007 à 10:03:30  profilanswer
 

Merci de ta réponse ! C'est mon premier site, donc j'apprends un peu sur le tas, et tu m'as convaincu pour la resolution minimale à viser.

n°1567721
AlphaZone
Posté le 31-05-2007 à 11:01:49  profilanswer
 

fabmusik01 a écrit :

Merci de ta réponse ! C'est mon premier site, donc j'apprends un peu sur le tas, et tu m'as convaincu pour la resolution minimale à viser.


Ne vise pas un site en 1024x768. C'est une résolution écran. Comme te la expliqué Stravoguine, prend en compte les marges du navigateur. Mais généralement, on définit une taille pour que ça tienne sur une partie de la largeur ou sur toute la largeur. Tu peux également jouer sur la hauteur mais ca devient compliqué pour des raisons de compatibilité entre les différents navigateurs.


---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
n°1568311
stravoguin​e
Posté le 31-05-2007 à 20:55:07  profilanswer
 

Citation :

fais ton design en 1024x768


 
Oui en fait j'ai dit un truc béte sans le vouloir, fais pas ton design en 1024x768 mais optimisé pour...la nuance.
 

n°1568562
dartyduck
n00b AttitudE
Posté le 01-06-2007 à 13:15:08  profilanswer
 

et pourquoi tu utilises pas les margin:auto ???
et pour ca faut éviter les absolute :o


Message édité par dartyduck le 01-06-2007 à 13:15:44

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1568752
fabmusik01
Posté le 01-06-2007 à 17:58:18  profilanswer
 

tutafait ! je suis passé en margin auto et en position relative et ça me va tres bien comme ça. J'ai laissé le centrage vertical de coté, apres tout ca marche comme ça aussi...
Bon par contre je galere avec l'histoire des flash bloqués sur les versions recentes de IE, la parade marche a certains endroits et pas a d'autres, mais ça c'est une autre histoire...et un autre post si j'ai le temps.
Merci pour vos conseils messieurs :-)

n°1574349
dandy24
Posté le 13-06-2007 à 13:14:26  profilanswer
 

j'ai à peu près le même pb.
j'ai codé mon site ne loca sur 800x600 en suivant le tuto sur alsacreation.mon pb est que sur les postes 1024x768 la bannière ne suit pas.
lien:  
http://lesmoungui.africa-web.org/i [...] ge=moungui
merci


---------------
l'ingénieur est celui qui à défaut du génie fait preuve d'ingéniosité
n°1574359
dartyduck
n00b AttitudE
Posté le 13-06-2007 à 13:25:11  profilanswer
 

c'est quoi ces scroll partout ???


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
mood
Publicité
Posté le 13-06-2007 à 13:25:11  profilanswer
 

n°1574864
dandy24
Posté le 14-06-2007 à 13:06:32  profilanswer
 

j'ai fait des div pour n'avoir qu'une partie de la page qui change.la bannière est constante pour toutes les pages.le tout est défini dans une feuille de style.est-il possible de mettre des div dans des tables de telle sorte que la bannière soit dans une ligne et tout le reste dans une autre ligne ? coe ca je pourrai faire <table width=100%>
j'ai essayé de mettre la banière dans un <div width=100%> ca n'a pas marché

n°1574938
AlphaZone
Posté le 14-06-2007 à 15:06:57  profilanswer
 

dandy24 a écrit :

j'ai fait des div pour n'avoir qu'une partie de la page qui change.


Les div ne sont pas fait pour ca.

 

A mon avis, tu devrais consulter : http://www.alsacreations.com


Message édité par AlphaZone le 14-06-2007 à 15:08:20

---------------
"Nous avons tous nos machines du temps. Celles qui nous ramènent en arrière sont les souvenirs, celles qui nous projettent en avant sont les rêves."
n°1575114
dandy24
Posté le 14-06-2007 à 18:31:06  profilanswer
 

j'ai trouvé!
dans ma css j'ai remplacé le div de la bannière par un  
<table width=100% height=100></table>
et dans index.php j'ai:
<table>
  <tr>
    <td><img src="lesmoungui.gif" width=100% height=100></img></td>
  </tr>
</table>
et ca marche qlq soit la résolution!!!
merci à tous!
 

n°1575124
dandy24
Posté le 14-06-2007 à 18:38:13  profilanswer
 

quelqu'un aurait-il une idée d'un logiciel permettant de construire un arbre généalogique?? j'aimerai améliorer celui-ci : http://www.lesmoungui.africa-web.org/arbremoungui.html  
je sais que c'est peut être pas le topic!!
mais bon j'attend votre aide!

n°1575782
dartyduck
n00b AttitudE
Posté le 16-06-2007 à 10:29:12  profilanswer
 

dandy24 a écrit :

j'ai trouvé!
dans ma css j'ai remplacé le div de la bannière par un  
<table width=100% height=100></table>
et dans index.php j'ai:
<table>
  <tr>
    <td><img src="lesmoungui.gif" width=100% height=100></img></td>
  </tr>
</table>
et ca marche qlq soit la résolution!!!
merci à tous!


[:vomi]
spa bien les tables pour la mise en page, c'est fait pour les données tabulaires. Pas sur que ton site soit validé par w3c :o


---------------
Nikon D7000 + 18-105VR + 35mm 1.8

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme centrage site sous differentes résolutions

 

Sujets relatifs
Problème débutantEquation de la chaleur en 2D. Problème avec mon logiciel.
[PHP][ORACLE] Problème de requête SQL[RESOLU] FPDF probleme mise en page tableau
Nouveau site : Esport-News, vos avis?Problème de compilo en ligne de commande : run-time error R6009
probleme enregistrement[GLSL-OSG] probleme avec les shaders GLSL sous osg
problème avec flash et Internet explorer [RESOLU]Lyon : ch. bon bricoleur pour un site
Plus de sujets relatifs à : Probleme centrage site sous differentes résolutions


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR