empiétement centrage en négatif

empiétement centrage en négatif - HTML/CSS - Programmation

Marsh Posté le 23-09-2008 à 21:32:08    

bonjour, j'utilise le script suivant avec les balises Div dans body pour centrer le contenu de mes pages web :
 

<style type="text/css">
<!--
 
div.centre
{
position:absolute;
left:50%;
top:50%;
width:836px;
height:706px;
margin-left:-418px;  
margin-top:-353px;  
background-color:#000000;
}
 
-->
</style>


 
le problème concerne les utilisateurs à faible définition d'écran (inférieur à 1024x768), ça bouffe une partie de mon bloc centré (le haut du bloc)
je suppose que c'est du à l'utilisation de valeurs négatives..
 
comment stopper le phénomène ? merci


---------------
Un jour viendra, l'élève dépassera le maître...
Reply

Marsh Posté le 23-09-2008 à 21:32:08   

Reply

Marsh Posté le 24-09-2008 à 06:01:43    

comment stopper ce phénomène ?
en supprimant purement et simplement le position:absolute.
et en supprimant de ta tête l'idée de centrer le site en hauteur.
donc :  
 

Code :
  1. div.centre
  2. {
  3. width:836px;
  4. background-color:#000000;
  5. margin:0 auto;
  6. }

Reply

Marsh Posté le 24-09-2008 à 10:14:06    

nan, je souhaite le centrer en hauteur car j'ai une bonne et simple raison : mon site est un "carré" qui ne bouge pas, dans lequel se passe des choses (menu, affichage d'images, vidéo) donc aucun scrollbars et il s'ouvre en popup adaptée à l'écran de l'utilisateur (c'est du faux fullscreen pour pas faire peur à l'utilisateur et qu'il puisse "garder le contrôle"..) du coup imagine un truc pas centré verticalement sur un Mac en 1600x1..., t'imagines la laideur maintenant ? ;)
c'est purement esthétique et dans mon métier, c'est un peu le principal..
en tous cas, merci de ton aide.


Message édité par joviper le 24-09-2008 à 10:14:41

---------------
Un jour viendra, l'élève dépassera le maître...
Reply

Marsh Posté le 24-09-2008 à 15:14:01    

Salut Joviper,
 
essaie comme  ça:
 

Code :
  1. body{
  2. width:  100%;
  3. height: 100%;
  4. }
  5. #centre{
  6. width: 70%; 
  7. height: 90%; /* bien entendu tu choisis les pourcentages qui t'arrangent */
  8. position: absolute;
  9. left: 15%;
  10. right: 15%;
  11. top: 5%;
  12. bottom: 5%;  /* et les marges en conséquence */
  13. background-color: green;
  14. }

Reply

Marsh Posté le 24-09-2008 à 16:04:22    

re, merci, j'ai essayé et adapté en faisant un test avec un bloc de 400x300 pixels mais j'ai un pb avec la position du bloc qui se définit non pas par son centre, mais par le coin supérieur gauche..comment puis-je faire pour définir la position de mon bloc par rapport à son centre ?

Code :
  1. body{
  2. width:  100%;
  3. height: 100%;
  4. }
  5. div.centre{
  6. width: 400px;
  7. height: 300px; /* bien entendu tu choisis les pourcentages qui t'arrangent */
  8. position: absolute;
  9. left: 25%;
  10. right: 25%;
  11. top: 25%;
  12. bottom: 25%;  /* et les marges en conséquence */
  13. background-color: green;
  14. }


voilà ce que je voudrais avec un contrôle par le centre de mon block avec un réglage de marge à 50% (logique pour être au centre !) :
image en rouge, c'est ce que je veux, en jaune c'est ce que j'ai pour le moment


Message édité par joviper le 24-09-2008 à 16:16:17

---------------
Un jour viendra, l'élève dépassera le maître...
Reply

Marsh Posté le 24-09-2008 à 17:33:06    

Le positionnement ne s'applique jamais au centre d'un élément mais toujours au côté concerné.
Tiens-tu absolument à ce que ton carré ait une largeur et une hauteur fixes (en pixel) ?
Car sinon ma solution entièrement en pourcentages fonctionne.
 
 
Si tu veux absolument un carré de dimensions fixes en pixel, tu sera obligé pour le centrer correctement de détecter la hauteur de la fenêtre via javascript et de charger une feuille de style en fonction de la résolution.
Mais là tu rentre dans la prise de tête (cf: http://particletree.com/features/d [...] t-layouts/ ).
 
Après à toi de voir...

Reply

Marsh Posté le 24-09-2008 à 18:52:36    

wouuuuh...dac, je vais pas me prendre la tête à ce point.
je mets ta méthode au chaud pour plus tard (un(e) autre site/version peut-être?)
actuellement, j'ai vraiment besoin d'un carré aux dimensions fixes, je vais donc garder mon ancien code, en espérant que peu d'utilisateurs auront une définition inférieur à 1024x768...sinon le carré disparaîtra ! lol
merci énormément pour ton aide

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed