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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  empiétement centrage en négatif

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

empiétement centrage en négatif

n°1791097
joviper
Posté le 23-09-2008 à 21:32:08  profilanswer
 

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...
mood
Publicité
Posté le 23-09-2008 à 21:32:08  profilanswer
 

n°1791140
gatsu35
Blablaté par Harko
Posté le 24-09-2008 à 06:01:43  profilanswer
 

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. }

n°1791180
joviper
Posté le 24-09-2008 à 10:14:06  profilanswer
 

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...
n°1791433
basile238
Posté le 24-09-2008 à 15:14:01  profilanswer
 

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. }

n°1791475
joviper
Posté le 24-09-2008 à 16:04:22  profilanswer
 

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...
n°1791563
basile238
Posté le 24-09-2008 à 17:33:06  profilanswer
 

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...

n°1791594
joviper
Posté le 24-09-2008 à 18:52:36  profilanswer
 

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


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

  empiétement centrage en négatif

 

Sujets relatifs
[RESOLU] Centrage background csscentrage html/css galère...
[HTML] Souci centrage calque avec Dreamweaver > site bancal :o(Centrage vertical et horizontal
Probleme centrage site sous differentes résolutionsBarre de defilement, et centrage de bloc sur la page
if, nombre négatifconvertir nombre négatif en positif
Problème centrage et élargissement de page web 
Plus de sujets relatifs à : empiétement centrage en négatif


Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)